第一部分：基础设置

1.1 品牌设置:

以下内容会在第二部分的“页面装修”中用实际案例详细演示，包括 Logo 上传、配色方案选择和具体效果调整，建议先了解这些概念，再跟着实操一步步完成。

1.1.1 Logo上传:

店铺的 Logo 是整个网站的重要视觉元素，建议先上传并调整好大小。

通常 Logo 不能直接在标头模块里改，需要点击标头 → 设置，进入模板设置界面。

在这里选择 Logo 图片上传，调整大小和显示位置，如果你有网站图标（favicon），也可以一并上传，注意尺寸要固定在 32×32px，这样在浏览器标签页显示才清晰。

1.1.2 配色设置

网站的配色最好控制在两到三种颜色，保证页面简洁统一。

我们参考 BIBA 的网站，采用了红色和黄色的主色调，再配一个辅助色用在按钮上。

在 Shopify

1.1.3 标语和社交媒体

建议在模板设置里填写店铺标语和品牌描述，方便主题调用，让网站更有统一感。

同时，在“社交媒体”里添加各个平台的链接（如 Facebook、Instagram），让客户可以直接跳转到你的社交账号。

注意，有些主题需要在页脚单独勾选显示社交图标，才能在页面上看到。

1.2 导航设置调整网站主导航和页脚导航菜单。

打开Shopify的后台，在“内容”–“菜单”页面，打开Shopify导航设置页面，如下图所示：

这里相当于是你店铺里所有导航链接的集中管理区。

无论是网站顶部的菜单、底部的页脚，还是顾客账号页面侧边栏的链接，都能在这里统一查看和调整。

你可以很方便地新增、修改或重新排列导航菜单。

菜单和主题其实是分开的，你在后台建好的主菜单、页脚菜单或其他自定义菜单都会一直保留。

换新主题也不用重新做，只要在新主题里把这些菜单重新指定到页头、页脚等位置就行。

新主题自带的那些演示菜单也会出现在后台，你可以随意改或删，不会影响主题本身。

左边这一列会显示你所有的菜单组，你可以有好几个菜单组，用在网站不同的地方。

比如主菜单一般放在网站顶部，页脚菜单放在底部，客户账户菜单是用户登录后在个人页面看到的。

还有一些像 Top Categories、Shop 这样的菜单，是主题预先帮你建好的演示菜单。

想改内容的话，直接点菜单名字就能编辑。

如图所示，当前菜单里已经有的 5 个链接：HOME、NEW、SHOP、SALE、ABOUTUS，这些基本就是现在网站顶部导航栏显示的内容。

想加新链接的话，点蓝色的‘添加菜单项’按钮就行。会弹出一个小框，让你填菜单名字（就是显示给顾客看的文字，比如 Contact），然后选链接要跳到哪里。

链接可以选产品系列、单个产品、页面（比如 About Us）、博客文章、店铺政策，或者直接填一个自定义网址，比如社交媒体链接。

如果想让导航更专业，可以用下拉菜单做 多级菜单 。

操作很简单：按住菜单项前面的小六点图标（比如新建的 shipping policy），然后往右拖一下，它就会缩进，变成上面那个菜单的子菜单。

比如可以把 privacy policy、terms of service 都拖到 about us 下面，这样顾客把鼠标放在 about us 上，就能看到这些二级菜单选项。

二级菜单在前台的效果如下图，如果还想再细分，还可以在二级菜单下面继续加三级菜单，让导航结构更清晰。

有时候你可能只想 在菜单栏里放一个文字，不让它跳转到任何页面。

这时就点‘添加菜单项’，在链接那一栏输入‘#’，名字填你想显示的文字就行。

设置好后，比如把 NEW 做成这样的菜单（如下图），顾客点它的时候不会跳走，只会展开下面的产品系列选项。

在前台的显示效果如下：

Shopify 前台不显示菜单？

很多人会遇到这种情况：后台菜单都建好了，但网站顶部还是没显示。

这其实很正常，因为光创建菜单是不够的，还要把它分配到主题里对应的位置。

正确的流程是：

1. 先在‘菜单’页面把主菜单结构建好。
2. 进入 在线商店 → 主题 → 自定义 。
3. 在主题编辑器里找到‘页头 (Header)’设置，把‘主菜单’选成你刚刚创建好的那个菜单。

完成后记得点右上角的‘保存’，再去网站前台刷新页面看看效果，通常马上就能看到。如果没显示，最好对照一下主题说明文档，确认有没有选对位置。

设置页脚 其实和网站导航很像。先把之前建好的 Policies 页面、About Us、Contact Us 等页面都准备好。如下图：

如果底部只有一个菜单组，就直接把这些链接加进去就行，跟头部菜单操作一样。

如果想把底部分成两列或更多列，可以先在后台多建几个菜单组，然后回到主题编辑器，给页脚这个分区添加新的‘菜单块’，把不同菜单组分别放进去，就能分栏显示了。

如果还不够用，还可以再添加一个新的‘分区’，给页脚多加一整块区域。用不到的菜单块或分区也能随时删除，让页面保持整洁。

Shopify 的 URL 重定向功能 能把旧网址自动跳到新网址，比如产品改名或下架时，顾客点旧链接就会直接去到新的页面，不会看到 404。

常见用法有：给改名的产品、改版后的网站链接做跳转，或者用短链接替换长链接。

后台设置也很简单：去内容 → 菜单 → URL 重定向，添加旧网址和新网址，保存就能生效，而且是 301 重定向，对 SEO 也友好。

其实 URL 重定向还能当成我们自己的短链接工具 。

比如在‘重定向来源’这里，填一个好记的词 /promo ，那你的短链接就是 你的域名/promo 。

然后在‘重定向到’里粘贴你要推广的真实链接，比如某个新品页或活动页。

保存之后，客户访问你的短链接就会自动跳转到那个完整链接。

