Ad

HTML Tabbed Description

- 1 answer

I am having trouble adding a tabbed description to my Shopify store, I have tried the options below with no luck!

The first issue is I am not sure I am using the split tag correctly, as the function doesn't pull the code.

Secondly, the tabbed description displays all the information in one view. Doesn't seem to be in a box format more of an overflow?

Any help will be grateful! I am not a coder, but I gave it a try. Can you help?

Product.liquid

  • Option-1: Replace {% section 'product-template' %} with HTML below
  • Option-2: No replacement just add
  • Or Product-template.liquid
  • Option-3: Replace {% section 'product-template' %} with HTML below
  • Option-4: No replacement just add
  • Or Product description HTML editor
  • Option-5: Add HTML
  • HTML

    <div id="product_tabs">
      <ul>
        <li class="tab_1"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#tabs-1"><h4>Description</h4></a></li>
        <li class="tab_2"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#tabs-2"><h4>Specs</h4></a></li>
        <li class="tab_3"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#tabs-3"><h4>Shipping</h4></a></li>
        <li class="tab_4"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#tabs-4"><h4>Returns/Refunds</h4></a></li>
      </ul>
      <div id="tabs-1">
        {% if product.description contains '<!-- split -->' %} 
          {{ description[0] }} 
        {% else %} 
        <p>No Content</p>
        {% endif %}
      </div>
      <div id="tabs-2">
        {% if product.description contains '<!-- split -->' %} 
          {{ description[1] }}
        {% else %}
          <p>No Content</p>
        {% endif %} 
      </div>
                       <div id="tabs-3">
        {{ pages.shipping-policy.content }}
      </div>
      <div id="tabs-4">
        {{ pages.refund-policy.content }}
      </div>
    </div>
    

    CSS Add to Theme.scss.liquid

    #product_tabs > ul {
      list-style: none;
      margin: 0;
    }
    #product_tabs > ul > li {
      display: inline-block;
      border: 1px solid;
      padding: 10px;
    }
    #product_tabs > ul > li h4 {
      margin: 0;
    }
    #product_tabs > ul > li.ui-tabs-active {
      background: #ddd;
    }
    
    Ad

    Answer

    It appears to me as though there is nothing that is making the tabs active or inactive. Did you forget to post some of your code? If not it explains why everything is being displayed all at once. If nothing is telling it when to show it will just display everything back to back like you described.

    For the explanation of how split works see here. Essentially it can pull from an array; however I don't know why your product description would be an array.

    The shopify official help center created a post on making tabs that has worked for many people in the past see here.

    Ad
    source: stackoverflow.com
    Ad