在页面上突出展示产品系列的子集

您可以通过编辑模板代码来在自定义页面上突出展示产品系列的子集。本教程介绍如何创建新的页面模板，以及如何使用菜单来分配要展示的产品系列。

所有 Shopify 商店都有一个产品系列列表页面（位于 URL www.mystore.com/collections），该页面显示商店中的所有产品系列。作为本教程的替代方法，您可以编辑产品系列列表页面，以仅显示精选的产品系列部分。

创建新的页面模板

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到您要编辑的模板，然后点击操作 > 编辑代码。

3. 在 Templates 目录中，点击添加新模板。

4. 为名为 list-collections 的页面创建新模板。

提示：Supply 模板附带一个预先构建的可用 page.list-collections 文件。

1. 删除新 page.list-collections 文件中的现有代码。找到下方的模板代码，复制该代码并将其粘贴到您的 page.list-collections 文件中。

2. 点击保存。

选择您的模板

此自定义设置的代码因您的模板而异。点击模板的对应按钮，然后将代码复制并粘贴到您的 page.list-collections 文件中：

• Boundless

•  

• Brooklyn

•  

• Debut

•  

• Minimal

•  

• Narrative

•  

• Simple

•  

• Venture

Boundless 的代码

1. 复制代码。

liquid {% comment %}  Featuring collections on a page using a menu  https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page {% endcomment %} {%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' -%} {%- case linklists[page.handle].links.size -%} {%- when 2 -%}  {%- assign grid_item_width = 'medium-up--one-half' -%} {%- when 3 -%}  {%- assign grid_item_width = 'small--one-half medium-up--one-third' %} {%- else -%}  {%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' %} {%- endcase -%} <div class="page-width page-container">   <header>     <h1>{{ page.title }}</h1>   </header>   <div class="rte rte--indented-images">     {{ page.content }}   </div>   <div class="grid grid--no-gutters collection-grid">     {%- for link in linklists[page.handle].links -%}       {%- if link.type == 'collection_link' -%}         {%- assign featured = link.object.handle -%}         {%- include 'collection-grid-item', collection: collections[featured] -%}       {%- endif -%}     {%- endfor -%}   </div> </div>

1. 将代码粘贴到 page.list-collections 文件中。

Shopify商户官网原文详情：

Feature a subset of collections on a page

You can feature a subset of collections on a custom page by editing your theme code. This tutorial shows you how to create a new page template and assign collections to show by using a menu.

All Shopify stores have a collections list page at the URL www.mystore.com/collections that shows all of the collections in the store. As an alternative to this tutorial, you can edit your collections list page to show only a selection of your collections.

Create your new page template

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Templates directory, click Add a new template.

4. Create a new template for page called list-collections.

1. Delete the existing code in your new page.list-collections file. Find your theme code below and copy and paste the code in your page.list-collections file.

2. Click Save.

Select your theme

The code for this customization varies depending on your theme. Click the button for your theme before copying and pasting it into your page.list-collections file:

• Boundless

•  

• Brooklyn

•  

• Debut

•  

• Minimal

•  

• Narrative

•  

• Simple

•  

• Venture

Code for Boundless

1. Copy the code.

liquid {% comment %}  Featuring collections on a page using a menu  https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page {% endcomment %} {%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' -%} {%- case linklists[page.handle].links.size -%} {%- when 2 -%}  {%- assign grid_item_width = 'medium-up--one-half' -%} {%- when 3 -%}  {%- assign grid_item_width = 'small--one-half medium-up--one-third' %} {%- else -%}  {%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' %} {%- endcase -%} <div class="page-width page-container">   <header>     <h1>{{ page.title }}</h1>   </header>   <div class="rte rte--indented-images">     {{ page.content }}   </div>   <div class="grid grid--no-gutters collection-grid">     {%- for link in linklists[page.handle].links -%}       {%- if link.type == 'collection_link' -%}         {%- assign featured = link.object.handle -%}         {%- include 'collection-grid-item', collection: collections[featured] -%}       {%- endif -%}     {%- endfor -%}   </div> </div>

1. Paste the code into the page.list-collections file.

文章内容来源：Shopify商户官方网站

（本文内容根据网络资料整理和来自用户投稿，出于传递更多信息之目的，不代表本站其观点和立场。本站不具备任何原创保护和所有权，也不对其真实性、可靠性承担任何法律责任，特此声明！）

常见问答(FQAS)

你可以通过以下几种方法来在Shopify页面上突出显示产品系列的一个子集:

你需要登录到你的Shopify管理面板,找到产品列表设置。在这里你可以选择要突出显示的产品子集,并设置其样式,例如颜色、大小等来加强视觉区分效果。

当你设置某个产品子集为突出显示状态时,其他未选择的产品将保持原来的样式和展示方式。但相比突出显示产品,它们可能会显得比突出显示产品略逊一筑。

产品子集突出显示设置对移动端的产品列表也同样生效。所以在手机或平板上浏览你的Shopify店铺时,突出显示的产品子集也将使用你设置的样式权重较高地展现出来。