shopify自定义商店模板创建和预览步骤

2024-01-01 14:01:26
By 萌萌萌萌蛋

创建新模板

某些模板类型可用于使用商店中的资源显示多个页面。这些模板类型包括:

  • 产品系列

  • 产品

  • 博客

  • 博客文章

  • 页面

所有模板都提供每种类型对应的默认模板。如果未显式设置替代模板,资源则会使用此默认模板。

您对模板进行的任何更改都将影响使用该模板的所有页面。如果您想以不同方式显示该类型的某些页面,那么您可以基于模板中已存在的模板来创建新的模板。从现有模板创建新模板会自动在新模板中填充相同的分区,之后您可以对其进行编辑以根据需要删除、添加或隐藏分区,这样做不会影响该类型的其他模板的显示。

步骤:

PC:

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

  2. 找到您要编辑的模板,然后点击自定义

  3. 打开页面顶部的下拉菜单。

  1. 使用下拉菜单选择模板。点击 + 创建模板

  2. 为模板提供唯一的名称。

  3. 使用下拉菜单,选择要使用哪个现有模板来作新模板的生成基础。

  4. 点击创建模板

苹果系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理模板

  4. 找到您要编辑的模板,然后轻触自定义

  5. 轻触模板

  1. 使用下拉菜单选择模板。点击 + 创建模板

  2. 为模板提供唯一的名称。

  3. 使用下拉菜单,选择要使用哪个现有模板来作新模板的生成基础。

  4. 点击创建模板

安卓系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理模板

  4. 找到您要编辑的模板,然后轻触自定义

  5. 轻触模板

  1. 使用下拉菜单选择模板。点击 + 创建模板

  2. 为模板提供唯一的名称。

  3. 使用下拉菜单,选择要使用哪个现有模板来作新模板的生成基础。

  4. 点击创建模板

模板预览

通过模板预览,您可以在保存或发布时查看模板会如何向客户显示不同的资源。您可以使用模板预览来预览在应用不同模板时页面或产品的显示方式。

系统在页面或产品级别分配模板。您可以在模板编辑器中创建和编辑模板,但您可以在 Shopify 后台中更改页面或产品的已分配模板。您可以为页面和产品分配多个模板。

预览替代模板

您可以预览在应用不同模板时页面或产品的显示方式。

步骤:

PC:

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

  2. 找到您要编辑的模板,然后点击自定义

  3. 打开页面顶部的下拉菜单。

  1. 使用下拉菜单选择模板。

  2. 在侧边栏中,点击更改

  3. 选择您要使用所选模板来进行预览的产品或页面。

苹果系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理模板

  4. 找到您要编辑的模板,然后轻触自定义

  5. 轻触模板

  1. 使用下拉菜单选择模板。

  2. 在侧边栏中,点击更改

  3. 选择您要使用所选模板来进行预览的产品或页面。

安卓系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理模板

  4. 找到您要编辑的模板,然后轻触自定义

  5. 轻触模板

  1. 使用下拉菜单选择模板。

  2. 在侧边栏中,点击更改

  3. 选择您要使用所选模板来进行预览的产品或页面。

应用新模板

您可以更改为以下内容分配的模板:

  • 页面

  • 产品

  • 产品系列

  • 博客

  • 博客文章

更改分配的模板在 Shopify 后台中完成。分配模板时,可以逐个项目分配,也可以使用“批量操作”为多个项目分配。此操作在模板编辑器之外完成。

步骤:

PC:

  1. 在 Shopify 后台中,转到在线商店 > 页面

  1. 点击商店页面的标题。

  2. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的页面。

  3. 点击保存

苹果系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分中,轻触在线商店

  3. 轻触页面

  1. 点击商店页面的标题。

  2. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的页面。

  3. 点击保存

安卓系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分中,轻触在线商店

  3. 轻触页面

  1. 点击商店页面的标题。

  2. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的页面。

  3. 点击保存

