How to use Zoorix with GemPages? 📄
Hello! 😁
If you are using GemPages, installing Zoorix is a bit different than installing it on a classic theme.
So let's see how to do it! 🚀
Start by installing GemPages by clicking here
Now you can add custom html using the page builder editor - you can see how to do it here
Then add the relevant snippets below:
In case you'd like to place the widget in the middle of the product page (usually below the add to cart button) use the following snippet:
To place the widget in the bottom of the product page, using the following snippet:
To place the widget on the top of a full cart page, use the following snippet:
To place the widget on the bottom of a full cart page, use the following snippet:
Lastly, go back to the app, navigate to the Settings tab -> General on the left menu, and delete the CSS selectors on the product page (see the below screenshot)

That's it! 🥳
If you need further assistance, don't hesitate to contact us at support@zoorix.com, we will be more than happy to help! 🤗
Cheers 🙌
If you are using GemPages, installing Zoorix is a bit different than installing it on a classic theme.
So let's see how to do it! 🚀
Start by installing GemPages by clicking here
Now you can add custom html using the page builder editor - you can see how to do it here
Then add the relevant snippets below:
In case you'd like to place the widget in the middle of the product page (usually below the add to cart button) use the following snippet:
<div data-location="main" data-product-id="{{ product.id }}">
<span zoorix-widget="all"></span>
</div>
To place the widget in the bottom of the product page, using the following snippet:
<div data-location="bottom" data-product-id="{{ product.id }}">
<span zoorix-widget="all"></span>
</div>
To place the widget on the top of a full cart page, use the following snippet:
<div data-page="cart" data-location="top">
<span zoorix-widget="all"></span>
</div>
To place the widget on the bottom of a full cart page, use the following snippet:
<div data-page="cart" data-location="bottom">
<span zoorix-widget="all"></span>
</div>
Lastly, go back to the app, navigate to the Settings tab -> General on the left menu, and delete the CSS selectors on the product page (see the below screenshot)

That's it! 🥳
If you need further assistance, don't hesitate to contact us at support@zoorix.com, we will be more than happy to help! 🤗
Cheers 🙌
Updated on: 02/09/2022
Thank you!