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
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.
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
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
![](https://storage.crisp.chat/users/helpdesk/website/1f80398088429900/cf3c0780-d365-4862-a418-dd4443_17ekdek.png)
![](https://storage.crisp.chat/users/helpdesk/website/d505df52a0d9d800/cf655fbc-a4bd-48db-a1bd-3477e0_3g5vgc.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/d829969c59574800/ea578a04-223f-4172-ac4b-22cfa2_5rok3q.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/d260b939ef102000/a746ce69-03b9-4a79-964b-f0f7d8_1duwtp0.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/67dc2b86ec51500/270bb536-f8b7-4de2-afb4-ccb48e_qtosby.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/ed7b23bf0d947000/eb62fe26-6c68-4a84-96d8-b23e57_8h4b4g.png)
In this file, insert this below code:
![](https://storage.crisp.chat/users/helpdesk/website/1919bd5fbed4d000/9566e4c0-b0e9-40c6-b33c-7ac436_1sne4tu.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/ab8a6f89b0a19000/image_1m8qvad.png)
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.
![](https://storage.crisp.chat/users/helpdesk/website/ab8a6f89b0a19000/image_nnefm4.png)
Kindly remember to add the comma "," after "social_widget_ID". For any codes under "multi_column", it is not necessary to put this comma.
![](https://storage.crisp.chat/users/helpdesk/website/ab8a6f89b0a19000/image_ss8ekt.png)
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
Thank you!