Skip to content

Instantly share code, notes, and snippets.

@bjornbennett
Last active July 7, 2024 20:25
Show Gist options
  • Save bjornbennett/6ef1616287a5156b570f8a1fc2b71a4f to your computer and use it in GitHub Desktop.
Save bjornbennett/6ef1616287a5156b570f8a1fc2b71a4f to your computer and use it in GitHub Desktop.
Shopify Liquid - Divide product descriptions for more control
{% assign description_parts = product.description | split: '<!--split-->' %}
{%comment%}
Due to a limitation within Shopify, you have one section to write a general product description.
However, if you'd like to split sections and control them via CSS/jQuery/whatever, this provided a way to do that.
You may want the client to have access to editing the content, but you need to style the sections.
To divide sections, insert <!--split--> when you want a new section.
Shown below are snippets to use to output various sections.
Amount of parts: {{ description_parts.size }}
Index of last part: {% assign index_last = description_parts.size | minus: 1 %}
First part: {{ description_parts.first }}
First part: {{ description_parts[0] }}
Second part: {{ description_parts[1] }}
Third part: {{ description_parts[2] }}
Fourth part: {{ description_parts[3] }}
{%endcomment%}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment