05. Displaying Your Widgets on the Storefront

In a previous section, we learned how to create a zone. Here, we will guide you through the process of adding that zone to your storefront. This final step is what allows your customized widget to be displayed to customers on your live store.

Navigate to: https://dashboard.dynamatics.app/zones

To add the zone, simply double-click on your desired zone in the list. This action will automatically copy the Zone ID to your clipboard. You will need this ID to complete the integration on your storefront.

---

Activating the Dynamatic App Embed

From your theme editor, you need to turn on the Dynamatic App Embed to ensure your widget appears live on your storefront.

1. Navigate to App Embeds: In your theme editor, go to App embeds.

2. Find Dynamatic App: Search for "Dynamatic App" in the app embeds list.

3. Turn it On: Turn on the toggle switch next to the Dynamatic App.

Note: It is absolutely required to turn on this switch to have the associated widget linked to the zone in your Dynamatic dashboard for it to be displayed on your storefront. 

Now, from the theme editor, move to the Sections area and find the desired place where you want to have the widget displayed. This is where you will add the zone code that links to your Dynamatic widget.

Click on Add Block and search for Dynamatic App Zone from Apps and add it to the block

 

Upon adding the Dynamatic Zone to that specific block, you will be able to see our app there. Click on the zone to add or edit the zone.

 

After following these steps and adding your desired zone to the appropriate section in your theme editor, your widget should be visible live on your storefront.