这样既方便分享，又显得更专业，不用依赖外部的 Bitly 之类工具。

第二部分：页面装修 – 模块化搭建

2.1 参考同定位店铺的装修方案

在进行店铺装修之前，我们可以在Google上搜索产品相关的Shopify店铺，先参考竞争对手的店铺装修

在Google搜索“Top Women’s Clothing Brands”

我们点击几个店铺进入浏览

我们可以看到， 女装类店铺的装修基本都是 以图片为主 ， 大片的图片堆积镶嵌 ， 形成强大的视觉冲击感 ， 让人瞬间产生了购买欲望 ，我们根据自己的需求选择一个较为喜欢的店铺，再按照它的装修思路去对我们的店铺进行设计

假设我们想要仿照这个BIBA的店铺进行装修，接下来我将为大家介绍下具体的装修步骤

我们点击几个店铺进入浏览

2.2 了解界面交互逻辑

在搭建在线商店时，我们首先会面临模板的选择。当进入在线商店的模板选择界面，会看到一个名为 Dawn 的默认模板。

Dawn 默认模板因其使用范围广泛而备受关注。若对该默认模板不满意，可 前往模板商店购买新模板 。不过，在此我们以 Dawn 默认模板为例来讲解店铺主题设置及装修，毕竟它是使用范围最广的模板之一。

需要注意的是， 由于 Shopify 商店后台模板存在一定的限制性，我们 无法对既有控件进行特殊的位置和大小更改 ， 仅能够对新建控件进行相关设置

在开始进行店铺装修操作之前，我们需要了解界面交互逻辑。

接下来，点击自定义按钮，即可进入商店装修后台。

我们能够清晰地看到这里共分为三大板块： 左侧的菜单具备 添加组件 的功能，中间区域是 装修效果的展示区域 ，而右侧菜单则可用于 对单个组件进行修改 ，图中所呈现的正是各板块在修改页面时的操作逻辑。

如果你只看到左边模块栏和中间预览区，多半是屏幕太窄，右侧设置栏被自动隐藏了。试试把浏览器拉宽，或者把缩放调到 80%-90%，一般就能显示出来；如果还是没有，可以点左上角齿轮图标，看能不能把设置栏展开。

在首页的模板中，总共有17个模板分区

特色产品系列

在搭建网站页面时， 特色产品系列 是一个非常实用的模板分区，它能够让你 突出展示一个特色系列下的特色产品 。

添加该模块之后，可以在右侧的菜单中对标题、描述以及展示的产品数量和列数进行修改，同时，还可以设置按钮的样式

在首页的模板中，总共有17个模板分区

特色产品

特色产品模板分区专注于 展示单个被选定的产品 ，它的优势在于能够 将某一款产品单独展现出来，而不会被其他产品系列所干扰。

而且，这个模块还允许在其下再添加其他模块

大家可以自行探索并了解其功能，基本都非常简单，所以不做过多赘述

这里重点谈论一下 带文本的图标模块 ，这个模块非常 适用于展示独具特色的产品，并且提供了美观的图标帮助客户对产品发起交互

特色产品系列表

如果你有多个产品系列需要展示，特色产品系列表就派上用场了

它可 以轻松地添加和放置多个产品系列，并且展示的图片是你在产品系列中预先添加好的图片

这样，用户可以一目了然地看到你所提供的不同产品系列，快速找到自己感兴趣的类别

⭐界面交互逻辑以及特色产品和产品系列设置视频教程

页面交互逻辑以及特色产品和产品系列设置.mp4

4.富文本

富文本模块是一个功能强大的工具，它包含文本和按钮，常 用于做赘述性的文本展示 。在这个模块中，你 可以根据内容的重要性和层次，设置不同大小的文本

不同文本的大小不一，其中， 字幕作为最小的文本元，可以用来突出一些关键信息或者小标题 ，让整个文本内 容更加有条理和易读

5.带文本的图片

带文本的图片模块能够 将图片与相关文本完美结合，打造出图文并茂的板块 。这种展示方式非常直观且富有吸引力，能够让用户在欣赏图片的同时，快速获取相关信息。

6.图片横幅

图片横幅模块主要用于单个图片的展示，并且还可以在图片之上添加按钮和文本内容，为图片赋予更多的功能和信息。

虽然右侧菜单中显示可以设置两张图片，但实际操作后会发现两张图片会被并列在一起，从而导致尺寸发生改变。

在使用时，你可以根据具体需求来选择合适的图片和设置。

7.幻灯片

幻灯片，也就是我们常说的 轮播图 ，是一个能够吸引用户注意力并展示多张图片的好工具。它可以放置多张图片轮换展示，你可以自由地在右侧设置轮播时间。

需要注意的是，更换时间的最小单位为秒，最小为 3 秒。在实际应用中，你可以根据图片内容和想要传达的信息来合理设置轮播时间。

比如，如果图片上的文字信息较多，或者图片展示的是一个复杂的产品细节，你可以将轮播时间设置得稍长一些，让用户有足够的时间去阅读和欣赏；而如果图片主要是一些简单的视觉元素或者快速切换的场景，较短的轮播时间可以营造出一种动感和活力的氛围。

8.拼贴画

拼贴画模块有着其独特的逻辑，它 不具备添加其他块的功能，但可以通过特定的方式展示图片 。

例如，你可以将一组相关的图片按照某种主题或风格进行拼贴，形成一个整体的视觉效果。

9.多列

多列模块主要 用于展示多个文字赘述 ，通常适用于展示网页的政策协议等内容。它可以将冗长的文字内容分成多列显示，使页面看起来更加整洁和有条理， 避免用户面对一大段文字时产生视觉疲劳和阅读压力。

比如，在一个电商网站的购物页面，你可以用多列模块展示退货政策、隐私政策、服务条款等内容，每一列清晰地呈现一个政策的要点，方便用户快速浏览和查找自己关心的信息。

