> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://socialhead.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom the position, heading title and style of your Instagram feed to match your store's theme

Your store’s design is a reflection of your brand—and every element, including your Instagram feed, should align with that identity. With our app, you can fully customize the position, heading title, and style of your Instagram feed to seamlessly match your store’s theme. Whether you're aiming for a sleek minimalist look or a bold and colorful vibe, our tools give you the flexibility to make your feed feel like a natural part of your storefront.

In this guide, we’ll walk you through how to fine-tune your Instagram feed's layout and appearance with our app so it not only looks great but also enhances your customer experience.

### Table of Contents

1. [Create a Widget](#1-create-a-widget)
2. [Widget Settings](#1-widget-settings)
3. [Preview / Edit / Pause / Duplicate / Delete a Widget](#1-preview-edit-pause-duplicate-delete-a-widget)
---

Before creating a widget, make sure you've already:

* [Connected your Instagram account](https://socialhead.crisp.help/en/article/how-to-add-new-instagram-personal-professional-account-to-socialwidget-io449/#1-3how-to-add-a-professional-instagram-account)
* Created your [Media Source](https://socialhead.crisp.help/en/article/what-is-a-media-source-and-how-to-create-one-in-our-app-1tbrrlq/?bust=1713695972865)
* Created your [Gallery](https://socialhead.crisp.help/en/article/what-is-a-gallery-and-how-to-create-one-in-our-app-1f9kxax/)
---

# Create a Widget

You can create a widget using **two methods**:

### 1. From a Gallery

* Go to the **Gallery** tab  
* Click the **(…) icon** on the right-hand side  
* Select **Create Widget**  
* You’ll be taken to the Widget Settings page  
![Gallery Create Widget](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_9odom6.png)

### 2. From Scratch

* Click the **Widget (third icon)** on the menu  
* Select **Create Widget**  
![Create from Scratch](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_sqso58.png)

# Widget Settings

Setting up your widget involves 3 simple steps:

### 1. Choose Gallery

* Name your widget  
* Choose the appropriate gallery  
* Pick a template that matches your site’s design  
![Choose Gallery](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_10e2un9.png)

### 2. Customize Widget

You can fully customize your widget's layout, heading, item styles, popups, and shoppable features.

#### 🔧 Layout Settings

* Adjust **padding, border, margin**, and **max-width** for layout consistency  
* Set a **background image** or choose a **transparent background**  
![Layout Settings](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_18dx1eu.png)
![Transparent BG](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_1rkoerh.png)

#### 📝 Heading Settings

* Enable and edit **Title** and **Description**  
* Automatically matches your site font  
* Prefer your Instagram profile over headings? [See how here](https://socialhead.crisp.help/en/article/show-your-instagram-profile-to-get-more-followers-and-interaction-a4189o/)  

![Heading Edit](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_33frqi.png)

#### 🖼 Item Settings

* Enable **Hover effects** (desktop only) for showing captions, likes, comments, and dates  
* Customize hover background and content styles  

![Hover Settings](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_umqhqn.png)

|| **Note:** Personal Instagram accounts can’t show likes/comments due to API restrictions. Switch to Business for full functionality.

#### 🔍 Popup Settings

Control what happens when users click on a post:  
* **Open Popup:** same/new tab or no link  
* **Open Instagram:** direct link to the Instagram post  
* **None:** keep users on your store  
* Enable elements like **Follow button, caption, likes, comments, and date**  

![Popup Options](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_139vye.png)

#### 🛒 Shoppable Settings

Enhance shopping with **tagged products**:  
* **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.  

![](https://storage.crisp.chat/users/helpdesk/website/ab8a6f89b0a19000/image_19f5l11.png)
  
|| This feature is only available for Instagram feed and Tiktok feed.

* **Hotspots:** define tag positions, hover info, and product links  
* *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

![](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_1jtqqz4.png)

* **CTA Buttons:**  
* *View Detail* → product page  
* *Checkout Now* → checkout page  
* *Add to Cart* → adds to cart directly  

You can totally customize the content, button color and text color of CTA buttons as your preferences.  
 
![](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_1ybx5n8.png)

|| 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.

![Hotspot + CTA](https://storage.crisp.chat/users/helpdesk/website/ab8a6f89b0a19000/image_1r3g0km.png)

### 3. Install Widget

With Shopify **Theme 2.0**, adding a widget is easy:

* Go to **Online Store → Customize theme**  
* Choose the page you want  
* Click **Add section → Select the widget**  
* Hit **Save**  
![Add Section](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_17ipg13.png)

✅ Widget will now appear on your page like this:  
![Live Preview](https://storage.crisp.chat/users/helpdesk/website/ab8a6f89b0a19000/image_nl7lws.png)

| **Tip:** You can add **multiple widgets** per page. No limits—get creative!

# Preview / Edit / Pause / Duplicate / Delete a Widget

To manage your widgets:

* Go to the **Widget tab**
* Click the **(…) icon** next to the widget  
* Choose your preferred action: Pause, Edit, Duplicate, or Delete  
![Widget Management](https://storage.crisp.chat/users/helpdesk/website/cb92164b6e8ef000/1_1ydni44.png)
---

Migrating to Shopify's embedded app creates a more streamlined and integrated experience. By following the steps in this article, you can now:

* Easily access the app from your Shopify admin  
* Build fully customizable Instagram, TikTok, and Story widgets  
* Display stunning, shoppable galleries to increase engagement and drive conversions  

If you meet any issue while trying to fix these errors, do not hesitate to drop us a message in the live chat or email us at [support@socialhead.io](mailto:support@socialhead.io). We would love to help you out!