How to manually add your widget code Make copy the widget code from our app Embed the widget code on your theme

Articles on: Socialwidget

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



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








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 Store→ Themes → 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.



If you have any further concern, you can always reach out to us via in-app live chat or email at support@socialhead.io

Updated on: 09/01/2024

Updated on: 21/04/2024