Shopify: Use Native Product Cards

This guide explains how to integrate Shopify's native product card template with Relewise for seamless search and recommendation functionality.

Why Use Native Product Cards?

Using native Shopify product cards ensures your product display aligns with your Shopify theme while leveraging Relewise's powerful personalization and analytics capabilities.

Step 1: Create a New Template

To use native product cards, start by creating a new template in your Shopify theme:

1. Go to Online Store -> Themes in your Shopify admin.
2. Click Actions -> Edit Code.
3. Under the Templates section, click Add a new template.
4. Choose Product as the template type, select Liquid, and provide a name for the template.
   Note: The template name is important, as you will configure the app to use it later.

Step 2: Reference the Native Product Card

In the newly created template file, reference Shopify's native product card and include any necessary styling. Below is an example for the Dawn theme.

Make sure to include {%- layout none -%} to omit extraneous template data and keep it to the product card markup only.

{%- layout none -%}

<!-- include styling needed for your product cards here -->
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'base.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

<div style="width: 100%; height: 100%;">
  {% render 'card-product', card_product: product %}
</div>

Step 3: Configure the App to Use the Template

Next, configure the Relewise app to use the newly created template:

1. Open your Shopify theme editor and navigate to App Embeds -> Relewise UI.
2. Enter the name of the template you created in the Custom Product Card field.

Once configured, the search results and recommended products will render using the native product card defined in your template.

Search Overlay Product Cards

You can also define a custom product card for rendering product results in the Search Overlay. You can reuse the template from the previous example or create a new one.

To reuse the same template:

1. Ensure the Search Overlay is enabled in the Relewise app.
2. Provide the name of the template in the Custom Search Overlay Product Card field.

This will apply the custom product card to the Search Overlay results.

---

By following these steps, you can seamlessly integrate Shopify's native product cards with Relewise, ensuring a consistent and personalized user experience across your store.