How to Embed a Snippet in Product Description (HTML iFrame?)

Technical Q&A
1

Hi there,

Just wondering if anyone can help with a coding query -

We are trying to embed the HTML we have in a specific Snippet in our Snippets folder under the ‘Edit Code’ menu of our theme (Debutify), into a selection of product pages.

The HTML code is a bespoke shipping policy, where the shipping times vary, depending on the product.

Just wondering if anyone knows how to embed a Snippet into the html editor on a product page..

Would you use an iFrame for this?

We’ve linked Snippets into the product page template already in the code editor (using {% render ‘shipping-info’ %} for example), but hoping to also be able to add these snippets into the HTML of certain product pages.

We are hoping to use snippets, so that the shipping policy on certain product pages is dynamic, allowing us to alter the shipping policy on these specific pages, if need be.

…also open to alternative ways of doing this if anyone can think of an easier way around this?

Many thanks for your help in advance!

James

2

Hi there James,

At this time you don’t the order of operations your trying to do is reversed, a product description/content goes into liquid to be read, liquid does not go into the description/content to then again go into liquid to be read.

This is generally done using the split string-parsing trick by adding to the html of descriptions through the rich text editors code button

Then liquid looks for that string and separate the description/content at that point to let you render a snippet and then render the rest of the description/content.

Fast example

{%- assign delimiter = "" -%}
{% if product.content contains delimiter %}
    {%- assign content_parts = product.content | split: delimiter -%}
    {{- content_parts.first -}}
    {%- render 'snippet_name' -%}
    {{- content_parts.last -}}
{% endif %}

https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#add-html-content-with-the-rich-text-editor

…also open to alternative ways of doing this if anyone can think of an easier way around this?

This could also be handled with metafield definitions, alternate templates & configurable blocks; but that can be alot of data entry if not thought through.

Deeper discussions on split trick and other high level features available on the forums, also see the more advanced shortcodes schemes.

3

Hi Paul,

Fantastic, many thanks for your help with this.

I managed to get this working by adding the code quoted in your reply to the product description template and also in the html of the product description itsself.

We found we had to remove the:

’ {{- content_parts.first -}}’ and ‘{{- content_parts.last -}}’

parts of the code, as it seemed to be duplicating our product description.

Just one more question actually -

We already have a snippet that we include in all of our product descriptions which states our general shipping policy and we are using the HTML function to state a different shipping policy on specific products.

Ideally however, we’d like it so that if we were to use the html in a product description, the other ‘template’ snippet will disappear.

Just wondering if you know of a way around this - would it be a function in the product-template.liquid, stating ‘if X then Y’?

Hope this makes sense and many thanks again for your help

James