模板,Shopify店铺中的默认模板详细介绍
模板,Shopify店内默认模板详细介绍核心内容
模板,Shopify店内默认模板详细介绍正文
Shopify商店中的默认模板非常灵活,适用于所有商店,无论库存大小。通过默认模板,您可以快速开设商店并开始销售;默认模板外观美观,无模板定制项目。
默认模板是实现以下目标的理想选择:
可立即开始销售,无需大量定制模板设置
确保您的商店在平板电脑和智能手机上显示良好的效果
轻松重新安排店铺布局,实时检查变更。
模板编辑器
使用模板编辑器定制模板。模板编辑器工具栏分为分区和模板设置。
分区是一个自定义的内容块,可以在您的在线商店中确定不同的页面布局。
主页分区包括多种功能(如幻灯片或新闻信息注册),您可以添加、重新排列或删除这些功能。主页上最多可以有 25 分区。
每种类型的页面都有自己的分区。例如,产品页面的分区决定了在线商店中每个产品页面的布局。
页面上的分区总是位于在线商店的特定位置。您可以定制它们,但不能重新排列或删除它们。
每个模版包括固定的分区(例如页眉和页脚),在线商店的每个页面上都会显示这些分区。
默认模板包括以下静态分区:
标头
页脚
产品页面
产品系列页面
产品系列表页面
博客页面
文章
购物车页面
动态分区
您可以从定义主页的布局中添加、重新排列和删除动态分区。每个模板都有唯一的动态分区可供选择。
默认模板包括以下动态分区:
博客文章
产品系列表
特色产品系列
图库
带文本的图片
带文本叠加的图片
logo 列表
幻灯片
特色产品
新闻通讯
地图
格式文本
感言
带图片的文本列
视频
自定义内容
标头
在标头分区,您可以编辑和显示商店每个页面顶部显示的内容。您可以添加 logo 图片,选择要显示的菜单,并创建公告信息。
如需定制标头分区,请执行以下操作:
在 Shopify 后台,转到网店 > 模版。
找到 默认模板,然后单击自定义。
单击分区。
单击标头。
要设置 logo 对齐,请在 Logo alignment(Logo左对齐或 选择 对齐)区域Centered(居中)。如果不添加logo图片将在文本中更改您的商店名称。您可以在后台的通用设置页面上更改您的商店名称。
如需添加 logo,请在 logo 单击图片区域中的图片选择。如需从计算机上传图片,请单击上传。如需使用 Burst 免费图库图片,请单击免费图片。
要改变 logo 尺寸,请使用自定义 logo 宽度滑块调整到您选择的宽度。调整 logo 宽度不会使 logo 图片失真。
如果您想在标头中显示菜单,请单击菜单区域中的更改。选择现有菜单,或单击创建新菜单。如果您不想在标头中显示菜单,请单击删除。
如需在页面顶部显示公告信息,请执行以下步骤:
在 Announcement bar选择 在(公告栏)区域Show announcement(显示公告)。
如果您只想在主页上显示公告,请选择仅主页。否则,公告将显示在商店的每个页面上。
在文本字段中输入公告文本。
若要添加公告链接,请在链接字段中输入 URL。
如需更改公告栏背景色,请单击栏颜色样本并选择颜色。
如果要更改公告文本的颜色,请单击文本的颜色样本并选择颜色。
单击保存。
页脚
在页脚分区,您可以编辑商店每个页面底部显示的内容。您可以在页脚中添加以下功能:
最多两个菜单
新闻通讯注册
支付图标
如需定制页脚分区,请执行以下操作
在 Shopify 后台,转到网店 > 模版。
找到 默认模板,然后单击自定义。
单击分区。
单击页脚。
从主菜单区域定制主页脚菜单。如果您想编辑默认菜单,请单击编辑菜单。如果您想更改其他菜单,请单击更改,然后选择现有菜单或单击 Create menu(创建菜单)。
在 Additional menu(其他菜单)区域中向页脚添加其他菜单。
如需将新闻通讯注册添加到页脚,请执行以下步骤:
选中 Show newsletter signup(显示新闻通讯注册)。
在子标题字段中输入新闻通信注册子标题。
选择 Show payment icons(显示付款图标)将付款图标(如 Mastercard 或 PayPal)添加到页脚。
单击保存。
产品页面
您可以在产品页面分区中添加或删除以下元素:
数量选择器
多属性标签
产品品牌或供应商
图片缩放
动态结账按钮
社交共享按钮
产品推荐
您还可以设置图片的大小。
编辑产品页面设置
从顶栏下拉菜单中选择产品页面。
单击分区。
单击产品页面。
如需设置图片尺寸,请从 Image size在下拉菜单中选择图片尺寸(图片尺寸)。
要显示数量选择器,请选择 Show quantity selector(显示数量选择器)。
要显示多属性标签,如尺寸和颜色,请选择 Show variant labels(显示多属性标签)。根据产品的多属性选项名称显示多属性标签。
如需展示产品品牌或供应商,请选择 Show vendor(显示供应商)。若要显示品牌或供应商,您需要向产品添加供应商。
如果客户想通过在产品图片上方悬挂鼠标来放大图片,请选择 Enable image zoom(启用图片缩放)。
要显示动态结账按钮,请选择 Show dynamic checkout button(显示动态结账按钮)。
要显示社交共享按钮,请选中 Show social sharing buttons(显示社交共享按钮)。
单击保存。
建议添加或删除产品
您可以在产品页面上展示推荐产品,让客户更容易找到其他可能感兴趣的产品。
从顶栏下拉菜单中选择产品页面。
单击产品推荐。
使用显示动态推荐复选框,选择在产品页面上显示或隐藏产品推荐。
可选:如需更改推荐产品上方显示的标题,请在标题字段中输入新标题。
可选:使用显示厂家复选框,选择在产品描述中显示或隐藏厂家。
单击保存。
产品系列页面
您可以将产品系列页面设置为允许客户筛选和排序产品系列中的产品。您可以选择产品系列布局(网格或列表)和要显示的产品数量。
设置产品系列页面布局:
导航到模板编辑器中的产品系列页面。
单击分区选项卡。
单击产品系列页面。
从布局列表中选择网格或列表。
从列表中选择每行产品数和每页行数(如果选择网格样式)。
如果您想在页面顶部显示产品系列图片,请选择 Show collection image(显示产品系列图片)。
如需展示产品品牌或供应商,请选择 Show product vendors(显示产品供应商)。
选中 Enable sorting(启用排序)显示排序菜单。
选中 Enable tag filtering(使用标签筛选)让客户根据产品标签筛选产品系列。
单击保存。
产品系列表页面
产品系列表页面以网格的形式显示所有产品系列。您的客户可以通过产品系列表页面快速浏览您的产品系列,找到他们想要浏览的产品系列。在默认模板中,产品系列表页面是标头菜单中的顶级链接:
注:您的顶级产品系列菜单名称可能会有所不同。在这个例子中,菜单名称是Catalog”。
您可以在网格模式下显示所有产品系列的缩略图,所选产品系列。您还可以选择如何在页面上排序产品系列。
如需设置产品系列列表页面布局,请执行以下操作:
通过单击顶级产品系列菜单项,导航到您的产品系列表页面。
单击分区选项卡。
单击 Collections list page(产品系列表页面)。
执行以下任何操作:
请选择所有产品系列的缩略图,以网格模式显示。
如果要在产品系列表页面上显示产品系列,请选择已选择的产品系列。
如果您在上一步中选择了所有,请执行以下操作:
从 Sort collections by在列表中选择一个排序选项(产品系列排序模式)。
从 Collections per row(每行产品系列数)列表中,选择每行产品系列数。
单击保存。
博客页面
使用默认模板,您可以列出您的博客文章或以网格的形式显示它们。如果有多个博客作者,则可以显示每个博客作者的姓名。它还可以显示每个博客文章的发布日期。
提示: 如果您想为商店创建博客,或想向现有博客添加文章,请在 Shopify 后台转到网店 > 博客文章。如细了解如何为网店创建博客,请参阅博客。
在模板编辑器的预览区域导航到博客页面。
单击分区。
单击博客页面。
从布局列表中选择博客文章是列表还是网格。
选择显示作者以显示作者姓名。
选择显示日期以显示博客文章的发布日期。
单击保存。
购物车页面
在购物车页面上,您可以使用以下设置:
购物车备注
购物车自动更新
添加购物车备注
您可以允许客户在购物车页面上添加订单注释:
从顶栏下拉菜单中选择购物车。
单击分区选项卡。
单击购物车页面。
选中 Enable cart notes(启用购物车备注)。
单击保存。
启用购物车自动更新功能
您可以在客户更改订单后立即显示更新后的信息。例如,当客户更改购物车中的产品数量时,可以以小价格更新。使用购物车进行自动更新:
从顶栏下拉菜单中选择购物车。
单击分区选项卡。
单击购物车页面。
勾选购物车自动更新。
单击保存。
特色产品系列
您可以在主页上显示产品系列。展示产品系列可以帮助您推广产品和新产品系列。
通过默认模板,您可以添加查看所有按钮,让客户查看整个产品系列,并在每个产品图片下显示供应商名称。
若要在主页上使用产品系列,请执行以下操作:
单击分区选项卡。
单击特色产品系列分区。
如需更改产品系列上方显示的文本,请在标题字段中输入文本。
从产品系列列表中选择要显示的产品系列。如果您想添加或删除所选产品系列中的产品,请单击编辑产品系列链接,在新标签中打开产品系列页面。
从 Products per row(每行产品数)列表中,选择每行显示的产品数。
从行列表中选择要显示的产品行数。
如果您想在每个产品图片下显示供应商或品牌名称,请选择 Show product vendor(显示产品供应商)。
如果您想让客户查看产品系列中的所有产品,请选择 Show 'View all' button(显示查看所有按钮)。
单击保存。
带文本的图片
通过默认模板,您可以添加图片,图片的右侧或左侧显示文本。您还可以添加链接到您商店页面的按钮
通常,你可以用 Image with text(带文本图片)分区宣传产品或产品系列,或将网站流量引入博客页面。
如果您想在主页上添加带文本的图片,请执行以下操作:
单击分区选项卡。
单击带文本叠加的图片分区。
在图片区域,单击选择图片,然后执行以下操作之一:
从布局列表中,选择希望图片显示在文本的右侧或左侧。
在标题字段中输入此分区的新标题。
在文本字段中输入标头下显示的文本。
在 Button label在字段显示在按钮上的文本(按钮标签)字段。
在 Button link在字段(按钮链接)中,选择商店中想要链接按钮的页面。
单击保存。
带文本叠加的图片
您可以在主页上显示带有自定义文本叠加的大图片。
带文本的图片分区包括以下设置:
图片 - 选择添加到分区的图片。
图片对齐法 - 在页面上显示的一侧设置图片。
布局 - 设置分区宽度。
分区高度 - 设置分区高度。为防止切割图片,请选择适应图片,并根据图片高度设置分区高度。
文本大小 - 设置文本的大小。
标题 - 为分区添加标题。
文本 - 将文本添加到分区中。文本叠加的图片分区将自动重新命名为您提供的标题。
按钮标签 - 向分区添加带文本标签的按钮。
按钮链接 - 将您的按钮链接到另一个页面或网站。
在主页上添加带文本的图片
在 Shopify 后台,转到网店 > 模版。
找到 默认模板,然后单击自定义。
单击添加分区 > 带文本的图片 > 添加。
使用设置定制带文本叠加的图片分区。
单击保存。
新闻通讯
您可以在主页上添加新闻通讯注册。这使您能够收集客户的电子邮件地址进行电子邮件营销活动。你可以在 Shopify 博客了解电子邮件营销的详细信息。
网站上的新闻通讯分区。有一个字段可以让客户输入电子邮件地址和一个订阅按钮。
向主页添加新闻通讯注册:
在 Shopify 后台,转到网店 > 模版。
找到 默认模板,然后单击自定义。
单击分区。
单击添加分区 > 新闻通讯。
在标题字段中输入新闻通讯注册标题。默认标题为订阅我们的新闻通讯。
在子标题字段中输入新闻通信注册子标题。
单击保存。
视频
你可以 YouTube 将视频添加到您的主页上。视频能吸引顾客,引起他们对您的业务的兴趣。
提示: 您可以通过自定义内容部分使用 Vimeo 将视频添加到主页。
视频分区包括以下设置:
视频高度 - 设置视频高度。
文本大小 - 将文本添加到您的视频中。如果将视频样式设置为带播放按钮的图片,则视频播放时文本将消失。
显示叠加 - 在视频上添加一层颜色,使文本更容易阅读。如果将视频样式设置为带播放按钮的图片,叠加层将消失。
样式 - 设置视频样式。背景视频样式只适用于台式电脑。如果客户使用平板电脑或移动设备访问您的商店,他们总是会看到带有播放按钮的图片样式。
标题 - 为您的视频添加标题。
视频链接 - 添加视频YouTube URL。
封面图片 - 将封面图片添加到视频中。播放视频时隐藏封面图片。
图片对齐法 - 对齐封面图片,使最重要的部分始终可见。
在主页上添加视频
在 Shopify 后台,转到网店 > 模版。
找到 默认模板,然后单击自定义。
单击添加分区 > 视频。
通过设置定制您的视频分区。
单击保存。
幻灯片
您可以在主页上添加图片的幻灯片。在幻灯片分区中,您可以设置幻灯片的高度,添加文本和按钮,并选择是否自动播放幻灯片。
一家叫 Pure Tea 在线商店的主页上有一个幻灯片。幻灯片显示桌上有一个茶杯,标题为手工制作,副标题为由茶艺大师精心制作,非工业机械生产。
请参考以下指南了解幻灯片图片切割和推荐图片尺寸。
创建幻灯片:
在 Shopify 后台,转到网店 > 模版。
找到 默认模板,然后单击自定义。
单击分区。
单击幻灯片。
幻灯片的高度设置在幻灯片高度下拉菜单中。
在 Text size标题和副标题的大小设置在下拉菜单中。
在幻灯片上设置文本在文本对齐下拉菜单中的位置。
选择:选择 Show overlay(显示叠加)。图片叠加是图片与放置在图片上的任何文本之间的颜色层。叠加有助于提高颜色对比度和文本可读性。您可以在颜色设置中设置叠加的颜色和不透明度。
选择:选择 Auto-rotate slides(自动旋转幻灯片)自动播放幻灯片。使用 Change slides every(幻灯片改变时间间隔)滑块选择停留在每个幻灯片上的时间。
如需添加图片幻灯片,请执行以下步骤:
在内容区,单击添加图片幻灯片。
在图片下,单击选择图片。如果要从电脑上传图片,请单击上传。如果要使用 Burst 免费图库图片,请单击免费图片。
如果要选择幻灯片中图片的对齐,请在 Image position在下拉菜单中选择一个位置(图片位置)。您可以在以下指南中的图片位置中了解详细信息。
如果要向图片幻灯片添加文本,请将文本输入标题字段、副标题字段或这两个字段。
通过在 Text button label(文本按钮标签)在字段中输入文本,并将按钮添加到图片幻灯片中。在按钮链接字段中,按钮选择要链接在线商店的部分:
单击保存。
幻灯片指导
您可以使用以下设置和图片建议来控制幻灯片在您在线商店的外观。幻灯片的显示取决于以下因素:
你的图片尺寸
设置你的图片位置
幻灯片高度设置
图片宽高比
由于屏幕尺寸和形状的不同,您的幻灯片可能在移动设备和桌面设备上有所不同。
图片尺寸建议
幻灯片图片的建议尺寸取决于您的幻灯片高度设置:
请遵循以下标准:
要查看或更改幻灯片的高度设置,请参考创建幻灯片说明书中的步骤 5。
图片剪裁
您可以采取步骤控制图片的切割方法或完全避免切割图片。
控制图片的切割方法
在以下情况下,您可以看到一些屏幕尺寸上的图片切割:
图片的宽高比不同。
幻灯片高度可设置为小、中、大。
您的幻灯片高度设置为适应第一张图片,您的图片高于设备屏幕或浏览器窗口。
您可以使用图片位置设置来控制图片的切割方法:
对于每张图片,您可以选择切割时保留的图片部分。在下面的例子中,您可以看到如何根据某些屏幕尺寸切割相同的图片。左边的幻灯片将图片设置在中间。右边的幻灯片将图片设置在左上角:
如需查看或更改图片位置设置,请参考创建幻灯片描述中的步骤 10。
避免切割图片
要避免切割幻灯片图片,请尝试以下步骤:
将幻灯片高度设置为适应第一张图片。
使用宽度为高度两倍的图片。这些图片的宽度比为 2:1。建议尺寸为 1200 px × 600 px。
确保所有幻灯片的宽高比相同。幻灯片的比例比幻灯片的大小(以像素为单位)更重要。
在以下示例中,桌面和移动设备上显示了一张比例为 2:1 的幻灯片图片:
幻灯片高度
幻灯片分区的宽度始终为浏览器窗口的 100%。幻灯片的高度和宽度是相对的。由于屏幕尺寸的不同,幻灯片的宽度和高度因设备不同而异。幻灯片的高度也会受到幻灯片高度设置的影响。
您可以使用幻灯片高度设置 Adapt to first image(适应第一张图片),根据第一张图片的高度设置幻灯片的高度。当所有图片尺寸相同或宽度比相同时,此设置效果最好。如果您的图片尺寸不同或比例不同,您可以更改幻灯片的顺序,并查看它们在不同高度的显示效果。
在下面的例子中,后弦放置了最短的幻灯片:
高度较低的幻灯片决定了另外两个幻灯片的高度。由于其它幻灯片较高,它们的顶部和底部被切割。
在下一个例子中,首先放置了一个更高的幻灯片:
中等高度的幻灯片将决定另外两个幻灯片的高度。高幻灯片的顶部和底部将被切割。低幻灯片的侧面将被切割。
如果改为小、中、大高度设置,请参考幻灯片图片大小建议。
图片比
如果要避免幻灯片中的图片剪裁,我们建议您的图片采用 2:1 宽高比
如果您不担心图片会在桌面显示器上切割,并且想在移动设备上显示图片,请使用方形图片或高度大于宽度的图片。下面的例子幻灯片显示了一张方形图片,宽度比为 1:1:
桌面和移动设备上显示了一张方形幻灯片。这张照片在桌面设备上被切割,但在移动设备上没有被切割。
下一个示例幻灯片显示了宽高比为 2:3 的肖像图片:
桌面和移动设备上显示了一个更高的幻灯片。这张照片在桌面设备上被切割,但在移动设备上没有被切割。
模板设置:您可以使用模板设置来自固定在线商店的颜色和字体。您还可以设置链接到社交媒体账户,编辑购物车设置,并添加网站图标。
默认模板包括以下模板设置:
颜色
版式
社交媒体
网站图标
结账
颜色
您可以为在线商店的不同部分选择颜色。
自定义颜色设置
在 Shopify 后台,转到网店 > 模版。
单击 **** 旁边的自定义。
单击模板设置。
单击颜色。
对于每种类型的内容,单击颜色 swatch 使用颜色选择器:
- 最近选择的区域显示了你最近为你的模板选择的颜色。- 当前使用区域显示您目前在模板的其他部分使用的颜色。
要将颜色设置为透明,请单击无。
单击保存。
版式
您可以在网上商店设置文本的字体样式和大小。
自定义字体设置
在 Shopify 后台,转到网店 > 模版。
单击 **** 旁边的自定义。
单击模板设置。
单击 Typography(字体)。
使用字体选择器单击更改每种类型的文本:
浏览字体通过使用搜索字段或单击加载更多。
如需查看所有可用字体,请参考 Shopify 字体库。
单击要使用的字体名称。
如果要将字体改为其他样式,如粗体或斜体,请单击 Regular(常规)。下一步,单击要使用的样式,然后单击选择。
单击保存。
社交媒体
您可以在产品和博客文章中添加社交共享按钮,并将链接转移到您的社交媒体账户。
自定义社交媒体设置
在 Shopify 后台,转到网店 > 模版。
找到 默认模板,然后单击自定义。
单击模板设置。
单击社交媒体。
如需上传社交共享图片,请单击选择图片或浏览社交共享图片区域的免费图片。
如果您想在您的产品和博客文章中添加社交共享按钮,请在 Sharing options选择任意或所有的复选框(共享选项)区域。
可添加以下共享按钮:
如果您想将链接添加到您的社交媒体账户中,请在提供的字段中将链接输入到您的账户区域。请输入完整的链接,如 https://instagram.com/shopify 或 https://twitter.com/shopify。
指向您的社交媒体账户的链接显示在您的体账户的链接。
单击保存。
注:为了在产品页面和博客文章上显示社交共享按钮,您还需要在这些页面的分区中使用这些按钮。
网站图标
你可以上传网站图标 (Favicon), 可以显示在以下位置logo 帮您推广网店品牌:
您的 Web 浏览器标签
您的 Web 浏览器历史记录
桌面上的图标
在线商店名称(加入书签后)旁边。
适用于默认模板的最佳网站图标图片尺寸为 32 x 32px。
上传网站图标:
在 Shopify 后台,转到网店 > 模版。
在默认模板部分,单击自定义。
单击模板设置选项卡。
单击网站图标。
在 Favicon image(网站图标图片)区域,单击选择图片,然后执行以下操作之一:
单击保存。
通知 添加到购物车
当客户将产品添加到购物车时,您可以显示包含购物车页面链接的通知。
如果禁止此通知,客户将直接进入购物车页面。
自定义通知:
在 Shopify 后台,转到网店 > 模版。
在默认模板部分,单击自定义。
单击模板设置选项卡。
单击添加到购物车通知。
选择是否在购物车中添加产品时显示通知设置。
单击保存。
结账
您可以定制您的结账页面,包括以下内容:
页面顶部的自定义图片横幅
商店 logo
主要内容区域的背景图片或颜色
定制文本字体和颜色。
如果您想在应用程序更改时查看更改,请转到模板编辑器中的结账页面。
如需访问结账页面设置,请执行以下操作:
在 Shopify 后台,转到网店 > 模版。
在默认模板部分,单击自定义。
单击模板设置选项卡。
单击结账。
如需添加横幅图片,请执行以下操作:
选择 在横幅区域Use custom background复选框(使用自定义背景)。
单击选择文件以上传图片文件。
如需添加 logo,请执行以下操作:
在 logo在 区域中,选择图片下拉菜单中的自定义。
单击选择文件链接上传图片文件。
从位置下拉菜单中选择显示图片的位置:右、左或中。
在 Logo size(Logo 尺寸)列表中,选择 logo 尺寸。
自定义主要内容区:
自定义背景复选框选择在主要内容区域。
执行以下任何操作:
单击选择文件以上传图片文件。
单击背景色 swatch 从调色板中选择新颜色。
在表单字段下拉菜单中,选择白色或透明的字段。
如定制订单摘要页面,请执行以下操作:
自定义背景复选框用于订单摘要区域。
执行以下任何操作:
单击选择文件上传图片文件。
单击背景色 swatch 从调色板中选择新颜色。
如需设置字体选项,请执行以下操作:
在布局区域,从下拉菜单中选择标题和文本字体。
如需设置颜色选项,请执行以下操作:
在色区,单击 Accents(主题色)、按钮或错色 swatch 从调色板中选择新颜色。
改变模板样式
您可以将模板的通用设置重置为默认值。重置模板样式时,您将丢失通用设置选项卡的任何更改,但您不会丢失文本和图片。
单击通用设置选项卡。
单击 Change theme style(更改模板样式)。
单击 Change theme style下面的按钮(更改模板样式)。按钮的名称通常是模板名称。
单击更改样式。(来源:Shopify)
以上内容属于作者个人观点,不代表跨境网的立场!如有侵权,请联系我们。
相关推荐:Shopify Boundless详细设置模板教程