将新模板应用于产品

  1. 在 Shopify 后台中,转到产品

  2. 使用搜索筛选条件找到您要更改的产品,或从现有产品列表中点击该产品。

  3. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的产品。

  4. 点击保存

将新模板应用于产品系列

  1. 在 Shopify 后台中,转到产品 > 产品系列

  2. 使用搜索筛选条件找到要更改的产品系列,或从现有产品系列的列表中点击该产品系列。

  3. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的产品系列。

  4. 点击保存

将新模板应用于博客文章

PC:

  1. 在 Shopify 后台中,转到在线商店 > 博客文章

  1. 使用搜索筛选条件找到您要更改的博客文章,或从现有博客文章的列表中点击该博客文章。

  2. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的博客文章。

  3. 点击保存

苹果系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触博客文章

  1. 使用搜索筛选条件找到您要更改的博客文章,或从现有博客文章的列表中点击该博客文章。

  2. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的博客文章。

  3. 点击保存

安卓系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触博客文章

  1. 使用搜索筛选条件找到您要更改的博客文章,或从现有博客文章的列表中点击该博客文章。

  2. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的博客文章。

  3. 点击保存

向博客应用新模板

PC:

  1. 在 Shopify 后台中,转到在线商店 > 博客文章

  2. 点击 *管理 *

  1. 使用搜索筛选条件找到您要更改的博客,或从现有博客列表中点击该博客。

  2. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的博客。

  3. 点击保存

苹果系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触博客文章

  4. 轻触博客文章旁边的 ... 按钮,然后选择*管理 *

  1. 使用搜索筛选条件找到您要更改的博客,或从现有博客列表中点击该博客。

  2. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的博客。

  3. 点击保存

安卓系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触博客文章

  4. 轻触博客文章旁边的 ? 按钮,然后选择*管理 *

  1. 使用搜索筛选条件找到您要更改的博客,或从现有博客列表中点击该博客。

  2. 在线商店部分中,使用下拉菜单选择新的模板样式以应用于所选的博客。

  3. 点击保存

Shopify商户官网原文详情:

Create a new template

Some template types can be used to display multiple pages using the resources in your store. These template types include:

  • collections

  • products

  • blogs

  • blog posts

  • pages

All themes come with a default template for each type. This default template is what resources use if you don't have an alternate template explicitly set.

Any changes you make to a template will impact all pages that use that template. If you want to display some pages of that type differently, then you can create a new template based on one that already exists in your theme. Creating a new template from an existing template automatically populates your new template with the same sections, which you can then edit to remove, add, or hide sections as needed without impacting the display of other templates of that type.

Steps:

PC:

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

  2. Find the theme that you want to edit, and then click Customize.

  3. Open the drop-down menu at the top of the page.

  1. Use the dropdown menu to select a template. Click + Create template.

  2. Give your template a unique name.

  3. Using the dropdown menu, select which existing template you want to base your new template on.

  4. Click Create template.

iPhone:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Find the theme that you want to edit, and then tap Customize.

  5. Tap Templates.

  1. Use the dropdown menu to select a template. Click + Create template.

  2. Give your template a unique name.

  3. Using the dropdown menu, select which existing template you want to base your new template on.

  4. Click Create template.

Android:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Find the theme that you want to edit, and then tap Customize.

  5. Tap Templates.

  1. Use the dropdown menu to select a template. Click + Create template.

  2. Give your template a unique name.

  3. Using the dropdown menu, select which existing template you want to base your new template on.

  4. Click Create template.

Template previews

Template previews let you see how a template will display different resources to your customers when you save or publish. You can use template previews to preview how your pages or products appear with a different template applied.

Templates are assigned on a page or product level. You create and edit templates in the theme editor, but you change a page or product's assigned template in your Shopify admin. You can have multiple templates for your pages and products.

Preview an alternate template

You can preview how your pages or products appear with a different template applied.

Steps:

