How to add multiple tabs to product pages in Prestige theme Shopify?

Hi,

In order to add multiple tabs on product page in prestige theme on Shopify, please follow these steps:

• From your Shopify dashboard, click Online store > Actions > Edit code
• Open the file snippets/product-tabs.liquid
• paste the following code

{%- assign first_page = pages[section.settings.tab_page_1_handle] -%}
{%- assign second_page = pages[section.settings.tab_page_2_handle] -%}
{%- assign first_custom_page = '' -%}
{%- assign second_custom_page = '' -%}
{%- assign third_custom_page = '' -%}
{%- assign forth_custom_page = '' -%}
{%- assign fifth_custom_page = '' -%}
{%- assign sixth_custom_page = '' -%}

{%- comment -%}
  We allow to add two tabs that are extracted using the tag system. To add such a tag, simply create a page and
  note the handle somewhere.
  Next, add a tag to your product in this form: __tab1:page-handle or __tab2:page-handle
  The theme will automatically link the tab to the page
{%- endcomment -%}

{%- assign has_unique_tab_1 = false -%}
{%- assign has_unique_tab_2 = false -%}
{%- assign has_unique_tab_3 = false -%}
{%- assign has_unique_tab_4 = false -%}
{%- assign has_unique_tab_5 = false -%}
{%- assign has_unique_tab_6 = false -%}

{%- comment -%}First, check the metafields{%- endcomment -%}

{%- if product.metafields.sf_product_tabs.tab_1_title != blank and product.metafields.sf_product_tabs.tab_1_content != blank -%}
  {%- assign unique_tab_1_title = product.metafields.sf_product_tabs.tab_1_title -%}
  {%- assign unique_tab_1_content = product.metafields.sf_product_tabs.tab_1_content -%}
  {%- assign has_unique_tab_1 = true -%}
{%- endif -%}

{%- if product.metafields.sf_product_tabs.tab_2_title != blank and product.metafields.sf_product_tabs.tab_2_content != blank -%}
  {%- assign unique_tab_2_title = product.metafields.sf_product_tabs.tab_2_title -%}
  {%- assign unique_tab_2_content = product.metafields.sf_product_tabs.tab_2_content -%}
  {%- assign has_unique_tab_2 = true -%}
{%- endif -%}

{%- if product.metafields.sf_product_tabs.tab_3_title != blank and product.metafields.sf_product_tabs.tab_3_content != blank -%}
  {%- assign unique_tab_3_title = product.metafields.sf_product_tabs.tab_3_title -%}
  {%- assign unique_tab_3_content = product.metafields.sf_product_tabs.tab_3_content -%}
  {%- assign has_unique_tab_3 = true -%}
{%- endif -%}

{%- if product.metafields.sf_product_tabs.tab_4_title != blank and product.metafields.sf_product_tabs.tab_4_content != blank -%}
  {%- assign unique_tab_4_title = product.metafields.sf_product_tabs.tab_4_title -%}
  {%- assign unique_tab_4_content = product.metafields.sf_product_tabs.tab_4_content -%}
  {%- assign has_unique_tab_4 = true -%}
{%- endif -%}

{%- if product.metafields.sf_product_tabs.tab_5_title != blank and product.metafields.sf_product_tabs.tab_5_content != blank -%}
  {%- assign unique_tab_5_title = product.metafields.sf_product_tabs.tab_5_title -%}
  {%- assign unique_tab_5_content = product.metafields.sf_product_tabs.tab_5_content -%}
  {%- assign has_unique_tab_5 = true -%}
{%- endif -%}

{%- if product.metafields.sf_product_tabs.tab_6_title != blank and product.metafields.sf_product_tabs.tab_6_content != blank -%}
  {%- assign unique_tab_6_title = product.metafields.sf_product_tabs.tab_6_title -%}
  {%- assign unique_tab_6_content = product.metafields.sf_product_tabs.tab_6_content -%}
  {%- assign has_unique_tab_6 = true -%}
{%- endif -%}

{%- comment -%}Then, let's try the tags{%- endcomment -%}

