> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.zoorix.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use the Scroll To Element CSS Selector feature in Zoorix?


### Hello and Welcome! 😊

Looking to enhance your store's user experience with smooth scrolling? The **Scroll To Element CSS Selector** feature in Zoorix makes it easy!

###### What is this feature?

| The Scroll To Element CSS Selector allows you to automatically scroll to a specific element when the sticky bar is clicked. This ensures that customers are directed to an important section of your store, such as the Add to Cart button or a product description.
| Please note that this feature is available exclusively on our premium plan. To enable it on your store, you'll need to subscribe to the premium plan. If you need guidance on how to subscribe, you can follow this [tutorial](/en/article/how-to-subscribe-to-the-premium-plan-of-the-zoorix-sticky-atc-app-19prt80/).

Now that we’ve defined this feature, let’s get started!

||| Check out this video for more detailed steps. --> [How to use the Scroll To Element CSS Selector feature in Zoorix?](https://www.loom.com/share/50c712db29b74406a29cab25fad3903b?sid=d8e3f08c-20fb-416a-a0fe-419e77127f48)

|| 1. From the app's dashboard, go to the settings tab.

![](https://storage.crisp.chat/users/helpdesk/website/544025b2abd67c00/1_1un8s6c.jpg)
|| 2. Scroll down until you see the **Selector settings**.

![](https://storage.crisp.chat/users/helpdesk/website/544025b2abd67c00/1_kc0jx0.jpg)
| In this tutorial, we will use the **Product Title section** as an example. When a customer clicks the sticky bar, we want the page to automatically scroll to this section. The next step is to find its CSS Selector, which we will use to enable the scrolling function.

|| 3. Right-click on your store’s Add to Cart button and select **Inspect** (if you're using Google Chrome).

![](https://storage.crisp.chat/users/helpdesk/website/544025b2abd67c00/2_rsrzk0.jpg)
|| 4. In the developer tools panel, locate the class or ID assigned to the button.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/4/4/0/544025b2abd67c00/screenshot-2025-03-20-at-12433_1gav5e6.png)

| If the button has a class (e.g., `<button class="add-to-cart">`), use `.add-to-cart` as the CSS selector. If it doesn’t have a class but has an ID (e.g., `<button id="ProductSubmitButton">`), use `#ProductSubmitButton` instead.

|| 5. Since the example includes a button with a class, we will use **".product-form__submit"** as our selector. Next, simply enter this into the **Scroll To Element CSS Selector** field.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/4/4/0/544025b2abd67c00/screenshot-2025-03-20-at-12504_1gaskz6.png)
And we're done! Don't forget to hit **SAVE** to apply your changes!  

If you have any questions or require assistance, don't hesitate to reach out to us at [support@zoorix.com](mailto:support@zoorix.com) ✉️.