这样的布局方式不仅 提高了信息的可读性，也让用户能够更轻松地理解和接受网站的相关规定和条款

10.多行

多行模块并非以行为单位展示多个图片，而是 提供了一种自由展示图片和文字的方式 ，并且可以在右侧菜单中自由粘贴想要跳转的按钮链接。

这使得它在页面布局和内容展示上具有很高的灵活性。例如，在一个产品详情页面，你可以用多行模块展示产品的不同角度图片，同时在旁边配上简短的文字说明

如 “产品正面展示”“产品细节特写” 等，并且为每个图片或文字添加链接，链接到放大查看图片、产品参数介绍等相关页面，让用户能够根据自己的兴趣和需求自由点击和浏览，增强用户与页面的互动性和体验感。

11.可折叠内容

可折叠内容模块是一种 非常适合长赘述文字的展示方式 ，它采用展开即全览的模式，能够让界面在初始状态下保持简洁美观， 避免过多的文字占据大量页面空间

当用户需要查看详细内容时，只需点击展开即可。

而且，在右侧菜单中，你还可以自由选择图标，使可折叠内容的外观更加个性化和符合页面整体风格。

比如，在一个知识分享网站上，对于一些长篇的文章或教程，你可以将其设置为可折叠内容。

初始状态下只显示标题和一小段摘要，用户如果对该内容感兴趣，点击展开后就能看到完整的文章内容。

同时，你可以选择一个与知识、学习相关的图标，如书本、灯泡等，作为可折叠内容的标识，让用户更容易识别和操作。

12.电子邮件注册信息

电子邮件注册信息窗口是网站与用户建立联系的重要渠道之一。

这个模块只可以添加文字和固定的注册框内容，但简洁明了的设计能够让用户快速理解其功能并进行操作。

例如，在一个博客网站的侧边栏或者底部，你可以放置电子邮件注册信息模块，添加一些吸引人的文字，如 “订阅我们的博客，获取最新文章和独家内容，直接发送到您的邮箱！”

然后配上一个简洁的注册框，让用户输入邮箱地址即可完成注册。

这样，你就可以 通过电子邮件与用户保持沟通，定期向他们推送有价值的内容，增加用户的粘性和忠诚度

13.联系表

联系表作为一个固定的模板，虽然只能更改标题内容，但它在网站中起着至关重要的作用，是用户与网站管理员或客服进行沟通的桥梁。

你可以根据网站的主题和风格，设置一个合适的标题，如 “联系我们”“客户服务” 等。

在实际应用中，无论是企业网站、个人博客还是电商平台，都需要一个清晰易找的联系表，让用户在遇到问题或有合作意向时能够方便地与你取得联系。

例如，在一个企业官网的 “联系我们” 页面，除了展示联系表，还可以搭配地图、办公时间等信息，为用户提供全面的联系信息和指引。

14.视频

视频模块为网站增添了多媒体元素，使内容更加丰富和生动。Shopify 支持本地视频文件上传和通过 URL 嵌入视频，其中在嵌入视频处理中，还支持自定义封面图片。

这为你提供了多种展示视频的方式。如果你有自己制作的高质量视频内容，如产品演示视频、品牌宣传视频等，可以直接上传到网站，确保视频的播放流畅和画质清晰。

而 通过 URL 嵌入视频 则更加灵活，你可以嵌入来自其他平台的相关视频，如 YouTube、Vimeo 等，丰富网站的视频资源。

自定义封面图片的功能也很实用，你可以选择一张吸引人的图片作为视频的封面，在用户未点击播放视频时，就能通过封面图片吸引他们的注意力，激发他们观看视频的兴趣。

例如，在一个健身网站上，你可以上传一些专业教练的健身教学视频，并设置一张展示教练健硕身材和活力动作的图片作为封面，让用户一眼就能感受到视频的价值和吸引力。

15.博客文章

博客文章模块点击选择之后，可以进入博客选择窗口

但需要注意的是，这个板块属于 Shopify 商店后台，也就是说，不支持接入外链，而是需要你在 Shopify 后台自行添加博客文章内容。

这意味着你 需要在 Shopify 的后台系统中精心创作和管理你的博客文章

例如，如果你经营一个美妆电商网站，你可以在后台撰写关于美妆技巧、新品试用、护肤心得等方面的博客文章，然后通过这个模块将相关的博客文章展示在网站的合适位置，如首页的推荐区域或者专门的博客页面。

这样不仅可以为用户提供有价值的内容，增加用户在网站上的停留时间，还能提升网站的搜索引擎优化（SEO）效果，吸引更多的流量。

16.自定义Liquid

Liquid 是 Shopify 创建的模板语言 ，它是 GitHub 上的一个开源项目，被许多不同的软件项目和公司使用

这个板块不同于之前的简单添加更改的操作，它涉及到一定的编程代码问题。

如果你具备一定的编程知识和技能，可以利用 Liquid 来实现更加个性化和复杂的功能和页面效果,我们不做赘述

17.页面

页面模块是一个相当特殊的功能，添加这个模块之后，你 可以在原页面中嵌入其他页面

从右侧菜单中，你可以看到，可选的页面就是 Shopify 后台中存在的页面。

这为你在构建网站页面结构和内容展示方面提供了很大的灵活性。

比如，你可以在一个产品详情页面中嵌入一个关于该产品的常见问题解答页面，或者在一个活动页面中嵌入一个报名表单页面，让用户在浏览当前页面的同时，能够方便地访问到相关的其他页面内容，而无需在多个页面之间来回切换，提升用户的浏览体验和操作效率。

2.3 主页 (Homepage) 装修

2.3.1 参考模板分析：

我们本次教程以BIBA网站为参考模板，帮助大家装修出像BIBA一样的店铺效果

