Skip to content

快速抵达同分类下 上一产品/ 下一产品

1. 创建 Snippet: next-prev.liquid

<style>
@media screen and (max-width: 768px) {
.nav-np {
display: none;
}
}
.nav-np {
font-size: 17px;
position: absolute;
right: 0;
top: -20px;
}
.nav-np a {
color: #000;
text-decoration: none;
}
.nav-np a:hover {
color: #0a0acb;
}
</style>


<div class="nav-np">
{% if collection.previous_product %}
{{ '&lt; Previous product' | link_to: collection.previous_product.url, collection.previous_product.title }}
{% endif %}
{% if collection.previous_product and collection.next_product %}
<span style="color: #fdcc0d;">|</span>
{% endif %}
{% if collection.next_product %}
{{ 'Next product &gt;' | link_to: collection.next_product.url, collection.next_product.title }}
{% endif %}
</div>

2. 修改上一个父级元素为相对定位

style="position: relative;"

3. 引用 Snippet (例如标题上方)

{% render 'next-prev' %}

上一篇文稿 Shopify 自动折扣方法(两种链接的使用)
下一篇文稿 Shopify 网速优化