模板,Shopify Minimal模板详细设置教程
模板,Shopify Minimal详细设置教程核心内容
模板,Shopify Minimal详细设置教程文本
Shopify Minimal 是一种响应迅速的宽布局,可以在任何设备上显示出极好的效果。它配备了精心设计的功能,可以提供全面的灵活性,您可以使用额外的布局选项、产品视图、产品系列视图、网站地图风格和布局来定制您的商店。
模板编辑器
使用模板编辑器定制模板。模板编辑器工具栏分为分区和模板设置。
您可以使用分区来修改商店中不同页面的内容和布局。您可以使用模板设置定制商店的字体和颜色,并更改社交媒体链接和结账设置。
分区是可以在您的在线商店上确定不同页面布局的可自定义内容块。
主页分区包括多种功能(如幻灯片或新闻信息注册),您可以添加、重新排列或删除这些功能。主页上最多可以有 25 分区。
每种类型的页面都有自己的分区。例如,产品页面的分区决定了在线商店中每个产品页面的布局。
页面上的分区总是位于在线商店的特定位置。您可以定制它们,但不能重新排列或删除它们。
每个模板包括固定分区(如页眉和页脚),这些分区将显示在网店的每个页面上。
Minimal 包括以下静态分区:
标头
页脚
产品页面
产品系列页面
产品系列表页面
博客
文章
购物车页面
动态分区
您可以从定义主页的布局中添加、重新排列和删除动态分区。每个模板都有唯一的动态分区可供选择。
Minimal 包括以下动态分区:
博客文章
产品系列表
特色产品系列
图库
带文本的图片
幻灯片
特色产品
新闻通讯
地图
格式文本
视频
自定义 HTML
标头
你可以定制自己logo 图片添加到商店标头中。最好的格式是有透明背景的 .png 文件。logo 图片应为 450 x 200 像素。您可以通过减小宽度来调整 logo 图片大小。
使用 Minimal,您还可以在商店页面顶部为客户创建消息:
您的信息是完全自定义的,可以包括联系信息、商店活动或促销信息、商店口号或品牌信息。
如需定制标头分区,请执行以下操作:
单击分区。
单击标头。
在 logo 区域内,单击选择图片,然后执行以下操作:
- 如果要选择已上传到 Shopify 后台图片,请单击库选项卡。- 如果您想从计算机中选择图片,请单击库选项卡,然后单击加号按钮。
自定义 logo 宽度(以像素为单位) 字段输入 logo 的宽度。
在主菜单区域,从菜单列表中选择要显示在商店标头的网站地图菜单。
如果要在商店 logo 下面显示网站地图菜单,请选择 Center main menu below logo(在 logo 主菜单显示在下方居中。
如果要把商店的 logo 对齐页面左侧,请选择 Left-align logo(左对齐 logo)。
如果要在标头下方显示一条小线段,请选择 Show divider lines in header(分割线显示在标头中)。
在顶栏分区, Top bar text在字段中输入您的自定义信息。
如果要在标头中显示搜索栏,请选择 Show search bar(显示搜索栏)。
单击保存。
页脚
在页脚分区,您可以编辑商店每个页面底部显示的内容。您可以在页脚中添加以下功能:
支付图标
社交媒体图标
新闻通讯注册
自定义文本
指向您最新博客文章的链接
菜单
要定制页脚分区,请执行以下操作:
在 Shopify 后台,转到网店 > 模版。
查找 Minimal,然后单击自定义。
单击分区。
单击页脚。
通过选中 Payment icons(付款图标)将付款图标(如 Mastercard 或 PayPal)添加到页脚。
在内容分区中,最多向页脚添加 6个内容块:
- 单击添加内容并添加内容块。从以下选项中选择块的类型: - 菜单 - 社交图标 - 新闻通讯注册 - 最新博客文章 - 文本
- 单击 ⁞⁞ 图标并将内容块拖到其他位置移动内容块。- 单击内容块,然后单击 Remove content(删除内容)删除内容块。
- 单击内容块并编辑定义内容块。
单击保存。
产品页面
您可以在产品页面分区中添加或删除以下元素:
产品品牌或供应商
数量选择器
图片缩放
产品描述中的标签
社会共享图标
相关产品
动态结账按钮
产品推荐
您还可以设置缩略图位置,选择多属性选择器,添加到购物车按钮和动态结账按钮。
要编辑产品页面的设置,请执行以下操作:
从顶栏下拉菜单中选择产品页面。
单击分区。
单击产品页面。
选中 Show product vendor(显示产品供应商)显示产品品牌或供应商。要显示品牌或供应商,您需要向产品添加供应商。
要显示数量选择器,请选择 Show quantity selector(显示数量选择器)。
如果要选择图片缩放的类型,请从 开始Zoom type(缩放类型)列表中选择 Lightbox(灯箱)、Zoom-in(放大)或 No zoom(无缩放)。
如需设置产品缩略图,请从 Product thumbnail position在下拉菜单中选择 (产品缩略图位置)Right of main image(主图右侧)或 Below main image(主图下方)。
如果您想在产品描述中使用选项卡,请执行以下任务:
选中 Show a tab next to your product description(显示产品描述旁边的标签)。产品描述将显示在一个标签上,其他内容将显示在第二个标签上,如尺寸表或退货政策。
在 Tab content在(选项卡内容)区域内,单击选择页面,并选择要显示在第二个选项卡上的页面。
要显示社交共享图标,请选择 Enable product sharing(启用产品共享)。
要在页面底部显示一系列相关产品,请执行以下任务:
选中 Enable related products(使用相关产品)。
要展示相关产品的产品品牌或供应商,请选择 Show vendor(显示供应商)。
要显示相关产品的销售图标,请选择 Show sale circle(显示销售圈)。
如果要显示售罄相关产品的售罄图标,请选择 Show sold out circle(显示售罄圈)。
要在中间显示相关产品的标题文本,请选择 Center text below product images(显示产品图片下方的文本)。
产品系列决定了显示的相关产品。为了显示相关产品,您需要创建产品系列或添加到现有的产品系列中。如果产品不属于产品系列,则不显示相关产品。
要显示动态结账按钮,请选择 Show dynamic checkout button(显示动态结账按钮)。
要设置多属性选择器,添加到购物车按钮和动态结账按钮的大小,请从下拉菜单中选择多属性选择器和按钮的大小。
单击保存。
建议添加或删除产品
您可以在产品页面上展示推荐产品,让客户更容易找到其他可能感兴趣的产品。
从顶栏下拉菜单中选择产品页面。
单击产品推荐。
使用显示动态推荐复选框,选择在产品页面上显示或隐藏产品推荐。
可选:如需更改推荐产品上方显示的标题,请在标题字段中输入新标题。
可选:使用以下复选框,选择产品推荐的展示方式:
- 显示产品厂商 - 显示销售圆 - 显示产品图片下方的文本
单击保存。
产品系列页面
Minimal 包含以下设置,可用于产品系列页面上自定义产品的显示:
显示或隐藏销售图标、售罄图标和产品供应商名称
允许您的客户选择排序选项,并根据产品标签筛选产品系列
选择每个产品图片下的文本是中间显示还是左对齐显示。
如需设置产品系列显示模式,请执行以下操作:
导航到模板编辑器中的产品系列页面。
单击分区选项卡。
单击产品系列页面分区。
要显示产品供应商或品牌名称,请选择 Show product vendor(显示产品供应商)。
要显示销售图标,请选择 Show product sale circle(显示产品销售圈)。
要显示售罄图标,请选择 Show product sold out circle(显示产品售罄圈)。
如果客户想在产品系列中选择产品的顺序,请选择 Enable collection sorting(启用产品系列排序)。
允许客户根据产品标签筛选显示结果,请选择 Enable filtering by product tag(按产品标签进行筛选)。
如需在产品图片正下方显示文本,请选择 Center text below product images(显示产品图片下方的文本)。
单击保存。
博客
如果您使用多个作者的博客文章,您可能需要自动显示每个博客的作者姓名。
要显示博客文章的作者,请执行以下操作:
导航到模板编辑器中的博客页面。
单击分区选项卡。
单击博客分区。
选中 Show blog post author(展示博客文章作者)。
单击保存。
购物车页面
使用 Minimal,您可以在购物车页面上使用订单备注,让客户输入订单相关说明。
如需启用订单备注,请执行以下操作:
通过将产品添加到购物车来导航到模版编辑器中的购物车页面。
单击分区选项卡。
单击购物车页面部分。
选中 Enable order notes(启用订单备注)。
单击保存。
特色产品系列
您可以在主页上显示特色产品系列。特色产品系列可以帮助您推广产品和新产品系列。
如果您想在主页上使用产品系列,请执行以下操作:
单击分区选项卡。
单击特色产品系列部分。
如需更改产品系列上方显示的文本,请在标题字段中输入文本。
从产品系列列表中选择要显示的产品系列。如需添加产品系列,请单击添加产品系列链接,在新选项卡中打开产品系列页面。
从 Products per row(每行产品数)列表中,选择每行显示的产品数。
从行列表中选择要显示的产品行数。
如果您想在每个产品图片下显示供应商或品牌名称,请选择 Show product vendor(显示产品供应商)。
如果要在正在销售的产品上显示圆圈,请选择 Show product sale circle(显示产品销售圈)。
如果要在售罄产品上显示圆圈,请选择 Show product sold out circle(显示产品售罄圈)。
如果要使产品文本居中显示,请选中 Center text below product images(显示产品图片下方的文本)。
单击保存。
幻灯片
你可以创建主页幻灯片,最多可以回收六张图片。
幻灯片图片建议大小为 1280 x 460 像素。
幻灯片分区包括以下设置:
幻灯片高度 - 设置幻灯片的高度。选择 Adapt to first image slide height(适应第一张图片幻灯片的高度),根据第一张图片的高度设置幻灯片的高度。
自动循环播放幻灯片 - 自动播放幻灯片。
幻灯片改变时间间隔 - 选择更改幻灯片的频率。
过渡效果 - 选择您希望图片的过渡效果是滑动还是稀释。
文本大小 - 设置幻灯片文本的大小。
图片 - 添加图片幻灯片放映幻灯片。
图片位置 - 选择图片中最重要的区域作为幻灯片的焦点。
覆盖不透明度 - 设置图片覆盖的阴影。覆盖会使图片的外观变暗,使幻灯片文本更容易阅读。
文本颜色 - 设置幻灯片文本的颜色。
文本对齐法 - 将文本与幻灯片对齐。
标题 - 将标题添加到幻灯片中。
按钮标签 - 向幻灯片添加带有文本标签的按钮。
按钮链接 - 将按钮链接到在线商店的另一部分。
在主页上添加幻灯片:
在 Shopify 后台,转到网店 > 模版。
查找 Minimal,然后单击自定义。
单击幻灯片。
来自定义幻灯片的使用设置。
单击保存。
新闻通讯
您可以在主页上添加新闻通讯注册。这使得您可以为电子邮件营销活动收集客户的电子邮件地址。你可以在 Shopify 博客了解电子邮件营销的详细信息。
在主页上添加新闻通讯注册,请执行以下操作:
在 Shopify 后台,转到网店 > 模版。
查找 Minimal,然后单击自定义。
单击分区。
单击添加分区 > 新闻通讯。
在标题字段中输入新闻通讯注册标题。默认标题为订阅我们的新闻通讯。
在子文本字段中输入新闻通信注册子标题。默认文本为促销、新产品和销售。直接发送到您的收件箱。
单击背景色样本并选择颜色,设置新闻通信注册分区的背景色。
单击保存。
视频
你可以在你的主页上添加 YouTube 或 Vimeo 视频。视频能吸引顾客,让他们对你的生意感兴趣。
将视频添加到您的主页上,请执行以下操作:
在 Shopify 后台,转到网店 > 模版。
查找 Minimal,然后单击自定义。
单击分区。
单击添加分区 > 视频。
将视频标题输入标题字段。
在 Video link(视频链接)在字段中输入视频共享链接。
YouTube 共享链接如下:https://youtu.be/OTJXAUZY9t0。你可以在这里 YouTube 帮助文章知道如何复制 YouTube 视频共享链接。
Vimeo 共享链接如下:https://vimeo.com/28132510。你可以在这里 Vimeo 帮助中心文章了解如何复制 Vimeo 视频共享链接。
单击保存。
自定义 HTML
自定义 HTML 可用于 部分HTML 代码创建主页的自定义内容。例如, HTML 从第三方网站设置文本块格式、创建表或嵌入内容。
要定制自己HTML 添加到主页上,请执行以下操作:
在 Shopify 后台,转到网店 > 模版。
查找 Minimal,然后单击自定义。
单击分区。
单击添加分区。
在 Advanced layout(高级布局)区域,单击 Custom HTML(自定义 HTML)> 添加。
单击 Custom HTML(自定义 HTML),然后输入 ,想要添加到主页HTML 代码。
单击保存。
模板设置
您可以使用模板来设置在线商店的颜色和布局。您还可以设置链接到社交媒体账户,编辑购物车设置,并添加网站图标。
Minimal 包括以下模板设置:
布局
颜色
版式
社交媒体
网站图标
结账
布局
使用 Minimal,您可以将商店的最大宽度从 1030 像素改为 1340 像素的宽度布局。更宽的布局可以使显示的图片更大,并拉伸文本。
如果您想关注图形而不是文本,请使用更宽的布局。
要更改布局宽度,请执行以下操作:
单击模板设置选项卡。
单击布局。
选中 Enable wide layout(启用宽布局)。
颜色
您可以为在线商店的不同部分选择颜色。
自定义颜色设置
在 Shopify 后台,转到网店 > 模版。
单击 **** 旁边的自定义。
单击模板设置。
单击颜色。
对于每种类型的内容,单击颜色 swatch 使用颜色选择器:
- 最近选择的区域显示了你最近为你的模板选择的颜色。- 当前使用区域显示您目前在模板的其他部分使用的颜色。
要将颜色设置为透明,请单击无。
单击保存。
版式
您可以在网上商店设置文本的字体样式和大小。
自定义字体设置
在 Shopify 后台,转到网店 > 模版。
单击 **** 旁边的自定义。
单击模板设置。
单击 Typography(字体)。
使用字体选择器单击更改每种类型的文本:
浏览字体通过使用搜索字段或单击加载更多。
如需查看所有可用字体,请参考 Shopify 字体库。
单击要使用的字体名称。
如果要将字体改为其他样式,如粗体或斜体,请单击 Regular(常规)。下一步,单击您要使用的样式,然后单击选择。
单击保存。
网站图标
你可以上传网站图标 (Favicon), 可以显示在以下位置logo 帮您推广网店品牌:
您的 Web 浏览器标签
您的 Web 浏览器历史记录
桌面上的图标
加入书签后,显示在您的在线商店名称旁边。
上传网站图标:
单击模板设置选项卡。
单击网站图标。
在 Favicon image(网站图标图片)区域,单击选择图片,然后执行以下操作之一:
- 如果要选择已上传到 Shopify 后台图片,请单击库选项卡。- 如果您想从计算机中选择图片,请单击库选项卡,然后单击加号按钮。
提示: Minimal 建议大小为 32 x 32 像素。
单击保存。
社交媒体
您可以在产品和博客文章中添加社交共享按钮,并链接到您的社交媒体账户。
自定义社交媒体设置:
在 Shopify 后台,转到网店 > 模版。
查找 Minimal,然后单击自定义。
单击模板设置。
单击社交媒体。
如需上传社交共享图片,请在 Social sharing image单击选择图片或浏览免费图片(社交共享图片)区域。
如果您想在社交媒体账户中添加链接,请在账户区域提供的字段中输入账户链接。请输入完整的链接,如 https://instagram.com/shopify 或 https://twitter.com/shopify。
指向您的社交媒体账户的链接显示在您的体账户的链接。
在产品和博客文章中添加社交共享按钮,请选择共享选项区域中的任何或所有复选框。
您可以添加以下共享按钮:
- 在 Facebook 上共享 - 在 Twitter 发推文 - Pinterest 上图钉(不能用于博客文章共享)
如需更改共享按钮样式,请在Button style选择 菜单(按钮样式)Fully branded(完整品牌)或 Logo only(仅 Logo)。
单击保存。
备注:若要在产品页面和博客文章上显示社交共享按钮,您还需要在这些页面的分区中启用这些按钮。
结账
在本部分,您可以定制商店的结账页面。单击此处了解商店结账页面的详细信息。
图片提示
产品图片的最佳尺寸
在 Minimal 模板中,分辨率较高的照片看起来更精致、更专业,所以我们建议您至少选择1024 x 1024 像素图片。最大图片可以是 2048 x 2048 像素。
如果要使用放大功能,大图片就显得尤为重要。如果使用此功能,请单击分区选项卡,然后在产品页面分区中使用 Image zoom type(图片缩放类型)设置为 Zoom-in(放大)。
当产品图片并排显示在产品系列页面上时,它们可能会有不同的大小。为了使显示的图片大小相同,您需要使用相同的宽度比来设置所有上传图片的产品图片。
如果您尽最大努力上传高分辨率图片,但产品页面上的主要产品图片仍然太小,请转到模板设置选项卡,然后清除布局分区 Enable wide layout(启用宽布局)复选框。
如果不起作用,请转到分区选项卡上的产品页面分区,并将 Product thumbnail position(产品缩略图位置)设置为 Right of main image(主图右侧)。
网站地图提示
添加下拉菜单
如果您想在主菜单中添加以下菜单,您需要在网站地图页面上创建菜单。本文将向您展示相关操作方法。
产品提示
向产品添加销售徽章
设置高于产品多属性的价格原价。如果产品的销售状态正确设置,徽章将自动显示在产品系列页面的产品图片上。
如未显示,请转到分区选项卡,然后检查产品系列页面分区,仔细检查销售徽章功能是否已打开。
向售罄产品添加售罄产品叠加层
转到分区选项卡,选择在产品系列页面中找到的 Show product sold out circle(显示产品售罄圈)。
主页提示
布局更宽
转到模板设置选项卡,然后在布局分区中选择 Enable wide layout(宽度布局)复选框。
保存变更。(来源:Shopify)
以上内容属于作者个人观点,不代表跨境网的立场!如有侵权,请联系我们。
相关推荐:Shopify Jumpstart详细设置模板教程