首先观察下界面的主要设计板块：分别是由一个巨大的 轮播图 ，往下是 系列的产品图片 ，也就是说，BIBA 罗列了大量的特色产品系列堆叠在主页

整个网站以红色和白色为主，简洁大方

配色设置

在商店装修的过程中，对于网站的配色也是需要严格把关的， 我们推荐最好网站的配色 不要超过三种 ， 选用两种最为适宜

我们的教程展示参考BIBA的网站首页，只使用三种颜色

按钮配色参考

我们在模板设置的颜色中，分别添加一下BIBA的配色方案

红色背景配色方案

黄色背景配色方案

按钮的配色方案

设置好之后退出即可，Shopify会帮助我们自动保存

2.3.2 标头(Header):

在左边点“标头”，就能看到 Logo、菜单、搜索框、公告栏这些设置，如下图：

选好导航菜单

找到“菜单”-“选择”，在这里把导航栏的链接设置成你需要的，比如：HOME NEW SHOP SALE ABOUT US（about us也可以放在页脚），分别对应网站首页、新品页、商店页、促销页、关于我们。

对于还没开发好的页面，可以先暂时链接到“所有产品”页面，后续再更新。

设置好后点保存，再刷新前台，就能看到导航栏更新。

参考：

前文中有提到过， 由于 Shopify商店后台的模板限制性 ，我们是 无法对既有控件进行一些特殊的位置和大小的更改的，只能够对新建控件进行设置

所以理论上来说，我们是无法设置得和BIBA的网站一模一样的，我们只能尽可能相似的去模仿

我们点击标头部分，然后在右侧查看到菜单，再次点击“选择”

点‘创建新菜单’后，Shopify 会自动跳到菜单管理界面。

如果你之前已经建好菜单了，这里只要选一下或替换成对应的菜单就行；如果之前没建过菜单，也可以直接在这个页面新建，操作一样方便。

我再简单重复一下步骤。我们按照 HOME NEW SHOP SALE ABOUTUS 依次填入。

对于还未开发出的页面，我们先暂时选择默认的 所有产品 界面。

设置好之后，我们点击保存即可。

如果对标头部分的尺寸不满意，我们可以在旁边的分区填充处进行尺寸的修改

但由于Shopify对模板的限制，我们是无法单一更改PC端或者手机端的填充大小的，更改后PC端和手机端都会直接被统一更改

上传logo

进入“模板设置”，点 Logo 设置，上传店铺 Logo，调好大小和位置，让它居中或居左显示。

不同主题上传 Logo 的位置可能不一样，有的直接在左边的‘标头’里就能传，有的要点进‘模板设置’或‘主题设置’，找到‘Logo’或‘品牌’再上传。

传好后记得点保存，然后去前台刷新看看效果，如果没显示，可以检查标头有没有开‘显示 Logo’，或者把尺寸调大一点。

加点小功能

很多主题（比如 Dawn）都会自带搜索图标和购物车图标，不用你手动添加，页面上就能直接看到。 如果换了主题发现没有显示，可以去 标头设置 看看有没有“启用搜索”或“启用购物车”的开关，打开就行； 实在找不到开关，可以升级主题版本或换成支持这些功能的主题。

你还可以加一个公告栏来显示促销信息。点‘添加分区’，选择‘公告栏’。

我们的基础公告栏是一个简单的欢迎词：Welcome to our store。

而BIBA的网站做了一个折扣展示（还剩最后 2 天 – Eoss 预览：新到货品 8 – 7 折优惠），并且链接到了折扣的商品界面。

我们先仿照BIBA的网站，添加一个和他一样的文字内容，之后我们做好了产品界面，再做一个链接到上新促销产品界面。

首先点击公告栏，然后再点击左边的文字部分。

然后在右侧粘贴我们复制好的文字。

粘贴好之后，再次点击公告栏，进行配色部分的更改。

在右侧选择我们的配色方案。

应用好之后，可以看到公告栏部分已经被我们更改好了，只差后续的链接配置而已。

设置完成之后，我们会发现公告栏的底部有一个深色的线条。

如果觉得它不太美观，想要隐藏它也非常简单，我们直接点击显示分割线中的按钮，进行隐藏即可。

2.3.3 模板:

然后是模板部分的设置，我们分析BIBA的网站主页，可以看到它这部分的结构依次是：

轮播图-系列产品展示-为您推荐-促销海报展示-特色系列展示 ，那么我们依次按照这个流程为大家讲解。

2.3.4 主体内容:

1.轮播图

我们先 准备好3张较有自身产品特色的轮播图，

由于自带模板中的第一个模块是图片横幅而不是轮播图，我们需要选择添加分区，然后添加幻灯片选项。

添加好之后，我们可以看到模板自带两张幻灯片可以设置进行轮换，但是我们需要三张图片进行轮换。

我们移动鼠标到第二张图片处下面，直到页面显示出 添加幻灯片 选项，点击 添加 幻灯片 即可。

然后我们点击第一个幻灯片，进入设置。

点击右侧的选择按钮，进行幻灯片的添加。

添加好之后我们可以看到界面上还有一个图片标题的容器窗口，由于我们的图片上已经放置好了所有文字元素，我们不需要这个窗口的展示，那么只需要在右侧依次点击操作即可。

（教程只做展示，在制作图片时，图片上的文字需要根据销售市场进行设置，例如我们做的是跨境电商，图片中的语种需要选择英语。）

然后我们依次操作，上传三张幻灯片作为轮播图。

上传好之后，我们点击幻灯片，可以在右侧对整个幻灯片的样式做一些调整和设置。

2.特色产品系列

下一个部分是多个系列的产品图片，我们首先分析下BIBA的界面结构，看下我们需要添加哪些组件。

分析后可以发现，BIBA的网站总共放置了五个板块，分别为 四个特色产品系列列表和一个特色产品系列 ，我们依次对其进行仿照设计。

