To integrate your products using the Shopify extension, you need to be logged in to Shopify on the Studio. (Link to Shopify login documentation).
Integrate a Widget into a Template
To integrate:
On Shopify :
Add a block to your template and select the JOIN application named Widget or Sticky Widget.
On the tool JOIN :
Create a widget or go to the page of an existing widget.
In the integration tab :
Copy the Alias and CLS configuration fields and fill in the corresponding fields in the block configuration on Shopify. (No CLS configuration needed for the sticky widget).
If the widget shape or size is modified, you will need to adjust the CLS configurations for an optimal experience.
Integrate a Dynamic Widget into a Product Page
To integrate a widget for each product page with a unique integration:
On Shopify :
Add a block to your product page template and select the JOIN application named Product Widget.
On the tool JOIN :
Create a default widget to ensure no empty space appears if no specific widget is configured for a product.
In the Integration tab :
Retrieve the Alias and CLS configuration values, then fill in the Fallback Alias and CLS configuration fields in the Shopify block configuration.
The widget should appear on all pages using this template.
4. To add a specific widget for a product :
Create a widget with the alias matching the product anchor, which you can find at the end of the product page URL.
The shape and size of each widget must be the same to avoid creating CLS on your site.