PC:

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

  2. Find the theme that you want to edit, and then click Customize.

  3. Open the drop-down menu at the top of the page.

  1. Use the dropdown menu to select a template.

  2. In the sidebar, click Change.

  3. Select the product or page you want to preview with the selected template.

iPhone:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Find the theme that you want to edit, and then tap Customize.

  5. Tap Templates.

  1. Use the dropdown menu to select a template.

  2. In the sidebar, click Change.

  3. Select the product or page you want to preview with the selected template.

Android:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Find the theme that you want to edit, and then tap Customize.

  5. Tap Templates.

  1. Use the dropdown menu to select a template.

  2. In the sidebar, click Change.

  3. Select the product or page you want to preview with the selected template.

Apply a new template

You can change an assigned template for:

  • pages

  • products

  • collections

  • blogs

  • blog posts

Changing an assigned template is done in your Shopify admin. Templates can be assigned on an individual item level, or to multiple items using Bulk Actions. This is done outside the theme editor.

Steps:

PC:

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

  1. Click the title of the store page.

  2. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected page.

  3. Click Save.

iPhone:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Pages.

  1. Click the title of the store page.

  2. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected page.

  3. Click Save.

Android:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Pages.

  1. Click the title of the store page.

  2. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected page.

  3. Click Save.

Apply a new template to a product

  1. From your Shopify admin, go to Products.

  2. Use the search filter to locate the product that you want to change, or click on the product from the list of existing products.

  3. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected product.

  4. Click Save.

Apply a new template to a collection

  1. From your Shopify admin, go to Products > Collections.

  2. Use the search filter to locate the collection that you want to change, or click on the collection from the list of existing collections.

  3. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected collection.

  4. Click Save.

Apply a new template to a blog post

PC:

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

  1. Use the search filter to locate the blog post that you want to change, or click on the product from the list of existing blog posts.

  2. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected blog post.

  3. Click Save.

iPhone:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Blog posts.

  1. Use the search filter to locate the blog post that you want to change, or click on the product from the list of existing blog posts.

  2. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected blog post.

  3. Click Save.

Android:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Blog posts.

  1. Use the search filter to locate the blog post that you want to change, or click on the product from the list of existing blog posts.

  2. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected blog post.

  3. Click Save.

Apply a new template to a blog

PC:

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

  2. Click *Manage *.

  1. Use the search filter to locate the blog that you want to change, or click on the product from the list of existing blogs.

  2. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected blog.

  3. Click Save.

iPhone:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Blog posts.

  4. Tap the ... button beside Blog posts, and then select *Manage *.

  1. Use the search filter to locate the blog that you want to change, or click on the product from the list of existing blogs.

  2. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected blog.

  3. Click Save.

Android:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Blog posts.

  4. Tap the ? button beside Blog posts, and then select *Manage *.

  1. Use the search filter to locate the blog that you want to change, or click on the product from the list of existing blogs.

  2. In the Online store section, use the dropdown menu to select a new theme template to apply to the selected blog.

  3. Click Save.

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



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


常见问答(FQAS)


问题一:如何创建和布局商店模板?

使用Shopify的前台主题编辑器,可以新建一个模板文件或布局文件进行编辑。Shopify提供了一些常用的模板文件如index.liquid用于首页,collection.liquid用于产品列表页等。可以利用这些文件进行页面布局和样式设计。

问题二:如何在模板中添加模版标签和Liquid代码?

Shopify模板文件使用Liquid作为渲染引擎,您可以在模板文件中添加各种Liquid标签来控制页面元素的输出。如{% raw %} liquid变量名 {% endraw %} 输出变量值,{% raw %} for循环标签 {% endraw %}实现循环输出等。您可以参考Shopify文档了解支持的各种Liquid标签及语法。

问题三:如何预览修改后的模板设计?

Shopify提供实时预览功能,您可以直接在模板编辑界面点击“Preview”按钮,查看修改后模板的实时效果,同时可以在浏览器中切换不同设备模式预览响应式设计效果。此外也可以发布 changes 设置触发预览以查看更改效果。