Shopify 免费主题之 Boundless 主题使用指南

Boundless(免费)是一款以摄影(图片)优先的主题,具有最小的UI,具有edge-to-edge的摄影功能。 Boundless是移动设备(手机)优先的,适用于大中型库存的Shopify商店。

使用Boundless主题的Shopify在线商店示例


从Shopify主题商店安装Boundless主题

主题编辑器

使用主题编辑器自定义主题。主题编辑器工具栏分为Sections和 Theme settings

主题编辑器工具栏显示Sections和 Theme settings


可以使用sections修改商店中不同页面的内容和布局,也可以使用主题设置自定义商店的字体和颜色,并更改社交媒体链接和结帐设置。

Sections

Sections是可自定义的内容块,用于确定在线商店中不同页面的布局。

  • 主页 sections包括可以添加,重新排列或删除的幻灯片或简报注册等功能,主页上最多可以包含25个部分。
  • 每种类型的页面都有自己的sections。例如,产品页面section 确定在线商店中每个产品页面的布局。
  • 页面sections始终位于在线商店的特定位置,可以自定义它们,但不能重新排列或删除它们。
  • 每个主题都包含固定的sections,如页眉和页脚,显示在您的在线商店的每个页面上。

了解section的独特选择性以及如何根据业务进行自定义。

Boundless主题包括以下静态sections:

  • Header
  • Sidebar menu
  • Announcement bar
  • Slideshow
  • Action bar
  • Footer
  • Product
  • Collection
  • Collections list page
  • Article

动态sections

可以添加,重新排列和删除动态sections以自定义主页的布局。每个主题都有一组独特的动态sections供选择。

Boundless主题包括以下动态部分:

  • Blog posts
  • Collection list
  • Featured collection
  • Image with text
  • Featured product
  • Newsletter
  • Map
  • Rich text
  • Video
  • Custom HTML

标题-Header

大多数主题包括标题部分和页脚部分,显示在商店的每个页面上。 Boundless与其他主题的不同之处在于它不包含主页上的标题部分。相反,主页显示侧边栏菜单和页面顶部的操作栏。要查看和编辑标题部分,请从顶部栏下拉菜单中选择主页以外的任何页面类型。

标题部分包括上传徽标图像和设置自定义徽标宽度的选项。

侧边栏菜单

侧边栏菜单就像是商店的目录。无论客户浏览到网站哪个位置,菜单按钮都会显示商店的主菜单和页脚菜单:

侧边栏菜单显示两个菜单:主菜单(Primary menu)以较大的类型显示在顶部,而附加菜单(Additional menu)以较小的类型显示在主菜单下方。

自定义侧边栏菜单:

  1. 点击 Sections.
  2. 点击 Sidebar menu.
  3. Primary menu 列表中,选择显示为主菜单的菜单。通常,这是商店的主菜单。
  4. 从 Additional menu 列表中,选择在主菜单下显示的菜单。通常,这是商店的页脚菜单。
  5. 点击 Save.

幻灯片

Boundless主题使用全屏或hero幻灯片,因此最好使用大的图像。例如,只要不超过Shopify的上传限制,使用3840 x 2160像素或更大的图像,在主页幻灯片中显示最多6张幻灯片。

Boundless包含几个幻灯片功能,并非所有主题都可用,在幻灯片显示图像的中间上传图像徽标或商店名称,还可以将幻灯片图像应用于颜色叠加。

自定义商店幻灯片:

  1. 点击 Sections
  2. 点击 Slideshow.

添加图像幻灯片:

  1. 在 Content 区域,点击 Image.
  2. 若要将图像添加到幻灯片,则点击Select image,然后执行以下操作之一:
    • 要选择已上传到Shopify后台的图片,则点击Library选项卡。
    • Shopify的Burst stock图像集中选择图像,点击Free images选项卡,可以在此处输入搜索词,或浏览图像类别。
    • 要从本地计算机中选择图像,则点击Library 选项卡,然后单击加号按钮。

要在图片幻灯片上显示商店的名称:

  1. Logo区域中,点击Text color颜色样本以从调色板中选择文本颜色。
  2. 从Logo type列表中,选择Store name text,商店名称将自动显示。

要在图片幻灯片上显示商店的logo:

  1. Logo区域,从Logo type 列表中,选择Custom logo.
  2. 在 Custom logo image 区域,点击 Select image 然后执行以下操作之一:
    • 要选择已上传到Shopify后台的图片,则点击 Library选项卡。
    • 要从本地计算机中选择图像,请单击Library选项卡,然后单击加号按钮。
  3. 在Logo width (in pixels) 字段中键入logo宽度。

要将幻灯片图像应用于幻灯片显示:

  1. Overlay区域中,单击 Image overlay color以从调色板中选择颜色。
  2. Opacity列表中,选择图像叠加层的透明度百分比。

体验Boundless主题幻灯片功能

操作栏

默认情况下,操作栏显示商店的主菜单,可以自定义操作栏,以根据客户所查看的页面显示不同的项目。在主页上,操作栏通常用于显示产品集合。在集合中,操作栏可以显示更多子类别或其他相关集合。

例如,如果是销售服装的店铺,操作栏可能会在主页上显示MenWomen 和 Accessories 。如果客户点击 Women,则操作栏可能会在集合页面上显示 TopsPants和 Footwear

要使操作栏以这种方式工作,则使用主菜单链接到collections。在页脚菜单中放置链接到商店的其他部分(Contact or About页面)。

要自定义操作栏:

  1. 点击 Sections 选项卡
  2. 点击 Action bar.
  3. 从 Menu 列表中选择要在操作栏中显示的菜单
  4. 点击 Save.

页脚

使用Boundless主题,可以在页脚内容中显示菜单。

提示

建议在商店的侧边栏菜单和商店的页脚中显示页脚菜单。

要自定义商店的页脚:

  1. 点击 Sections 选项卡
  2. 点击 Footer.
  3. 从 Menu 列表中选择要在页脚中显示的菜单。
  4. 点击 Save.

产品

Product 部分中,可以添加或删除以下元素:

  • 产品品牌或供应商
  • 数量选择器
  • 社交分享图标
  • 动态结账按钮

可以跳过第一个产品图像,设置图像的样式,并选择产品表单的宽度。

要编辑产品页面的设置:

1、从顶栏下拉菜单中,选择 Product pages
2、点击Sections.
3、点击Product.
4、要想跳过第一个产品图像,则选中Skip first product image。这意味着第一个产品图像仅显示在 collection页面上,而不显示在产品页面上。使用此选项,可以设计第一个产品图像,使其在collection页面上看起来效果最佳,并定制其他产品图像,这样图片显示在产品页面上提供的更大空间中,看起来效果更佳:

  1. An example showing the collection page with the first product image and product page with the second and third product images

5、要设置图像样式,请从Image style下拉菜单中选择Tall/squareWide
6、要显示产品品牌或供应商,请选中Show vendor。要展示品牌或供应商,需要向产品添加供应商。
7、要显示数量选择器,请选中Show quantity selector
8、要显示社交共享图标,请选中Enable product sharing
9、要显示动态结帐按钮,请选中Show dynamic checkout button
10、要设置产品表单的宽度,请从 Product form width 下拉菜单中选择SmallLarge
11、点击 Save.

体验Boundless主题产品管理功能

集合

Boundless包括collection页面的多个排序和过滤,外观和分页选项。

  1. 在主题 preview,打开collection页面
  2. 点击 Sections
  3. 点击Collection.
  4. 在 Appearance区域,设置如下选项:
    • 从 Image style 列表中, 选择产品图片的图片方向,Tall/square 或者 Wide.
  • 从 Image siz列表中,选择图片大小
  • 如果要增加图像之间的间距,则击 then check Add spacing between images.
  • 如果您想在产品图片下方显示供应商或品牌名称,则点击Show product vendor.
  1. 在 Sorting & filtering区域,设置如下选项:
  • 如果要显示排序选项列表,则点击 Show sorting options.
  • 如果要显示允许客户按标签过滤的列表,则选中 Show tag filtering.
  1. Pagination区域,从 Pagination type 列表中, 选择是否要显示编号页面或“View more”按钮
  2. 点击 Save.

