How to Use the "Primary Element CSS Selector" feature in Zoorix?

Hi there! 😊

In this tutorial, I’ll walk you through how to use the Primary Element CSS Selector feature in Zoorix.

What is this feature?

The Primary Element CSS Selector allows you to link the sticky bar to a specific element on your store. This means that when a customer clicks the sticky bar, it will automatically trigger that button.

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. The next step is to find its CSS Selector, which we will use to link the sticky bar to the button.

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 step is to simply enter this into the Primary Element CSS Selector.


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

You may also check this video tutorial! --> How to Use the "Primary 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