{%- for tag in product.tags -%}
  {%- if tag contains '__tab1' -%}
    {%- assign first_custom_page = tag | split: ':' | last -%}
    {%- assign first_custom_page = pages[first_custom_page] -%}

    {%- assign unique_tab_1_title = first_custom_page.title -%}
    {%- assign unique_tab_1_content = first_custom_page.content -%}
    {%- assign has_unique_tab_1 = true -%}
  {%- endif -%}

  {%- if tag contains '__tab2' -%}
    {%- assign second_custom_page = tag | split: ':' | last -%}
    {%- assign second_custom_page = pages[second_custom_page] -%}

    {%- assign unique_tab_2_title = second_custom_page.title -%}
    {%- assign unique_tab_2_content = second_custom_page.content -%}
    {%- assign has_unique_tab_2 = true -%}
  {%- endif -%}

  {%- if tag contains '__tab3' -%}
    {%- assign third_custom_page = tag | split: ':' | last -%}
    {%- assign third_custom_page = pages[third_custom_page] -%}

    {%- assign unique_tab_3_title = third_custom_page.title -%}
    {%- assign unique_tab_3_content = third_custom_page.content -%}
    {%- assign has_unique_tab_3 = true -%}
  {%- endif -%}

  {%- if tag contains '__tab4' -%}
      {%- assign forth_custom_page = tag | split: ':' | last -%}
      {%- assign forth_custom_page = pages[forth_custom_page] -%}

      {%- assign unique_tab_4_title = forth_custom_page.title -%}
      {%- assign unique_tab_4_content = forth_custom_page.content -%}
      {%- assign has_unique_tab_4 = true -%}
    {%- endif -%}

   {%- if tag contains '__tab5' -%}
     {%- assign fifth_custom_page = tag | split: ':' | last -%}
     {%- assign fifth_custom_page = pages[fifth_custom_page] -%}

     {%- assign unique_tab_5_title = fifth_custom_page.title -%}
     {%- assign unique_tab_5_content = fifth_custom_page.content -%}
     {%- assign has_unique_tab_5 = true -%}
   {%- endif -%}

   {%- if tag contains '__tab6' -%}
    {%- assign sixth_custom_page = tag | split: ':' | last -%}
    {%- assign sixth_custom_page = pages[sixth_custom_page] -%}

    {%- assign unique_tab_6_title = sixth_custom_page.title -%}
    {%- assign unique_tab_6_content = sixth_custom_page.content -%}
    {%- assign has_unique_tab_6 = true -%}
  {%- endif -%}
{%- endfor -%}

{%- if first_page.handle != blank or second_page.handle != blank or has_unique_tab_1 or has_unique_tab_2 or has_unique_tab_3 or has_unique_tab_4 or has_unique_tab_5 or has_unique_tab_6 or section.settings.reviews_enabled -%}
  <div class="Product__Tabs">
    {%- if has_unique_tab_1 -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- unique_tab_1_title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- unique_tab_1_content -}}              
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if has_unique_tab_2 -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- unique_tab_2_title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- unique_tab_2_content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if has_unique_tab_3 -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- unique_tab_3_title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- unique_tab_3_content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if has_unique_tab_4 -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- unique_tab_4_title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- unique_tab_4_content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if has_unique_tab_5 -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- unique_tab_5_title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- unique_tab_5_content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if has_unique_tab_6 -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- unique_tab_6_title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- unique_tab_6_content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if first_page != empty -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- first_page.title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- first_page.content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if second_page != empty -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- second_page.title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- second_page.content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if section.settings.reviews_enabled -%}
      <div class="Collapsible Collapsible--large">
        {%- comment -%}We parse from metafields the number of reviews{%- endcomment -%}
        {%- assign reviews_count = product.metafields.spr.reviews | split: '<meta itemprop="reviewCount" content="' | last | split: '">' | first | times: 1 -%}

        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          <span>{{ 'product.tabs.reviews' | t }} <span class="text--light">({{ reviews_count | default: 0 }})</span></span>
          <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
        </div>
      </div>
    {%- endif -%}
  </div>
{%- endif -%}

• Click save

Feel free to reply to this topic if you need any further assistance.
Katrine