Custom the position, heading title and style of your Instagram feed to match your store's theme
Articles on: Socialwidget
We are moving to Shopify's embedded app for your best experience. To manage the app, please go to your Shopify Admin → Apps → Search Instagram Feed, Story & TikTok → Tap Pin to your navigation to make it tick with this homepage, and you don't need to search every time accessing it. Kindly click HERE to refer more detailed instructions.
After connecting your Instagram account, creating your Media Source and Gallery, you need to create a Widget to display the Instagram feed on your store.
In this article:
A. Create a Widget
B. Widget Settings
Choose gallery
Customize widget
Install widget
C. Preview/Edit/Pause/Duplicate/Delete a widget
There are two ways to create a Widget.
In Gallery tab, click on the icon (...) on the right-hand side > Click Create widget > You will be redirected to the Widget Settings page
Click on the third icon on the Menu > Click on Add new
You need to go through three steps to complete the setup, which are Choosing gallery, Customizing widget and Installing widget
You need to name your widget, choose the gallery for the widget and choose the template. We have multiple templates to suit your needs, so feel free to pick one that looks best on your website and mobile.
With this step, you can fully customize your widget, including the layout, heading, item and popup.
Here you can edit the padding, border and margin of the whole widget.
Notably, our app enables you to choose the max-width of the widget to be equal to the elements above it. This way, the widget is automatically consistent with other elements in your website without having to adjust manually.
Moreover, now you can set a background image for the widget. Simply click on Choose image in Background section and upload your own image.
Transparent widget background
Full-color backgrounds can make the widgets look less appealing occasionally. To meet your expectations, Transparent background has been released to assist in customizing your ideal background color.
Select Widget tab
Select Layout Settings
Tap Color button at Background section
Drag the opacity slide bar to adjust the transparency
Here is the place where you can enable and edit the content for your widget's title and description.
To change the content and the format of these two fields, double click on them and type your own content in the preview.
If you prefer to show your Instagram profile information instead of heading title, please refer to this document
Note: The font of these fields is automatically matched with the main font of your theme. We are also working on the feature that lets you choose your own font, so stay tuned!
If you choose Enable hover effect, customers are able to see other information (caption, likes, comments, date of post) when hovering on a picture. Besides, you can also adjust the background (color, opacity) and the content (color, font, etc.).
Please note that this feature is only available for desktop, so customers are not able to see anything when hovering on your widget on mobile.
Instagram's API restricts the app from counting the likes of comments of a Personal account. Therefore, if you want your likes and comments to be shown, please switch the account type to Business.
This feature helps you to set up where the visitors’ page will be redirected when clicking on your Instagram post and which elements will be displayed on it.
Open Popup: allows your customer's page to be redirected to same tab or new tab when they click on your Profile name. If you would like your customers not to be redirected to any another pages, then choosing No link function.
Open Instagram: allows your customers to directly access to your Instagram page when clicking on your Instagram posts.
None: There are no redirections to any pages If your customers click on your widget. This function helps to keep your customers to stay and shop on your website.
Besides, you can totally enable your Follow button/ caption/ likes/ comments/ date on your Instagram post.
In addition, View on Instagram function supports your customers go directly to same post on Instagram page with same tab or new tab.
This feature supports in customizing functions relate to tagged items
Show icon cart on item
Similar to other platforms, Socialwidget app also assist customers showcase the icon cart on their Instagram feed. When your visitors hover on the post having tagged items, the icon cart is displayed to inform them.
This feature is only available for Instagram feed and Tiktok feed.
Hotspot
Hotspot feature helps to mark your tagged items on your posts. With this function, your customers are able to imagine performance of your products.
Hotspot color: the color of the hotspot displays on your images
Hotspot hover: the information of your tagged items when hovering on the hotspot
Hotspot link: the URL of product details when clicking on the hotspot
Here's an example for hotspot showing on your Instagram feed:
CTA button
CTA button will help you convert your visitors to buyers.
View Detail: this will redirect your customers to your Product details
Direct to check out: this will turn your visitors directly to the Checkout page in one click.
Add to cart: this will help your customers add products to the shopping cart directly on widget feed and checkout later by clicking on the button.
You can totally customize the content, button color and text color of CTA buttons as your preferences.
Only View Detail button is applied to “Open product detail in same tab”/ “Open product detail in new tab” function. As default, Checkout now button will be opened in another tab when being clicked and Add to cart button will keep your visitors stay on the posts.
The Auto install option lets you choose an existing page and the position (top, bottom or custom position). If you want to custom the position, simply click on Custom > Select Element. Then, you will be directed to another window to decide the position of the widget by clicking Insert Here.
If you want to install the widget by yourself manually, choose the option Manual install by widget code. You can copy and paste the code into your Shopify theme template to embed the widget anywhere in your store.
Click Save and your widget is created successfully!
Here is how the widget looks on your site. You can visit our sample store to see how a widget for your category will look!
Note: You can create multiple widgets on the same page. There is no limit on how many widgets, so feel free to experiment and custom them to match your site.
In the Widget tab, click on the (...) icon to see the option to preview/edit/duplicate/delete a widget.
Updated on: 09/01/2024
We are moving to Shopify's embedded app for your best experience. To manage the app, please go to your Shopify Admin → Apps → Search Instagram Feed, Story & TikTok → Tap Pin to your navigation to make it tick with this homepage, and you don't need to search every time accessing it. Kindly click HERE to refer more detailed instructions.
After connecting your Instagram account, creating your Media Source and Gallery, you need to create a Widget to display the Instagram feed on your store.
In this article:
A. Create a Widget
B. Widget Settings
Choose gallery
Customize widget
Install widget
C. Preview/Edit/Pause/Duplicate/Delete a widget
There are two ways to create a Widget.
1. Create a Widget from a Gallery
In Gallery tab, click on the icon (...) on the right-hand side > Click Create widget > You will be redirected to the Widget Settings page
2. Create a Widget from scratch
Click on the third icon on the Menu > Click on Add new
You need to go through three steps to complete the setup, which are Choosing gallery, Customizing widget and Installing widget
1. Choose gallery
You need to name your widget, choose the gallery for the widget and choose the template. We have multiple templates to suit your needs, so feel free to pick one that looks best on your website and mobile.
2. Customize widget
With this step, you can fully customize your widget, including the layout, heading, item and popup.
Layout settings
Here you can edit the padding, border and margin of the whole widget.
Notably, our app enables you to choose the max-width of the widget to be equal to the elements above it. This way, the widget is automatically consistent with other elements in your website without having to adjust manually.
Moreover, now you can set a background image for the widget. Simply click on Choose image in Background section and upload your own image.
Transparent widget background
Full-color backgrounds can make the widgets look less appealing occasionally. To meet your expectations, Transparent background has been released to assist in customizing your ideal background color.
Select Widget tab
Select Layout Settings
Tap Color button at Background section
Drag the opacity slide bar to adjust the transparency
Heading settings
Here is the place where you can enable and edit the content for your widget's title and description.
To change the content and the format of these two fields, double click on them and type your own content in the preview.
If you prefer to show your Instagram profile information instead of heading title, please refer to this document
Note: The font of these fields is automatically matched with the main font of your theme. We are also working on the feature that lets you choose your own font, so stay tuned!
Item settings
If you choose Enable hover effect, customers are able to see other information (caption, likes, comments, date of post) when hovering on a picture. Besides, you can also adjust the background (color, opacity) and the content (color, font, etc.).
Please note that this feature is only available for desktop, so customers are not able to see anything when hovering on your widget on mobile.
Instagram's API restricts the app from counting the likes of comments of a Personal account. Therefore, if you want your likes and comments to be shown, please switch the account type to Business.
Popup settings
This feature helps you to set up where the visitors’ page will be redirected when clicking on your Instagram post and which elements will be displayed on it.
Open Popup: allows your customer's page to be redirected to same tab or new tab when they click on your Profile name. If you would like your customers not to be redirected to any another pages, then choosing No link function.
Open Instagram: allows your customers to directly access to your Instagram page when clicking on your Instagram posts.
None: There are no redirections to any pages If your customers click on your widget. This function helps to keep your customers to stay and shop on your website.
Besides, you can totally enable your Follow button/ caption/ likes/ comments/ date on your Instagram post.
In addition, View on Instagram function supports your customers go directly to same post on Instagram page with same tab or new tab.
Shoppable settings
This feature supports in customizing functions relate to tagged items
Show icon cart on item
Similar to other platforms, Socialwidget app also assist customers showcase the icon cart on their Instagram feed. When your visitors hover on the post having tagged items, the icon cart is displayed to inform them.
This feature is only available for Instagram feed and Tiktok feed.
Hotspot
Hotspot feature helps to mark your tagged items on your posts. With this function, your customers are able to imagine performance of your products.
Hotspot color: the color of the hotspot displays on your images
Hotspot hover: the information of your tagged items when hovering on the hotspot
Hotspot link: the URL of product details when clicking on the hotspot
Here's an example for hotspot showing on your Instagram feed:
CTA button
CTA button will help you convert your visitors to buyers.
View Detail: this will redirect your customers to your Product details
Direct to check out: this will turn your visitors directly to the Checkout page in one click.
Add to cart: this will help your customers add products to the shopping cart directly on widget feed and checkout later by clicking on the button.
You can totally customize the content, button color and text color of CTA buttons as your preferences.
Only View Detail button is applied to “Open product detail in same tab”/ “Open product detail in new tab” function. As default, Checkout now button will be opened in another tab when being clicked and Add to cart button will keep your visitors stay on the posts.
3. Install widget
The Auto install option lets you choose an existing page and the position (top, bottom or custom position). If you want to custom the position, simply click on Custom > Select Element. Then, you will be directed to another window to decide the position of the widget by clicking Insert Here.
If you want to install the widget by yourself manually, choose the option Manual install by widget code. You can copy and paste the code into your Shopify theme template to embed the widget anywhere in your store.
Click Save and your widget is created successfully!
Here is how the widget looks on your site. You can visit our sample store to see how a widget for your category will look!
Note: You can create multiple widgets on the same page. There is no limit on how many widgets, so feel free to experiment and custom them to match your site.
In the Widget tab, click on the (...) icon to see the option to preview/edit/duplicate/delete a widget.
Updated on: 09/01/2024
Updated on: 21/04/2024
Thank you!