# Add Widgets with Get Code

{% hint style="danger" %}
**Adding widgets directly to the theme code is not covered by the app’s support.** Before you start, please note that using the ‘Get code’ feature requires development skills for editing theme code. The amount of support is limited to this topic only.
{% endhint %}

Use this feature to add **Inline, Small,** or **Large** timers to your theme, in case:

* the section doesn't allow for adding app blocks
* the theme is vintage and doesn’t support app blocks (learn about [theme architecture in Shopify](https://help.shopify.com/en/manual/online-store/themes/managing-themes/versions))

### Activate the app in a theme

{% hint style="info" %}
**For the widget’s code to function correctly, you need to activate the app in your theme.**
{% endhint %}

Hit **Activate** in the app admin notification to quickly access the **GSC Timer Widgets** app embed of your **published theme.** This notification disappears once you activate the app. Don’t forget to **Save** the changes in the theme editor.

<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%2Fr65wMdXkplYEjlzooLNG%2Factivate%20image.webp?alt=media&#x26;token=ae492d55-7eb7-4158-a5c7-af08adde4b2c" alt=""><figcaption></figcaption></figure></div>

Alternatively, you can activate the app in a theme manually:

1. From your Shopify admin, go to **Online Store** > [**Themes**](https://admin.shopify.com/themes).
2. Choose the theme, and click **Customize** to open the theme editor.
3. On the sidebar of the theme editor, click the **App embeds** icon.
4. Find the **GSC Timer Widgets** in the list of installed apps.
5. Click the toggle beside **GSC Timer Widgets** to activate it.
6. **Save** the changes in the theme editor.

### Get the widget’s code

To get the widget’s code, follow these steps:

1. Go to the app admin and click the **Get code** button

* next to the widget’s name in the list of widgets

<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%2Fok9Y4O1EJ6oh4iDhJlnf%2Fget_code_button_1.webp?alt=media&#x26;token=0dc1eabb-68fc-4835-8d46-72a71dbb3183" alt=""><figcaption></figcaption></figure></div>

* or on the top bar of the widget editor

<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%2FE3PbQX2Cu3sOayeMq5jP%2Fget_code_button_2.webp?alt=media&#x26;token=1ae81b3c-535b-400b-9fbd-52a18e786401" alt=""><figcaption></figcaption></figure></div>

2. In the modal window, click the code snippet to copy it.

<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%2Fxvv3NzjX5uV1uvGUegnP%2Fget_code_new_(1).webp?alt=media&#x26;token=58c7bea0-cfed-4093-b6cd-cb2e2f9802a1" alt=""><figcaption></figcaption></figure></div>

### Add snippet using a block

To add the widget’s code to your theme without directly editing the theme code, you can use a dedicated theme block or section designed for code snippets, such as:

* **Custom content**
* **Custom HTML**
* **Custom Liquid**

*<mark style="background-color:yellow;">The exact naming depends on the specific theme.</mark>*

Add this block to your theme, paste the copied code snippet into it, and save your changes.

Here’s how it looks in Shopify’s vintage theme, **Debut**:

<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%2F5C3GXUXTE8FmDvTA1ZST%2FDebut.webp?alt=media&#x26;token=532ad366-6c80-4ce2-ac3a-f57608c90479" alt=""><figcaption></figcaption></figure></div>

{% hint style="success" %}
[**Learn how to add custom content in Shopify**](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend#add-custom-html-or-liquid)
{% endhint %}

### Add snippet to the theme code

{% hint style="danger" %}
**Adding widgets directly to the theme code is not covered by the app’s support.** Each theme’s code is unique, so there’s no universal guideline for inserting code snippets into the theme code.
{% endhint %}

Here are the **general recommendations** for adding the widget’s snippet to the theme code:

1. In the theme options, select **Edit theme code.**
2. Search for the name of the desired section or block and find the corresponding **`liquid`** file.
3. Open the file in the code editor window and place the snippet where you want it to appear in the section’s **HTML layout**.

{% hint style="info" %}
*Note: when you add a timer widget’s code snippet to a section’s code, it appears in all instances of that section across your theme.*
{% endhint %}

Once you’ve added the snippet to your theme code, you can open the widget editor in the app admin (one browser tab) alongside the relevant section in the theme editor (another browser tab).

This way, you can make changes to the widget’s appearance (size, width, paddings, fonts, etc.), save your changes, and then **refresh the theme editor to see the widget updates in real time**.

<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%2F3897v7BAC9koz7TAizuh%2Fedit_code_(1).webp?alt=media&#x26;token=cce215d5-3ba4-472b-bd5c-de6ed1779752" alt=""><figcaption></figcaption></figure></div>

Using the method above, you can integrate the widget with your theme. For additional adjustments, you may also need to[ **add custom CSS**](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css) to the theme editor.

{% hint style="success" %}
[**Learn how to edit theme code in Shopify**](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code)
{% endhint %}