在页面上突出展示产品系列的子集备注如果您使用Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅Support

目录

• 答案
• 文章目录
• shopify在页面上突出展示产品系列的子集步骤详细回答

shopify在页面上突出展示产品系列的子集步骤详细回答

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

备注

如果您使用 Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅 Support for themes。

备注

此自定义用于复古 Shopify 模板，不适用于“Online Store 2.0”模板。

• 找到您的模板架构版本

• 探索“Online Store 2.0”模板自定义

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

所有 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

Note

If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version

• Explore Online Store 2.0 theme customizations

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.

Tip

The Supply theme comes with a pre-built page.list-collections file already available.

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