Include snippet content with div

Highlighted
New Member
2 0 0

Hey folks,

 

So I regularly make use of includes in liquid, creating my own snippet and including that content in other areas of the theme. Works a treat. However, the downfall is that this can only be done in liquid.

 

I want to make my product descriptions a little easier to edit, so anything that is the same as other products (i.e. instructions for use etc) I want to create a snippet (or something else) and include that content using divs.

 

I notice that this is possible, form builders for example do this, they'll let you design a form then at the end they'll give you a div tag to paste into your page to render the form. I'd like to do the same thing but render my product instructions or whatever across multiple product descriptions using divs.

 

Any help would be appreciated!

 

Thanks!

0 Likes
Highlighted
Shopify Partner
2294 117 353

The simplest is direct keyword string replacement

{% if product.description contains "KEYWORD" %}
{%- capture content -%}
{% include "test"%}
{%- endcapture -%}
{{ product.description | replace:"KEYWORD",content }}
{% endif%}
{{ product.description }}

https://shopify.dev/docs/themes/liquid/reference/filters/string-filters#replace

Remember to make keywords unique enough to not get ambigous matches such as words that have those letters.

 

Otherwise you'll want to look at the <!-- split --> methods or shorttags

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
New Member
2 0 0

Hi Paul, thanks for the reply.

 

Am I right in thinking that method would only be able to display before or after the product description content?

 

I was hoping to be able to have something along the lines of:

 

MAIN DESCRIPTION
<p>Product Instructions</p>
<div id="instructions"></div>
<p>Product Ingredients</p>
<div id="ingredients"></div>
FURTHER DESCRIPTION

I have shortcode built into my theme, I'm not sure whether I can utilise this, but I wouldn't know where to start with it. Currently it's used to display product sliders etc in HTML pages/products. I generate the tags for it using a generator page (also built into the theme).

 

Thanks!

0 Likes
Highlighted
Shopify Partner
2294 117 353

only be able to display before or after the product description content?

No it's a replace so you can do it multiple times

{% if product.description contains "KEYWORD" or product.description contains "KEYWORD2" %}
{%- capture content -%}
{% include "snippet"%}
{%- endcapture -%}
{%- capture content2 -%}
{% include "snippet2"%}
{%- endcapture -%}

{{ product.description | replace:"KEYWORD",content | replace:"KEYWORD2",content2 }}
{% endif%}

So:

 

{% assign instructionsString = "<div id="instructions"></div>" %}
{% assign ingredientsString = "<div id="ingredients"></div>" %}
{% if product.description contains instructionsCode or product.description contains ingredientsCode %} {%- capture instructions -%} {% include "instructions" %} {%- endcapture -%} {%- capture ingredients -%} {% include "ingredients" %} {%- endcapture -%}
{{ product.description | replace:instructionsIdentifier ,instructions | replace:ingredientsIdentifier,content2 }} {% endif%}

 

Note here that the <div>'s get replaced entirely so they need to also be in the snippet.

Otherwise you have to do some string splitting and joining for each content and stitch everything together without surrounding divs being in the snippets themselves.

 

Alternatively use html comments

{% assign instructionsIdentifier = "<!--instructions-->"%}
{% assign ingredientsIdentifier = "<!--ingredients-->"%}

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes