All Collections
Widgets
How to integrate widget into Shopify product page
How to integrate widget into Shopify product page
Nemanja avatar
Written by Nemanja
Updated over a week ago

After you familiarize yourself with the concept of widgets, and you create your first widget, make sure you click on Share, and Copy Embed Code.

Once you have embed code you should navigate to your Shopify account.

1. Navigate to Shopify themes and under 'Actions' choose 'Edit code' option.

2. From the sidebar choose 'product-template.liquid' file, as this should be usually the main file for product layout.

It can happen that you want to inject widget on a specific place like product tabs or similar components. In that case, check 'product-template.liquid' for imports of such files. If you find imports, you would have to search for a specific files, usually under 'Sections'.

3. Depending on the position you want to have widget, you will copy/paste widget code which is in a shape of a HTML script tag <script src="https://storifyme.com/widgets/widget/WIDGET_ID"></script>. More about widget you can find here.

In our case we want to show stories right after sharing buttons.

4. In case you want that your widget be dynamic, so that for every product, it shows different set of stories, you can add tags parameter on a script like this:
<script src="https://storifyme.com/widgets/widget/WIDGET_ID?tags={{product.handle}}"></script>.

Now, for every product widget will load only stories which are tagged with specific product handle.

5. That's it. Stories will appear on the product page in a predefined position and in a layout you choose in StorifyMe dashboard.

If you have any other questions regarding basic configuration, feel free to ping us in chat or contact us! ❤️

Did this answer your question?