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

备注名称

假如您应用Shopify的完全免费模板，您可以联络Shopify适用精英团队得到有关此实例教程的协助。此实例教程必须15分鐘的制定时长。若要掌握详细信息，客户程序Supportforthemes。

备注名称

此自定义用以复古时尚Shopify模板，不适感用以“OnlineStore2.0”模板。

寻找您的模板构架版本号

探寻“OnlineStore2.0”模板自定义

您可以利用编写模板代码来在自定义页面上突出展现产品系列的子集合。本实例教程详细介绍怎样建立新的页面模板，及其怎么使用菜单栏来分派要展现的产品系列。

全部Shopify店铺都是有一个产品系列列表页面（坐落于URLwww.mystore.com/collections），该页面表明店铺中的全部产品系列。做为本实例教程的代替方式，您可以编写产品系列列表页面，以仅表明优选的产品系列一部分。

建立新的页面模板

在Shopify后台管理中，转到在线商店模板。

寻找您要编写的模板，随后点一下实际操作编写代码。

在Templates文件目录中，点一下加上新模板。

为名叫list-collections的页面建立新模板。

提醒：Supply模板附加一个事先搭建的可以用page.list-collections文档。

删掉新page.list-collections文档中的目前代码。寻找下面的模板代码，拷贝该代码并将其黏贴到您的page.list-collections文档中。

点一下储存。

挑选您的模板

此自定义设定的代码因您的模板而异。点一下模板的相匹配按键，随后将代码拷贝并粘帖到您的page.list-collections文档中：

Boundless

Brooklyn

Debut

Minimal

Narrative

Simple

Venture

Boundless的代码

拷贝代码。

liquid{%comment%}Featuringcollectionsonapageusingamenuhttps://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page{%endcomment%}{%-assigngrid_item_width=small--one-halfmedium--one-thirdlarge-up--one-quarter-%}{%-caselinklists[page.handle].links.size-%}{%-when2-%}{%-assigngrid_item_width=medium-up--one-half-%}{%-when3-%}{%-assigngrid_item_width=small--one-halfmedium-up--one-third%}{%-else-%}{%-assigngrid_item_width=small--one-halfmedium--one-thirdlarge-up--one-quarter%}{%-endcase-%}divclass=page-widthpage-containerheaderh1{{page.title}}/h1/headerdivclass=rterte--indented-images{{page.content}}/divdivclass=gridgrid--no-gutterscollection-grid{%-forlinkinlinklists[page.handle].links-%}{%-iflink.type==collection_link-%}{%-assignfeatured=link.object.handle-%}{%-includecollection-grid-item,collection:collections[featured]-%}{%-endif-%}{%-endfor-%}/div/div

将代码黏贴到page.list-collections文档中。

Shopify商家官方网站全文详细信息：

Featureasubsetofcollectionsonapage

Note

IfyouuseafreethemefromShopify,thenyoumightbeabletocontactShopifySupportforhelpwiththistutorial.Itrequires15minutesofdesigntime.Tolearnmore,refertoSupportforthemes.

Note

ThiscustomizationisforvintageShopifythemes,anddoesntapplytoOnlineStore2.0themes.

Findoutyourthemesarchitectureversion

ExploreOnlineStore2.0themecustomizations

Youcanfeatureasubsetofcollectionsonacustompagebyeditingyourthemecode.Thistutorialshowsyouhowtocreateanewpagetemplateandassigncollectionstoshowbyusingamenu.

AllShopifystoreshaveacollectionslistpageattheURLwww.mystore.com/collectionsthatshowsallofthecollectionsinthestore.Asanalternativetothistutorial,youcanedityourcollectionslistpagetoshowonlyaselectionofyourcollections.

Createyournewpagetemplate

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheTemplatesdirectory,clickAddanewtemplate.

Createanewtemplateforpagecalledlist-collections.

Tip

TheSupplythemecomeswithapre-builtpage.list-collectionsfilealreadyavailable.

Deletetheexistingcodeinyournewpage.list-collectionsfile.Findyourthemecodebelowandcopyandpastethecodeinyourpage.list-collectionsfile.

ClickSave.

Selectyourtheme

Thecodeforthiscustomizationvariesdependingonyourtheme.Clickthebuttonforyourthemebeforecopyingandpastingitintoyourpage.list-collectionsfile:

Boundless

Brooklyn

Debut

Minimal

Narrative

Simple

Venture

CodeforBoundless

Copythecode.

liquid{%comment%}Featuringcollectionsonapageusingamenuhttps://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page{%endcomment%}{%-assigngrid_item_width=small--one-halfmedium--one-thirdlarge-up--one-quarter-%}{%-caselinklists[page.handle].links.size-%}{%-when2-%}{%-assigngrid_item_width=medium-up--one-half-%}{%-when3-%}{%-assigngrid_item_width=small--one-halfmedium-up--one-third%}{%-else-%}{%-assigngrid_item_width=small--one-halfmedium--one-thirdlarge-up--one-quarter%}{%-endcase-%}divclass=page-widthpage-containerheaderh1{{page.title}}/h1/headerdivclass=rterte--indented-images{{page.content}}/divdivclass=gridgrid--no-gutterscollection-grid{%-forlinkinlinklists[page.handle].links-%}{%-iflink.type==collection_link-%}{%-assignfeatured=link.object.handle-%}{%-includecollection-grid-item,collection:collections[featured]-%}{%-endif-%}{%-endfor-%}/div/div

Pastethecodeintothepage.list-collectionsfile.

文章由来：Shopify商家官方网网站