特色集合

在主题编辑器的Featured collection部分中,Image style选项可让您更改集合和产品页面显示图像的方式:

  • 如果产品图像是正方形或纵向,则高/方形最好
  • 如果图像是矩形或横向,则宽度最佳

Image size选项可确定产品图像在馆藏页面上的大小。如果显示小型产品图像,则可以在一行中放入更多图像。

每行显示的图像数量还取决于客户的设备(桌面或移动设备)和窗口大小。

  1. 点击Sections选项卡。
  2. 点击Featured collection部分。
  3. Collection列表中选择一个集合。选择的集合中最多可显示50个产品。
  4. Image style”列表中,选择是要将图像设置为“高”还是“方形”还是“宽”。
  5. Image size列表中,选择图像大小。
  6. 要增加产品图像周围的间距,请选中Add image spacing
  7. 要显示产品供应商或品牌名称,请选中Show product vendor
  8. 点击Save

Newsletter

可以在主页上添加简报注册。这样可以收集客户电子邮件地址来进行电子邮件营销活动,在Shopify博客上了解有关电子邮件营销的更多信息。
The newsletter section on a website. There is a field for customers to enter an email address and a button that says 'Subscribe'.
要将简报注册添加到主页:

  1. 从Shopify后台处,转到Online Store > Themes
  2. 找到Boundless并点击Customize
  3. 点击Sections
  4. 点击Add section > Newsletter
  5. 在标题字段中输入简报注册的标题。默认标题是“订阅我们的新闻通讯”。
  6. 在“子标题”字段中输入新闻稿注册的子标题
  7. 点击Save

富文本-Rich text

使用Rich text部分提供要在主页上显示的任何书面内容,或嵌入在Shopify管理员中创建的任何页面。例如,可以通过嵌入博客页面来展示即将举办的活动,或者显示包含以下任何内容的页面:

  • 来自您的在线商店的嵌入视频
  • 包含商店位置的Google地图
  • 商店的联系信息。
  1. 点击 Sections选项卡。
  2. 点击Rich text
  3. 输入并格式化文本。
  4. 如果要显示商店中的页面,请点击Add content,然后点击Page。从下拉菜单中选择要作为主页的功能页面。
  5. 点击Save

视频

您可以将YouTube或Vimeo上托管的视频添加到您的主页,视频可以给您的网店吸引大量的客户。

将视频添加到主页:
1、从Shopify后台处,转到Online Store > Themes

2、找到Boundless并点击Customize

3、点击Sections

4、点击Add section > Video

5、在标题字段中输入视频的标题。

6、在视频链接字段中输入视频的共享链接。

YouTube共享链接如下所示:https://youtu.be/OTJXAUZY9t0。您可以在此YouTube帮助文章中了解如何复制YouTube视频的共享链接.

Vimeo共享链接如下所示:https://vimeo.com/281332510。您可以在此Vimeo帮助中心文章中了解如何复制Vimeo视频的共享链接。

7、点击Save

自定义HTML

Custom HTML部分中,可以使用HTML代码为主页创建自定义内容。例如,使用HTML格式化文本块,创建表或嵌入来自第三方网站的内容。

要在主页中添加自定义HTML:

1、从Shopify后台处,转到Online Store > Themes

2、找到Boundless并点击Customize

3、点击Sections

4、点击Add section

5、在Advanced layout区域中,点击Custom HTML > Add

6、点击Custom HTML,然后输入要添加到主页的HTML代码。

7、点击Save

发表评论

error: Content is protected !!
zh_CN简体中文