Shopify产品页面链接其他产品

实际效果请看（密码123）： https://shopify.ningxiabohe.com/products/5-panel-hat

进入Shopify后台-左下角设置

添加2个产品自定义数据

添加定义

单行文本product_link_name（可自行定义名称）,一个值

产品product_link（可自行定义名称）,值列表

加好后，可以看到这2个产品元字段

然后编辑一个产品，可以添加需要在这个产品页面链接的产品和这个产品列表的名称。

当然，你也可以设置属性，如颜色，尺寸，材质等等，实现1个产品1个页面，不同产品不同描述。

进入在线商店-模板-自定义

选择产品页面模板

在产品信息多属性选择器上面添加自定义liquid代码

<div>
  {% if product.metafields.custom.product_link_name != blank and product.metafields.custom.product_link != blank %}
   {% assign name = product.metafields.custom.product_link_name %}
  
  <div class = "name">{{ name }}</div>
  {% assign related_products = product.metafields.custom.product_link.value %}

<div class = "related-product-list">
      {% for related_product in related_products %}
       <a href = "{{shop.url | append: "/products/" | append: related_product.handle }}">
        <div class = "related-product">
         <div class = "related-product-image">
           <img src = "{{related_product.featured_image | img_url: 'medium' }}" alt="{{related_product.title}}" title="{{related_product.title}}"/>
          </div>
     
        </div>
       </a>
      {% endfor %}
     </div>
    {% endif %}
</div>

<style>
.related-product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.related-product {
  text-align: center;
}

.related-product .related-product-image img {
  max-width: 100%;
  height: auto;
}
</style>