# 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, Inline bar, 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="/files/DHaNtgNDR4nOxqxwuGhF" 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 **Edit theme**.
3. On the top bar of the theme editor, click the **App embeds** icon.
4. Find the app in the list of installed apps.
5. Click the toggle beside the app name 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="/files/Xfs1gLToOeKZWwCXN4he" alt=""><figcaption></figcaption></figure></div>

* or on the top bar of the widget editor

<div data-with-frame="true"><figure><img src="/files/AbQsN8mBFG04azigI92N" 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="/files/Re2mg1zDqZvhyyHxlz0q" 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="/files/Mcfi597XW7AzXSaSfPAU" 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="/files/KF9ZfR4bx20tVZYFY8KU" 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 %}


---

# 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-countdown-timer/add-widgets-with-get-code.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.