# Edit Inline 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="https://2119928280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLrB9JKgDkBgPUuqsAfV1%2Fuploads%2FPSfYdRQEjGfZ41zknJEc%2FInline%20pane%20new%20(1).png?alt=media&#x26;token=2051e352-1d84-4a79-a8b3-e48799a03c5a" alt=""><figcaption></figcaption></figure></div>

The tabs in the top bar are as follows:

### **General**

In this tab, you choose the fonts to further use in the widget’s components, and adjust the **mobile breakpoint,** i.e. the screen size where the widget’s design changes from desktop to mobile layout.

{% hint style="info" %}
*Note that if you choose to use theme fonts in the widget, the actual fonts won’t appear in the widget preview. They will only be visible in the theme editor.*
{% endhint %}

Here, you can also choose a default **preset** for your timer widget. Presets define the overall appearance of the widget (components, background, typography, colors, etc.). Use presets as they are, or customize them to your taste.

### **Content**

In this tab, you can adjust the widget’s background, borders, corners, and spacing. You can also add and customize the appearance of its components (**Text**, **Timer**, and **Coupon**).

<details>

<summary><strong>💡 How to manage Inline widget’s components</strong></summary>

1. In the text area, place your mouse cursor wherever you want to insert additional components (Timer and Coupon), then hit **{+}Timer** or **{+}Coupon** at the top.
2. Go to the settings of the main widget component — **Text.**
3. Customize the components’ appearance (fonts, colors, extra elements, etc.).

<div data-with-frame="true"><figure><img src="https://2119928280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLrB9JKgDkBgPUuqsAfV1%2Fuploads%2FzbiUSvOkQO37Es67lpcC%2FInline_insert.webp?alt=media&#x26;token=e8ab392f-f92e-448a-a2d9-3ae69f880391" alt=""><figcaption></figcaption></figure></div>

To remove the components, either delete the **{{Timer}}** and **{{Coupon}}** from the text area, or hit the **eye icon** next to the component in the list, as shown in the screenshot.

<div data-with-frame="true"><figure><img src="https://2119928280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLrB9JKgDkBgPUuqsAfV1%2Fuploads%2FpZjqmNX5ezbbjcdMA0vy%2FFrame_2087325878_(1).webp?alt=media&#x26;token=c864408d-120a-4c6e-b151-aef456ed3529" alt=""><figcaption></figcaption></figure></div>

</details>

### **Timer**

In this tab, you choose the timer mode: **Fixed date**, **Evergreen**, or **Daily**.

{% hint style="success" %}
[**Learn more about the difference between timer modes**](https://getsitecontrol.gitbook.io/gsc-countdown-timer/fixed-date-evergreen-daily)
{% endhint %}

### **Localization**

In this tab, you translate the widget content into other published store languages. You can translate the text, time unit labels, button label, and coupon label. You can also set different button URLs and send customers to different pages based on the language.

{% 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 %}