🔗 How to Get a Section ID (for Scroll-to-Section Feature)

Some blocks and sections in OT: Theme Sections (such as Button, Promo Banner, Call-to-Action, etc.) allow you to create smooth scrolling navigation on your storefront. This means when a visitor clicks a button, the page will automatically scroll to another section — for example, from a banner to a featured product.

To make this work, you need to enter the target section’s ID in the “Section ID” field.

1. How to Find the Section ID

Follow these steps to get the section ID in your Shopify Theme Editor:

1. Open your Shopify Admin → Online Store → Customize.

2. Press F12 to open the developer tools (or "page source code"), then use the "Elements" or "Inspector" tool to select and inspect the target section.

3. In the Elements panel, look for the main <section> element of your target section. You will find the id attribute, which will look like this:

The text within the quotation marks after id= is the section ID. In this example, the section ID is shopify-section-template--19653752029416__otsb_image_carousel_1_drw8ca.

2. How to Use the Section ID

Once you have the ID, go back to the section or block where you want to create the scroll action (e.g., a Button block).

In the link field, enter a hash sign (#) immediately followed by your section ID:

#shopify-section-template--19653752029416__otsb_image_carousel_1_drw8ca

Remember to save your changes. Now, when customers click that button, the page will automatically scroll to the target section.

3. Notes

Each section on your page has a unique section ID.
You can use this same process for any section with the “scroll to section” option.
Make sure to include the “#” before the section ID (e.g., #section-id).