Articles on: ๐Ÿ›’ Sticky Add To Cart

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.

Now that weโ€™ve defined this feature, letโ€™s get started!

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


2. Scroll down until you see the Selector settings.


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).


4. In the developer tools panel, locate the class or ID assigned to the button.



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.


And we're done! Don't forget to hit SAVE to apply your changes!

You may also check this video tutorial! --> How to use the Scroll To Element CSS Selector feature in Zoorix?

If you have any questions or require assistance, don't hesitate to reach out to us at support@zoorix.com โœ‰๏ธ.

Updated on: 20/03/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!