2.1添加第一个板块

我们选择添加产品系列列表模块。

我们首先在标题处打上空格隐藏标题。

按照BIBA的网站设计，将产品调整成展示五个。

再调整一下分区填充的数据。

然后再依次对产品系列列表做设计，这一步需要我们先选择需要更改的产品系列，然后在右侧产品系类点击选择按钮。

然后设置我们的产品系列1，由于我们的图片都是处理过的，记得在图片比这里选择适应图片，保留我们的图片格式和尺寸。

需要注意的是，我们 需要先在后台设置产品系列的内容，在这个部分才可以进行产品系列内容的选择和更改。

我们可以看到添加完之后，我们的界面上黑色的产品系列名称的文字非常突兀，但是 由于模板限制，这些文字是不能隐藏的，我们只能在配色方案中，将文字修改为白色，从而达到隐藏产品系列名称文字的效果

2.2添加第二个板块

然后按照BIBA的网页格式，再添加两行三列的产品系列列表。

都设置好之后，可以看到展示为这样：

可以看到我们的网站与BIBA的主页部分已经基本一致了。

2.3添加第三个板块

接下来继续做下一部分，产品系列展示。

我们点击添加分区→特色产品系列

然后更改一下标题名称

然后点击产品系列→选择

为了与BIBA保持一致，我们取消查看全部按钮

然后再调整一下填充格式和分区大小

2.4添加第四个板块

再添加一个产品系列列表

在左侧删掉不需要的产品系列，只留下一个

去掉标题

点击产品系列图片，在右侧的产品系列-》选择 选择自己想要插入的产品系列

然后在右侧的图片比中选择 适应图片

更改文字颜色配色方案，以及分区填充数值

2.5添加第五个板块

我们选择 添加分区-》特色产品系列

更改标题，点击 产品系列-》选择

设置好之后查看一下，由于模板的限制性，我们无法做出像BIBA一样的可滑动效果，但已经基本一致了

在这里为了美观性，我们建议大家取消查看全部按钮

在做完之后，我们发现 只摆放这四个产品的话，对于整个网页的格式有些突兀，那么我们可以在右侧菜单中更改一下需要展示的产品数量

按照图示，将这两个数据都改成 5 即可

2.3.5 页脚(Footer):

我们先分析下BIBA的页脚部分的结构

分别是由 电子邮件订阅框、BIBA相关政策展示，以及一个页面底部的导航栏组成的

模板中的页脚部分是自带了一个电子邮件订阅框的，我们可以直接对它进行编辑，但是由于模板的限制性，我们只能对颜色和文字进行更改，但 我们可以隐藏电子邮件订阅框的文字，然后放置一个文字块代替他

我们先隐藏文字

然后在左侧菜单中选择添加文本

我们仿照BIBA进行文字内容的编辑

然后我们再添加一个空白的文本模块，使得这部分的画面更美观

设置导航链接 （如Contact, About Us, Policy等）：如图，点‘添加块’，再选‘菜单’就行，然后在右侧设置“标题”，选择需要显示的菜单。

添加社交媒体链接与图标： 想在页脚加 Facebook、Instagram 这些图标很简单，直接去 “模板设置” → “社交媒体”，把你的账号链接填进去就行。保存后，图标就会自动显示在页脚。

2.4 关键页面装修策略

2.4.1 新品(NEW)页面:

在前文中我们提到过：

这时我们就需要回到Shopify商店设置后台，选择在线商店→页面中添加界面。

在后台先把你需要的页面都建好，比如 NEW、SALE、ABOUT US。

建的时候注意选模板，如果想让这些页面长得不一样，就要给它们选不同的模板或者新建一个专门的模板。

不然的话，改了 NEW 页面，SALE 页面也会跟着一起变，因为它们用的是同一个模板。

模板样式的添加在商店编辑后台中，需要先点击主页——页面

再点击页面中的创建模板即可

然后再回到网站导航中，将界面指向的跳转界面一一更改成我们需要设计的界面

我们点击内容-》菜单-》网站导航

然后进入进行修改

我们观察BIBA的界面可以发现，BIBA的NEW、SHOP这两个界面其实是相差不大的，都是产品的展示，只是NEW界面是已经被提前选择了NEW标签来展示的产品界面

所以我们并不完全仿照BIBA的设计，而是用一个产品系列产品来展示NEW的产品

当然，如果你想要参考BIBA的设计，也是可以的

调整页面

页面展示过于宽大，不够美观，我们直接隐藏这个部分，自己添加一个页面标题

点击小眼睛，隐藏页面模块

图片横幅展示上新活动

我们点击添加分区-》图片横幅

如果我们有多个上新活动，可以选择添加幻灯片进行展示

我们添加一张图片展示，然后隐藏掉文字

再添加产品展示

添加分区-》特色产品系列

更改标题和产品系列，请注意，在这里我们一定要提前定义好一个属于上新的产品系列来做展示

再调整一下需要展示的产品数量，让界面更加美观

这样，我们就完成了NEW界面的界面设计

2.4.2 促销(SALE)页面:

SALE界面的设置，主要是做完售产品的展示，我们对其定位和逻辑设置和NEW界面一致

（NEW界面是已经被提前选择了NEW标签来展示的产品界面）

所以，我们将对于NEW界面的设计照用在SALE界面，操作和之前一样，依次添加图片横幅展示完售系列和完售产品展示即可

图片横幅展示完售系列

我们点击添加分区-》图片横幅

如果我们有多个上新活动，可以选择添加幻灯片进行展示

我们添加一张图片展示，然后隐藏掉文字

再添加产品展示

添加分区-》特色产品系列

更改标题和产品系列，请注意，在这里我们一定要提前定义好一个属于上新的产品系列来做展示

再调整一下需要展示的产品数量，让界面更加美观

2.4.3 关于我们(ABOUT US)页面:

