Shopify: Use Native Content Cards

Integrate Shopify's native content card templates with Relewise so that blog articles and pages rendered by search or recommendation widgets match your theme styling.

What is the difference between blog articles and pages?

Relewise can surface Shopify articles (for example, blog posts) or pages (such as About or Contact). The Relewise UI app embed provides separate fields for article and page template names, so you can supply either or both depending on what you want to recommend.

Step 1: Create a New Article or Page Template

1. Go to Online Store -> Themes in your Shopify admin.
2. Click Actions -> Edit Code and right-click on the Templates folder.
3. Click New File...
4. Shopify requires the template file name to start with the resource type. For example, use article.relewise-article-card.liquid for blogs or page.relewise-page-card.liquid for pages.

Step 2: Reference the Native Content Card

In the newly created template file, render Shopify's native content card snippet and include the styling resources needed for your theme. Add {%- layout none -%} to keep the output limited to the card markup.

Example: Dawn Article Card Template

{%- layout none -%}

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

<div style="width: 100%; height: 100%;">
  {% render 'article-card', blog: blog, article: article, show_image: true, show_date: true, show_excerpt: true %}
</div>

Step 3: Use the Template in Relewise

Open the App Embeds -> Relewise UI section in the Shopify theme editor. Enter the template name in the Article content card template or Page content card template fields—or in both if you intend to recommend each content type.

---

By following these steps, you can align Relewise-powered content recommendations with the native styling of your Shopify theme.