Embedding On-site Modules on Your Store

Yotpo Modules are a way to display your Loyalty & Referral data on your website. After completing the setup of your Modules, use this guide to embed them on your site. See an Overview of Modules & Rewards Page Builder Sections.

Before you start

Before you begin publishing your Modules you need to:

• Finish the design of the Modules you need for your program. See a list of Modules.
• Set up a dedicated rewards page on your site. See how to create a new rewards page on Shopify.

Publishing modules on Shopify

Some brands prefer to develop in a test environment that is not live on their site. If you prefer to do that, embed the code in your test environment first, and when you’re ready you can embed the code to your live theme. To embed a Module on your site, do the following:

1. In your Yotpo Loyalty & Referrals main menu, go to Display On-site and choose the relevant module type.
2. Click Edit on the one you want to publish.
3. Click the Publish button.
4. Copy the code snippet and embed it in your site code wherever you want it to appear. You only need to embed this code once, per location you want it to appear.
5. Click Publish changes to activate your Module. See more about activating/deactivating modules.

Publishing modules on Adobe Commerce 2, SFCC & BigCommerce

Some brands prefer to develop in a test environment that is not live on their site. If you prefer to do that, embed the code in your test environment first, and when you’re ready you can embed the code to your live site.To embed a Module on your site, do the following:

1. Log in to your Loyalty admin
2. Click On-site Modules and the relevant module type.
3. Click Edit on the one you want to publish.
4. Click the Publish button.
   
5. If you haven’t already done so, copy & paste the first snippet to your site code, on the page you want your module to appear. (You only need to do this once and it will serve all your modules on that page)
6. Embed the second snippet on the page you want your module to appear. You only need to embed this code once, per location you want it to appear.
7. Click Publish changes to activate your Module. 

Activating/Deactivating modules

Active

If your Module is active, a green dot is displayed. This means that any changes you publish will be reflected on your store anywhere the Module's code is embedded. The Module will only display on your site if you have embedded the code and it is active. To activate your Module, click the stack menu and click "Activate."

Inactive

If your Module is inactive, a yellow dot will be displayed. This means that any changes you publish/save will not be reflected in your store. This also means if you have the Module code embedded and active on your store before, it will become invisible. To Deactivate your Module, click the stack menu and click "Deactivate" on the Module instance you wish to deactivate/hide from your site.