# Add widget to theme

To use **GSC Button Widgets**, you need to first activate the app in the theme. Then you can place the widget 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. [**Learn how to manage 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

Hit **Activate** in the app admin notification to quickly access the **GSC Button 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://1296031987-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzYnABdfTRFQPtsDKyCfZ%2Fuploads%2FFcJV7k2MSvuQllu7K3aX%2Fhttps___files.gitbook.com_v0_b_gitbook-x-prod.appspot.com_o_spaces2Fuploads2Fimage_4166.png?alt=media&#x26;token=7380af4c-528c-4d3d-84b1-ef093febcc8e" 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 Button Widgets** in the list of installed apps.
5. Click the toggle beside **GSC Button 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 **GSC Button Widget** app block through `Add block > Apps` as shown below.

<div data-with-frame="true"><figure><img src="https://1296031987-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzYnABdfTRFQPtsDKyCfZ%2Fuploads%2Fs0asfilrDDzxGNVqB7US%2Fas%20block.png?alt=media&#x26;token=7292a7e6-6326-4df6-8049-b6e2f3bcf51c" 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://1296031987-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzYnABdfTRFQPtsDKyCfZ%2Fuploads%2FbCHFhK1b0BjyFOSNJEJw%2Fwidget%20id.png?alt=media&#x26;token=9ade4b33-2540-4fe3-897b-f6490742e291" alt=""><figcaption></figcaption></figure></div>

### Add the widget to a page

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

<div data-with-frame="true"><figure><img src="https://1296031987-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzYnABdfTRFQPtsDKyCfZ%2Fuploads%2FzAlVNFWYbHYU1IiQnilK%2Fas%20section.png?alt=media&#x26;token=28c79fec-9b5b-4da1-a3dd-c1952218af83" 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://1296031987-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzYnABdfTRFQPtsDKyCfZ%2Fuploads%2FbCHFhK1b0BjyFOSNJEJw%2Fwidget%20id.png?alt=media&#x26;token=9ade4b33-2540-4fe3-897b-f6490742e291" alt=""><figcaption></figcaption></figure></div>