Manually adding your widget can help you to place the widget at your desired positions. Let us show you to handle it!

Make copy the widget code from our app

You will need to access our app and take the widget code before inserting on your theme.

Tap on the widget
At the Install widget code step, choose Manual install by widget code
Make copy the code





Embed the widget code on your theme

Currently, Shopify is developing two kinds of theme for your templates.

Theme 1.0 will include .liquid file extension
Theme 2.0 will include .json file extension

Embedding manual code in each theme type will follow different ways. From Shopify Admin → Select Online StoreThemes → Tap Action on your preferred theme → Edit Code



Theme 1.0

Choose the exact page and position you'd like to add the widget and embed the code.

For instance: If you want to add the Instagram feed at the bottom of our Homepage, please choose index.liquid file → insert the code at the end → Save



Likewise, please choose collection.liquid if you'd want to place the feed on your Catalog site, and choose product.liquid for the feed on product details pages.

Theme 2.0

Because the theme 2.0 is having .json file extension. You will need to call out the .liquid file extension to manually add your code. There are two ways to add the widget code on this theme type:

A. Search the section which is comprising .liquid file extension and add the code

For instance: If you'd like to place the widget under your banner on Homepage, please type Banner on Search bar → select image-banner.liquid → Embed the code



Similarly, please search other related sections and put the code as you want.

B. Create a new section with .liquid file extension

Select Add a new section → Name as social-widget.liquid



In this file, insert this below code:


Back to template, select which page you'd like to place the widget → Add the code to this .json file

For instance: We choose index.json file to add the feed on Homepage


Please make sure that the code ID is correctly taken from our app.
Put the detail code in your preferred position

There are some small sections in the page and listed under "order" (scroll down your file till the end to see it). Please add the code under "social_widget_ID" to suitable section here.

For instance: If the widget is expected to place under the rich_text, we will need to add "social_widget_34649", under rich_text line.

Note: 34649 is our test widget code ID.



Kindly remember to add the comma "," after "social_widget_ID". For any codes under "multi_column", it is not necessary to put this comma.

This is how the widget is displayed under rich_text

If you have any further concern, you can always reach out to us via in-app live chat or email at support@socialhead.io
Was this article helpful?
Cancel
Thank you!