页脚其实就是网站的“底部导航”，用户滑到最下面想找帮助，基本都靠它。

像 Nike 这样的品牌，会把关键入口都放在页脚：比如订单状态、配送方式、退换货、付款方式和联系客服，方便用户解决售后问题；还会有企业团购、会员注册等营销入口，以及新闻、投资者关系、招聘等品牌信息，满足不同用户的需求。

这样一来，不管用户是来购物、查政策，还是了解品牌，都能快速找到要去的地方。

但新手店铺没必要搞这么全，先保证最基础的就行：

一是品牌介绍或者链接到 About Us，让客户知道你是谁；

二是必要的政策，比如隐私政策、退换货规则、服务条款，这些能提高信任；

三是联系方式和社交媒体跳转，方便客户找你、关注你；

如果有精力，还可以加个邮件订阅框收集用户邮箱。

这样既能显得专业，也不会把页脚搞得太复杂。

接下来我们重点讲一下 About Us 和 Our Story 这两个页面的装修和内容

第一步：创建 About Us 页面

• 后台 → 在线商店 → 页面 → 添加页面
• 标题写 “About Us”
• 内容可以包括：品牌介绍、品牌故事（Our Story）、联系方式、政策链接（如下图）

“Privacy Policy”“Refund Policy”“Terms of Service”可以直接写文字，也可以在 Shopify 的编辑器里选中文字添加链接，跳转到对应的政策页面。

第二步：决定要不要单独做 Our Story

如果想更突出品牌故事，可以再建一个页面叫 “Our Story”

写品牌故事时，可以按这个思路来：

先介绍品牌创立的起因和初心，比如“我们发现市面上缺少好用又环保的××，所以决定自己做”。

接着介绍团队，用几句话让人感受到你们的个性，比如是年轻活力、极简主义，还是手工爱好者团队，让客户觉得“你们和我是一类人”。

然后讲品牌使命和愿景，说清楚想帮客户解决什么问题、创造怎样的生活方式，让人有代入感。

可以顺带提一下品牌价值观，比如坚持可持续、支持本地生产、追求极简设计，让用户认同你的理念。

最后要和客户建立联结，可以写“我们希望和你一起探索”“欢迎加入我们的社区”“把你的故事分享给我们”，让客户觉得被邀请参与，而不是单向被推销。

整体保持口语化，分段简短，搭配团队照片、产品实拍或日常场景图，让页面更有温度和亲切感。

Fancii 的品牌故事页面做得很完整，值得参考。

它先用一句“Your Beauty, Your Way”定下基调，让用户秒懂品牌主张；

接着用创始人的视角讲品牌为什么存在、想解决什么问题，把价值观和用户需求连起来；

中间穿插团队理念和产品设计故事，突出专业和可信度；

再展示产品和售后保证，让用户放心；

最后放热销产品、邮件订阅和导航，顺便引导用户继续浏览或下单。

2.4.4 政策（POLICY）页面：

政策页面其实就是给客户的“安心保证”，也是开好店的基本功。

写清楚配送、退换货、隐私、服务条款和常见问题，不仅能让客户更放心下单，还能减少售后扯皮、避免纠纷。

更重要的是，这些页面还是支付通道和广告平台（比如 Facebook、Google Ads）审核的必备条件。

Shopify 其实已经帮你准备好了标准政策模板，在 “设置” → “政策” 里点一下就能自动生成，包含隐私政策、退换货规则、服务条款等，改成你自己的店铺信息就能用，非常省事。

只是这些模板偏官方、条款感强，建议生成后再优化一下，让内容更简洁直白，比如把发货时间、退货条件、联系邮箱写清楚，让客户一看就懂。

接下来我们就一步步讲，帮你把这些政策补齐。

Shipping Policy（配送政策）

配送政策的重点，是让海外客户清楚地知道：发货要多久、用什么快递、寄到哪些国家、要不要付运费或关税。

建议写明处理时间（如 1–3 个工作日内发货）、配送方式（标准或快递服务）、配送范围（具体国家或地区），以及运费规则（比如满多少免运费）。

如果涉及关税，也要提前说明由谁承担。

参考模板：

Shipping Policy

1. Shipping Methods & Costs Orders under $24.99 will incur a flat shipping fee of $4.99. We offer free standard shipping on orders over $25, except for items classified as heavy or oversized. Please note that shipping methods and delivery times may vary depending on the product and supplier. An estimated shipping timeframe is displayed at the bottom of each product page. During peak shopping seasons, delivery may take longer than usual.
2. Shipping Destinations We currently ship to the following countries: Australia, Austria, Belgium, Brazil, Colombia, Denmark, Egypt, Finland, France, Germany, Greece, Hong Kong, India, Indonesia, Ireland, Israel, Italy, Jamaica, Kuwait, Malaysia, Mexico, Netherlands, New Zealand, Nigeria, Norway, Philippines, Poland, Portugal, Saudi Arabia, Singapore, South Africa, Spain, Sweden, Switzerland, Taiwan, Thailand, Turkey, United Arab Emirates, United Kingdom, and the United States (excluding HI, PR, and AK).

If your country is not listed, please contact us at support@yuzu.com or reach out through our online customer support to confirm shipping availability.

3. Customs Duties & Taxes Import duties, taxes, and fees may apply based on the regulations of your destination country. These charges are the responsibility of the recipient. Shipping rates shown at checkout are estimates and do not include potential customs charges. For specific details, please contact your local customs office.
4. Order Processing & Delivery Times Orders are processed and dispatched within 3–4 business days. Standard delivery is typically completed within 8–14 business days, except in cases of unforeseen delays or force majeure. Please ensure your shipping address is complete, including your apartment or unit number if applicable. We cannot be held responsible for failed deliveries caused by incomplete or inaccurate address details.

Refund & Return Policy（退换货政策）

退换货政策的目标是提前约定好规则，避免不必要的纠纷。

