# Add Widgets to Theme

{% hint style="warning" %}
 This guide **doesn’t apply to a Bar** timer. Learn how to add it in a [**separate guide**](https://getsitecontrol.gitbook.io/gsc-countdown-timer/add-bar-to-theme).
{% endhint %}

Place the **Timer widgets** wherever your theme allows for inserting app blocks. You can rearrange, hide, or remove app blocks in the same way as any other blocks in your theme. Note that app blocks can only be used with [Online Store 2.0](https://help.shopify.com/en/manual/online-store/themes/managing-themes/versions) themes. [Learn about app blocks in Shopify.](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps#app-blocks)

### Activate the app in a theme

{% hint style="info" %}
**To ensure the widgets display correctly, you first 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.

### Add the widget to a theme section

{% hint style="warning" %}
Some of your theme sections might not support app blocks. Refer to your theme’s documentation or contact a theme developer to learn which sections support app blocks.
{% endhint %}

1. Open the relevant page (the widget is best used on product pages).
2. Choose a section. If it supports app blocks, they will appear in the block picker.
3. Add the **Timer Widget** app block through `Add block > Apps` as shown below.

<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%2FFRKKjJTIDy8EU4SWuBMW%2FAdd_timer_widgets_to_theme.webp?alt=media&#x26;token=bf802121-d6a2-4b8a-a057-ee91211a636b" alt=""><figcaption></figcaption></figure></div>

4. Copy the **Widget ID** from the app admin and paste it into the Widget ID field of the app block.

<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%2FBBgUGYUH8VnQjNUH4ju3%2FIDFrame_3_(4).webp?alt=media&#x26;token=30922c87-cc7a-4143-9473-d40f297af44d" alt=""><figcaption></figcaption></figure></div>

### Add the widget to a page

1. Open the relevant page.
2. Add the **Timer Widget** app block through `Add section > Apps` as shown below.

<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%2FGJRjDUCSYqjCmfg2o1dC%2FAdd_timer_widget_to_section.webp?alt=media&#x26;token=9a468611-4c86-48a6-bc8f-8e9fa2efbf50" alt=""><figcaption></figcaption></figure></div>

3. Copy the **Widget ID** from the app admin and paste it into the Widget ID field of the app block.

<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%2FBBgUGYUH8VnQjNUH4ju3%2FIDFrame_3_(4).webp?alt=media&#x26;token=30922c87-cc7a-4143-9473-d40f297af44d" alt=""><figcaption></figcaption></figure></div>


---

# 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-to-theme.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.