How to use the Toggle Element CSS Selector feature in Zoorix?

Welcome!

If you want to know how to use the Toggle Element CSS Selector feature in Zoorix, you've come to the right place!

What is this feature?

The Toggle Element CSS Selector allows you to show or hide the sticky bar based on a specific element’s visibility on your store. This means that when the selected element is visible, the sticky bar will hide, and when the element is hidden, the sticky bar will appear.
Please note that this feature is available exclusively on our premium plan. To enable it on your store, you'll need to subscribe on 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 Main Add to Cart button as an example. If this button is visible, we might not want to show the sticky bar. The next step is to find its CSS Selector, which we will use to toggle the sticky bar’s visibility.

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 Toggle 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 Toggle 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: 19/02/2025