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

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

所有 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商户官方网站