Shopify App: Activating UI Components

Now that the integration has been set up to pull product data from your shop, it is time to activate the components that allow you to perform personalized search and recommendations. To do so, enable the Relewise UI Components app embed in your theme.

Supported Storefront Capabilities

The app embed can power the following storefront capabilities:

Service	Capability
Behavioral Tracking	Cart Product View Product Category View Content View	[Settings Preview]
Search	Product Search Search Term Prediction Search Collection	[Settings Preview]
Product Recommendations	Purchased with Product Purchased with Multiple Products Products Viewed After Viewing Product Products Viewed After Viewing Content Popular Products Recently Viewed Products Personal Products	[Settings Preview]
Content Recommendations	Contents Viewed After Viewing Content Contents Viewed After Viewing Product Contents Viewed After Viewing Multiple Products Popular Contents Personal Contents	[Settings Preview]

Activate the UI Components by navigating to Online Store -> Themes, and click the Customize button.

Navigate to the App Embeds setting, and activate the Relewise UI Components. Then, open the App to configure it.

Component DOM and Styling Settings

The Relewise UI Components app embed includes settings for how Relewise Web Components render in your theme:

• Component DOM mode: Choose whether components render with Shadow DOM or Light DOM. Shadow DOM is the default and keeps the component internals isolated. Light DOM renders the component internals directly into the page, so normal Shopify theme CSS and third-party scripts can query and modify them.
• Component styling: Choose whether Relewise injects its default Light DOM stylesheet. This setting only applies when Component DOM mode is set to Light DOM; Shadow DOM components keep their scoped styling.

Use Light DOM when a Shopify theme script or app needs access to rendered Relewise internals, such as wishlist apps that need to attach controls to Product cards.

Keep Component styling set to Default if you want Relewise to provide the baseline layout and component styling. Choose None only when your theme CSS will fully style the rendered component markup.

Once the embed is enabled, continue with the relevant storefront features you want to use, such as Search, Recommendations, Behavioral Tracking, or User Engagement.