如何在Foundry主题商品页面添加Related products相关产品选项

前置准备 #

操作前请备份当前Foundry主题的完整代码，同时导出店铺产品数据，避免修改出错导致页面异常。 #

实现步骤 #

1. 创建相关产品代码片段

• 进入Shopify后台，依次点击「在线商店」-「主题」，找到你正在使用的Foundry主题，点击「操作」-「编辑代码」
• 在左侧文件列表的「Snippets（片段）」目录上右键，选择「添加新片段」，命名为related-products，将以下代码粘贴到编辑框后保存：

{% comment %} 按同分类调取相关产品，如需按标签匹配可替换第一行调取规则 {% endcomment %}
{% assign related_products = product.collections.first.products | where: 'available', true | exclude: product.id | limit: 4 %}
{% if related_products.size > 0 %}
<div class="related-products-section">
  <h2>相似推荐</h2>
  <div class="product-grid">
    {% for related_product in related_products %}
    <div class="product-card">
      <a href="{{ related_product.url }}">
        <img src="{{ related_product.featured_image | img_url: '300x300' }}" alt="{{ related_product.title }}">
        <h3>{{ related_product.title }}</h3>
        <p class="price">{{ related_product.price | money }}</p>
      </a>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

2. 嵌入商品详情页模板

• 在左侧文件列表的「Templates（模板）」目录中，找到商品详情页模板，一般为product.liquid或者section/product-template.liquid
• 定位到你想要展示相关产品的位置，常见放置位置为商品详情介绍下方、用户评价模块上方，插入以下调用代码后保存：
  {% render 'related-products' %}

3. 适配主题样式

• 在左侧文件列表的「Assets（资源）」目录中，找到主题的主CSS文件，一般命名为theme.css、base.css或custom.css
• 在CSS文件末尾添加以下样式代码，让相关产品模块的展示风格和Foundry主题原有设计统一：

.related-products-section {
  margin: 60px 0;
  padding: 0 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.related-products-section h2 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 32px;
  color: var(--color-text-heading);
}
.related-products-section .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.related-products-section .product-card {
  text-align: center;
}
.related-products-section .product-card img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-product-card);
  margin-bottom: 12px;
}
.related-products-section .product-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--color-text-body);
}
.related-products-section .product-card .price {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-price);
}

自定义调整说明 #

• 若要按产品标签匹配相关产品，将片段代码第一行的调取规则替换为：
  {% assign related_products = collections.all.products | where: 'tags', product.tags.first | where: 'available', true | exclude: product.id | limit: 4 %}
• 若要调整展示的相关产品数量，修改代码中limit后的数字即可
• 若要修改模块标题，直接替换代码中<h2>相似推荐</h2>的文字内容即可

内容的提问来源于stack exchange，提问作者Bri