建议在页面里写清楚：退货时限（比如 30 天内可退换）、退货条件（必须保持原包装、未使用）、退货流程（先联系邮箱获取寄回地址）、以及退款方式（原路退回）。

条款写得越清晰，客户越容易理解，既能减少恶意退货，也方便客服后续处理。

参考模板：

Refund & Return Policy

1. 7-Day DOA Guarantee If your order arrives damaged or not working, contact us within 7 days for an RMA authorization. Once returned, you can choose a free replacement (we cover return shipping) or a full refund.
2. 30-Day Returns for Unopened Items Changed your mind? You can return unopened and unused items within 30 days of delivery. Return shipping costs are paid by the customer and are non-refundable.
3. 45-Day Money-Back for Defects If a product is defective within 45 days, you may request a refund or exchange. Return shipping will not be reimbursed.
4. One-Year Repair Warranty Most products include a 1-year warranty. Customers cover the cost to ship items back for repair; we cover the cost to return repaired items. Damage caused by misuse is not covered.
5. Important Add your apartment/unit number when filling your shipping address to avoid delivery issues. Contact us first at support@yuzu.com for return instructions and our warehouse address.

Privacy Policy（隐私政策）

隐私政策的核心目的是告诉客户：你会收集哪些个人信息、怎么用、怎么保护，并且符合像 GDPR 这样的隐私法规要求。

内容通常包括：收集哪些信息（比如姓名、邮箱、收货地址）、这些信息的用途（订单处理、发送营销邮件）、你采取了哪些安全措施保护数据，以及用户如果想删除自己的数据该怎么操作。

参考模板：

Privacy Policy

1. Information We Collect When you visit our store and place an order, we collect certain information to provide you with a smooth shopping experience. This includes personal details like your name, email, shipping and billing address, and phone number; order-related data such as the items you purchase, your payment method, and transaction history (securely processed by trusted third-party providers); technical information like your IP address, browser type, device details, and cookies to help us improve site performance and personalize your experience; as well as your marketing preferences, for example, whether you’ve subscribed to our newsletter or agreed to receive promotional messages.
2. How We Use Your Information We use the information we collect to deliver and improve our services. This includes processing your orders — handling payments, shipping products, and sending order confirmations or shipping updates; providing customer support to answer questions, assist with issues, and manage returns or complaints; sending marketing communications like special offers, new product updates, and newsletters (only if you’ve opted in); analyzing how our site is used to optimize performance and improve your shopping experience; and meeting legal or regulatory requirements, including tax obligations.
3. How We Protect Your Data We take the protection of your personal information very seriously. To keep your data safe, we use encryption (such as SSL/HTTPS) to secure sensitive information during transmission, apply strict access controls so that only authorized team members can view your data when necessary, and regularly monitor our systems to detect and prevent any unauthorized access or security breaches.
4. Your Rights under GDPR and CCPA If you are located in the European Economic Area (EEA) or California, you are entitled to specific rights under GDPR and CCPA. These include the right to know what personal data we collect and how it is used, the right to request access, correction, or deletion of your data, the right to object to certain types of processing such as marketing, the right to data portability so you can obtain and reuse your personal data, and for California residents, the right to opt out of the sale of personal information. To exercise any of these rights, you can contact us at [your support email], and we will respond to your request within 30 days as required by law.
5. Data Retention We will retain your personal data only for as long as necessary to fulfill the purposes described above or as required by law (e.g., for tax and accounting obligations).
6. Changes to This Policy We may update this Privacy Policy periodically to reflect changes in our practices or for other operational, legal, or regulatory reasons. We encourage you to review this page regularly for the latest updates.

Terms of Service（服务条款）

Terms of Service 的主要目的是明确买家和卖家的权利和义务，帮店铺防止不合理的纠纷和索赔。

内容通常包括：使用条款（说明客户不能把网站用于非法用途）、价格和库存的免责声明、订单取消或拒绝的情况说明，以及责任限制条款。

建议保留必要的法律表述，但用简单、易懂的语言写，让客户看得明白，不会觉得枯燥或吓人。

在写 Terms of Service（服务条款）时，最好先有个可靠的参考。

最简单的做法是先用 Shopify 后台的 “设置” → “政策” 一键生成一个官方模板当初稿，然后再对内容优化。可以参考一些优秀的示例：

1. Shopify 官方 Shopify 自己的 Terms of Service 页面是最权威的示例，语言规范、涵盖全面。你可以参考它的结构来写店铺自己的版本： https://www.shopify.com/legal/terms
2. 大牌 DTC 品牌 一些做得好的独立站品牌，比如：

• Glossier（美妆）：简洁明了，条款分段清晰 https://www.glossier.com/pages/terms
• Allbirds（鞋服）：语言友好，读起来不生硬 https://www.allbirds.com/pages/terms-of-use
• Gymshark（运动服）：覆盖退货、责任限制、法律适用等 https://www.gymshark.com/pages/terms-conditions

3. 法律条款生成器 如果想省事，可以用免费的条款生成工具：

• Termly：能生成 ToS、隐私政策、Cookie 政策 https://termly.io/products/terms-and-conditions-generator/

FAQ（常见问题）

FAQ 的主要作用是帮客户快速找到常见问题的答案，减少重复客服咨询，让购物体验更顺畅。

内容可以覆盖几个重点：订单相关（比如处理时间、是否能修改订单）、支付问题（支持哪些付款方式）、配送问题（物流怎么查、多久能到）、以及产品的常见问答。

建议把 FAQ 分类清楚，按主题分块，让用户能一眼找到自己想知道的内容。

shein（ https://us.shein.com/ ）的FAQ界面：

2.4.5 博客(BLOG)引流小技巧

现在很多独立站都追求“短平快”的爆品打法，靠选品、投广告、找红人带货，见效快但成本一直在烧。

