Shopify装修教程（三）：界面组件讲解（1-10）

2.2 了解界面交互逻辑

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

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

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

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

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

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

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

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

1.特色产品系列

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

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

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

2.特色产品

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

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

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

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

3.特色产品列表

4.富文本

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

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

5.带文本的图片

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

6.图片横幅

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

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

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

7.幻灯片

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

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

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

8.拼贴画

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

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

9.多列

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

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

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

10.多行

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

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

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