专注出海运营平台,解决跨境电商问题
当前位置:跨境智通山 > 其他跨境 > 正文

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

2022-03-10 20:55:13 其他跨境

shopify子集步骤的核心内容显示在页面上

如果您使用,请在页面上突出显示产品系列的子集注释Shopify 免费模板,您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support

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

shopify突出页面上显示产品系列子集步骤的文本

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

备注

如果您使用Shopify 免费模板,您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support for themes。

备注

本定义用于复古 Shopify 模板不适用于 模板Online Store 2.0”模板。

找到你的模板架构版本

探索“Online Store 2.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-container"><header><h1>{{page.title}}</h1></header><divclass="rterte--indented-images">{{page.content}}</div><divclass="gridgrid--no-gutterscollection-grid">{%-forlinkinlinklists[page.handle].links-%}{%-iflink.type=='collection_link'-%}{%-assignfeatured=link.object.handle-%}{%-include'collection-grid-item',collection:collections[featured]-%}{%-endif-%}{%-endfor-%}</div></div>

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

Shopify商户官网原文详情:

Feature a subset of collections on a page

Note

If you use afree 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 toSupport 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 URLwww.mystore.com/collectionsthat shows all of the collections in the store. As an alternative to this tutorial,you canedit your collections list pageto show only a selection of your collections.

Create your new page template

From your Shopify admin,go toOnline Store > Themes.

Find the theme you want to edit,and then clickActions > Edit code.

In theTemplatesdirectory,clickAdd a new template.

Create a new template forpagecalledlist-collections.

Tip

The Supply theme comes with a pre-builtpage.list-collectionsfile already available.

Delete the existing code in your newpage.list-collectionsfile. Find your theme code below and copy and paste the code in yourpage.list-collectionsfile.

ClickSave.

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 yourpage.list-collectionsfile:

Boundless

Brooklyn

Debut

Minimal

Narrative

Simple

Venture

Code for Boundless

Copy the code.

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-container"><header><h1>{{page.title}}</h1></header><divclass="rterte--indented-images">{{page.content}}</div><divclass="gridgrid--no-gutterscollection-grid">{%-forlinkinlinklists[page.handle].links-%}{%-iflink.type=='collection_link'-%}{%-assignfeatured=link.object.handle-%}{%-include'collection-grid-item',collection:collections[featured]-%}{%-endif-%}{%-endfor-%}</div></div>

Paste the code into thepage.list-collectionsfile.

文章内容来源:Shopify官家官网