其实博客内容营销虽然起步慢，可能要半年甚至一年才看到明显效果，但 好处是能帮你把流量结构做得更健康——带来源源不断的免费自然流量和订单，是品牌长期发展的底气。

博客还能提升 SEO，特别是抓长尾关键词的流量；讲品牌故事，让客户更信任；还能让用户更愿意参与互动，提高粘性和复购率。

如何在Shopify上搭建和发布博客

创建入口：Shopify 后台 → 内容→ 博客文章

撰写与发布单篇博客文章：

1.页面介绍

这个页面就是用来写博客文章的地方。

最上面先填标题，比如“秋冬新品上架推荐”这种。

Shopify 的博客编辑器跟我们上传产品时用的编辑器差不多，用起来很简单。虽然没有 WordPress 那么多排版功能，但日常写文章完全够用了。如果想做更复杂的排版，可以先在第三方工具里排好版，再把内容复制粘贴到 Shopify 里就行。

再往下是摘要，选填的，如果你想让读者在博客列表里先看到一段简短介绍，可以在这里写几句话，不填也没关系，Shopify 会自动抓取正文的开头。

右边还能设置封面图，封面图会最终展示在博客文章列表页面。

可见性可以选择立刻发布、预约发布时间，或者先隐藏，写完再上线。

最后就是一些组织信息：

1. 作者名字，可以保持默认。
2. 文章归属哪个博客分类（比如“新闻”“新品推荐”）。
3. 标签，方便用户筛选和搜索，但是切忌堆砌关键词。

2.搜索引擎优化 (SEO)： 单独设置页面的标题、元描述和URL

在 Google 搜索里，每条结果通常有三部分：标题、链接和描述。这三部分刚好对应 Shopify 搜索引擎设置里的三个可编辑框，你填的内容会直接影响用户在搜索结果里看到的样子：

页面标题 (Page Title) 怎么写？

让用户一眼就知道你卖什么，并想点进来。 公式：核心关键词 – 附加卖点 | 品牌名

1. 把最重要的搜索词（比如“超低腰喇叭牛仔裤”）放在最前面。
2. 整个标题不要超过 70个英文字符（或大约35个汉字），否则显示不下会用“…”省略。
3. 你的品牌名（如 yuzu）用 – 或 | 隔开，放在标题末尾。
4. 要写成一句通顺、有吸引力的话，而不是堆砌关键词。例如：
   1. 不好： jeans women high waist slim fit new
5. 牛仔裤 女 高腰 显瘦 修身 新款
   1. 优秀： Ultra Low Flare Jeans – 90s Y2K Vintage Style | yuzu
6. 超低腰喇叭牛仔裤 – 复古y2k神裤显腿长 | yuzu

页面描述 (Meta Description) 怎么写？

用一小段话说服用户点击你的链接。 公式：产品亮点 + 行动号召 + 促销信息

1. 每个产品的描述都要不一样，不能偷懒用同一段话。
2. 不要超过 160个英文字符（或大约80个汉字），否则显示不全。
3. 用简单直接的语言说明产品优势，并鼓励用户行动。
   1. 包含关键词，并尽量靠前。
   2. 加入号召性词语，如：“ Shop Now 立即购买 ”、“ Explore Collection 探索系列”、“ Enjoy Free Shipping 享受包邮”。
   3. 可加入促销信息，如：“ 10% Off New Arrivals 新品9折”、“ Free Shipping 免费送货”。
4. 可以参考对手，去看看Google上排名靠前的竞争对手是怎么写的，借鉴他们的优点。示例：
   1. Yuzu Ultra Low Flare Jeans – Vintage Y2K Must-Have, made with high-stretch fabric for a comfy and slimming fit. Shop now and enjoy free shipping on new arrivals.
   2. yuzu超低腰喇叭牛仔裤，复古y2k千禧风潮流单品，高弹力面料舒适显瘦。立即购买，享受新品首发包邮优惠。

3.创建新的博客分类

这个页面主要用来给博客文章分类和组织内容。

作者栏显示谁发布文章，通常保留默认即可；

博客栏可以选择已有的分类，也可以点“创建新博客”新建一个分类，比如“品牌故事”“新闻动态”，方便后续管理文章；

博客标题是这个分类的名字，填写后会显示在前端；

标签可以添加关键词，便于搜索和分类；

模板样式一般保持“默认博客文章”，除非你有专门设计的模板需要替换。

发布博客文章之后，我们就可以在网站前台查看显示效果了（记得在导航栏添上“BLOG”菜单）。

该博文在BLOG列表页面的显示效果：

点击上面的图片或标题之后，就可以打开下图所示该博文的内容详情面。

2.4.6 产品页优化

产品主界面不需要我们做过多的修改，Shopify使用该默认模板之后，后台自动帮我们设计了一个简单的产品主界面

我们点击一个产品，进入产品界面设置

可以看到，我们只要在后台添加上架了产品，产品的信息和图片就会被自动同步到SHOP界面中

我们查看下BIBA的产品界面，可以看到右侧部分除了商品基本信息，还做了一个 可折叠行 来展示产品的细节信息

做了这个设计之后，能够 让客户更直观地去选择查看产品的细节信息 ，所以我们仿照BIBA来完成这个样式的设计

可以看到，BIBA除了产品标题和码数等信息，其他的信息都做了可折叠处理

由于模板的限制性，我们无法修改产品标题的大小

所以我们将原先的描述部分变成多个可折叠行，仿照BIBA的设计

添加一个分区，选择可折叠行

由于我们的模板不适应性，无法做到一模一样

我们选择保留产品描述，然后再添加几个可折叠行

添加标题和文字之后，再选择一个我们喜欢的图标，然后依次再添加可折叠行

添加完之后就是这样，之后如果还有不满意的地方，我们再对它进行调整即可

这样，我们就完成了SHOP界面的基本设置