Shopify产品页面链接其他产品
实际效果请看(密码123): https://shopify.ningxiabohe.com/products/5-panel-hat
![](https://www.ningxiabohe.com/wp-content/uploads/image-193-1024x612.png)
进入Shopify后台-左下角设置
![](https://www.ningxiabohe.com/wp-content/uploads/image-201-434x1024.png)
添加2个产品自定义数据
![](https://www.ningxiabohe.com/wp-content/uploads/image-196-1024x759.png)
添加定义
![](https://www.ningxiabohe.com/wp-content/uploads/image-197-1024x190.png)
单行文本product_link_name(可自行定义名称),一个值
![](https://www.ningxiabohe.com/wp-content/uploads/product_link_name-1024x900.png)
产品product_link(可自行定义名称),值列表
![](https://www.ningxiabohe.com/wp-content/uploads/product_link-1024x900.png)
加好后,可以看到这2个产品元字段
![](https://www.ningxiabohe.com/wp-content/uploads/image-195-1024x779.png)
然后编辑一个产品,可以添加需要在这个产品页面链接的产品和这个产品列表的名称。
当然,你也可以设置属性,如颜色,尺寸,材质等等,实现1个产品1个页面,不同产品不同描述。
![](https://www.ningxiabohe.com/wp-content/uploads/image-200-1024x749.png)
进入在线商店-模板-自定义
![](https://www.ningxiabohe.com/wp-content/uploads/image-199-1024x410.png)
选择产品页面模板
![](https://www.ningxiabohe.com/wp-content/uploads/image-198-1024x345.png)
在产品信息多属性选择器上面添加自定义liquid代码
![](https://www.ningxiabohe.com/wp-content/uploads/image-194-1024x492.png)
<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>