james-a
11/21/2017 - 11:53 AM

Split Description

{% comment %}
Useful for splitting a product description into tabs or separate locations across the page.

Product description should be entered in Shopify as a single column table (should be easy enough for clients to do). The code below then splits this out cell by cell.

I've given them names in this example, which you'd likely want to change.
{% endcomment %}

{% assign desc = product.description | split: '<td>' %}
{% assign summary = desc[1] | split: '</td>' | first  %}
{% assign details = desc[2] | split: '</td>' | first  %}
{% assign techspec = desc[3] | split: '</td>' | first  %}
{% assign usage = desc[4] | split: '</td>' | first  %}

{% comment %}
You can then use the above variables in your code e.g...
{% endcomment %}

<div class="product-summary">
  {{ summary }}
</div>

<div class="rte" itemprop="description">
  <ul class="tabs">
    <li><a href="#">Details</a></li>
    <li><a href="#">Tech Spec</a></li>
    <li><a href="#">Usage</a></li>
  </ul>

  <ul class="tabs-content">
    <li>{{ details }}</li>
    <li>{{ techspec }}</li>
    <li>{{ usage }}</li>
  </ul>
</div>