# Edit widget

The editor features a top bar with tabs for customizing different widget elements. Below the bar is a side panel with the settings that change based on the selected tab. The Preview area features a device switch (Desktop/Mobile view) to show how the widget will appear in your store across different screen sizes and devices.

{% hint style="warning" %}
When you first open the editor, you’ll see a notification asking you to **activate the app**. You need to do this to ensure the widget displays in your theme. Once you activate the app, the notification disappears.
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/M8nCICcqJ9NJd3FhlNXe" alt=""><figcaption></figcaption></figure></div>

The tabs in the top bar are as follows:

### **Content**

In this tab, you choose the widget’s **layout** and adjust its **background**, **corners**, and **spacing**. You can also set the **widget container width** and the **mobile breakpoint** (advanced), i.e. the screen size at which the widget switches to the mobile layout.

Here, you can hide and rearrange the widget’s components (**Heading**, **Subheading**, **Posts**, and **Button**) and customize their appearance: fonts, colors, paddings, extra elements, etc.

### **Feed**

In this tab, you define the content of your widget.

* **Instagram-like** replicates the order of posts and reels from your account. You can also choose which content to display (posts, reels, or both), pin important cards to the top, and hide whose you don't need.
* **Manual** lets you select only the cards you want from your Instagram account.

*Note: the number of posts in the widget is set in the **Content** tab. If you add fewer posts, the remaining empty cards will appear as placeholders. If you add more posts, the extra cards will be blurred in the admin and will be hidden from your widget on the storefront.*

<figure><img src="/files/YEHpxVIeHDRFnqg5ycxN" alt=""><figcaption></figcaption></figure>

### **Popup**

In this tab, you adjust the look of the popup that appears when you click on the post and show or hide its extra elements.

{% hint style="info" %}
*Note: this tab shows only if you set the **Open on click** value of the **Posts** component to **Popup**.*
{% endhint %}

<div align="left"><img src="/files/RIRmBiqa4iOK6gu8chj2" alt=""></div>

### **Localization**

In this tab, you translate the widget content into other published store languages. You can translate the text, button label, and popup link label.

{% hint style="info" %}
*Notes:*

* *this tab is hidden until you add and publish at least one additional language in your store*
* *if you do not add translations, the widget displays content in your store’s default language*
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://getsitecontrol.gitbook.io/gsc-instagram-feed/edit-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.