首页

概览：本篇文章将为您介绍Element主题的店铺装修首页卡片和主题组件使用步骤及应用场景；以下为该主题所有的装修卡片汇总！

公告栏	地图	图文模块
页头	视频图文模块	联系表
HTML	时间线	富文本
邮件订阅	视频轮播	单图
视频	特色轮播图	图标声明
商标列表	精选商品	幻灯片
常见问题	专辑轮播	图标声明2
博客	评论模块	活动推广
图文轮播	图文列表	页尾

 

【公告栏】一般展示在店铺最顶部，可用于向顾客展示店铺内的最新活动、店铺公告等公示类场景

• 左侧公告内容可支持选择3个
• 右侧可以对该公告设置内容、PC端和移动端分别不同的内容
• 每个公告内容可设置响应的跳转链接

 

【页头】是用于设置店铺的导航和Logo设置项，shoptop将支持您对店铺设置：

（Logo）：

• 可分别设置透明页头展示logo、或非透明页头展示
• 可分别设置pc端及移动端的最大宽度调整

(导航栏）：

• 管理后台设置好导航栏内容后，在装修页可选择直接绑定
• 导航布局支持调整居左、居中、居右
• 导航栏支持在装修页设置图文菜单，操作方式如图二；同时也可设置单独的文字及链接跳转
• 根据店铺的情况可选择是否开启页头固定、启用透明页头、搜索入口、用户中心、购物车按钮
• 若管理后台的应用市场开启多语言/多币种插件，也在此处的编辑项里开启展示按钮

 

【HTML】支持您插入自定义的HTML代码，展示特定的样式；也可结合应用市场的表单工具制作询盘表单。获取表单工具HTML自定义代码，可点击此处！

• 该组件可以选择是否开启宽度是否全屏展示按钮
• 也可以分别对PC端和移动端的上下边距进行调整

 

【邮件订阅】一般用于收集顾资询盘提供填写入口，装修过程中可以选择该组件对其进行设置样式

• 标题、描述、按钮文案、输入框提示文案内容支持自定义设置（描述内容可设置链接跳转）
• 该组件支持设置配色方案
• 也可以分别对PC端和移动端的上下边距进行调整

 

【视频】以URL链接的形式在店铺里插入；需提前将视频文件处理成链接，推荐上传至Youtube或Vimeo平台转成URL

• Shoptop支持您自定义设置视频组件的标题、描述内容；
• 封面图片可选择上传本地或者在右侧编辑项里调整封面图展示区域
• 根据视频与店铺的风格可选择是否开启：自动播放、自动播放是否静音、循环播放按钮
• 视频的尺寸长宽比、及整个组件的PC和移动端上下边距支持您按需调整

 

【商标列表】一般用于店铺展示特定的图标或图片场景，并建议图片设计为透明底色

• Shoptop支持您对该组件自定义设置标题、对每个图片自定义设置跳转链接
• 可选择是否开启真实分割线按钮及根据店铺风格调整该组件的pc及移动端上下边距

 

【常见问题】组件一般适用于店铺里FAQ类的场景，该组件可以设置问答和富文本的组合

• Shoptop支持您对该组件自定义设置标题及富文本和问答的所有文本内容；此外描述文本支持设置链接跳转
• 该组件也支持您根据店铺整体排版调整pc及移动端的上下边距

 

 

【博客】组件内容的展示来源于Shoptop管理后台博客专辑，后台上传或编辑好博客内容后，装修页可以选择该组件直接绑定专辑展示

• Shoptop支持您对该组件自定义编辑标题及按钮文案内容
• 博客展示数量支持调整数量范围为1-6
• 组件布局可设置为网格或列表；图片比例可根据店铺风格调整
• 该组件支持您选择是否开启显示作者、显示日期、显示封面图的按钮
• 同时也可根据店铺整体排版调整pc及移动端的上下边距

 

【图文轮播】适用店铺里展示多个图片文字轮播的场景，您可以根据需求在左侧选图文模块的展示数量，右侧选择对该组件操作设置项

• Shoptop支持您自定义设置该组件的标题、副标题、正文、按钮文案的文字内容
• 图片比例可统一设置为原始比例、1:1、4:3、2:3
• 组件可以选择是否开启自动轮播、展示模块分割线按钮
• 图文模块内容可以自定义上传图片、设置标题、描述及跳转链接

 

【地图】一般用于显示店铺位置、提供导航或展示服务区域、分店地址、经销商地址等场景；该组件使用之前需要首先获取Google Maps API key，如何获取请点击此处！注册Google Maps API密钥

• 该组件支持您自定义设置标题、地址和营业时间、地图地址、按钮文案文字内容
• 根据店铺的装修风格可以选择是否开启显示图钉按钮
• 在地图未加载出来时可以上传自定义图片展示，图片对齐位置也可以自定义调整

 

【视频图文模块】适用于视频+文案的组合装修场景，使得店铺更加生动；使用前需将视频处理成URL链接

• 该组件的文本内容、链接（标题、副标题、文本、按钮文案/链接）都支持自定义设置
• 按钮支持选择开启：展示模块分割线、自动播放、自动播放是否静音、循环播放
• 视频可按需调整长宽比及封面图展示区域
• 视频与文本的位置左右调整

 

【时间线】是一个多用途组件，以多卡片切换的形式展示时间序列和相关内容。每个卡片都可以同时展示图片、文字内容和标签，创造出生动的图文结合。适用于呈现历史事件、项目进展、成就里程碑等其他时间相关信息。

• 该组件支持您自定义设置图片及文案内容且设置相关的跳转链接
• 根据店铺装修风格可调整整体的配色方案

 

【视频轮播】一般适用于店铺装修里需要图片+视频组合轮播的展示样式；该组件支持调整整体的电脑端/移动端高度来适配整体的风格；分页器样式可做调整，也可根据需求选择是否开启自动切换的按钮及切换间隔时间

• 视频：需使用使用MP4、YouTube、Vimeo URL链接；自定义上传封面图片（可调节展示区域），文字内容、主标题内容（大小调整）、正文（展示位置、遮罩比例、文字阴影）、按钮文案（跳转链接、颜色）
• 图片：可分别上传电脑端和移动端的展示图片

【特色轮播图】一般可用于店铺装修的Banner图或横幅图，由文案+视频+按钮组成，内容支持自定义设置及布局

• 图片支持自定义分别设置PC端及移动端的图片，也可按照店铺风格调整图片展示区域
• 文案支持自定义更改主标题、副标题、正文、按钮文案的内容

 

【精选商品】的组件内容是根据Shoptop管理后台的单个商品专辑绑定展示专辑下的全部商品

• 该专辑支持您自定义拟定组件标题及按钮文案
• 可根据店铺风格调整商品每行及每列的数量
• 移动端可开启是否左右滑动查看按钮

 

【专辑轮播】组件一般是用于展示多个商品专辑的轮播样式；对改样式可以自定义调整标题及正文内容；并可选择是否开启自动轮播按钮及轮播时间间隔时长

• 对该组件下的专辑模块可以支持您设置专辑的特定标题及设置专辑图片展示的区域

 

【评论模块】组件一般用于商品口碑转化或合作伙伴的展示；Shoptop支持您自定义设置该组件的标题及评论内容文案；同时也可自定义上传展示图片

• 该组件的所有图片可统一设置图片形状、文字大小、及评价星星的颜色及数量

 

【图文列表】组件一般适用于图片+标题+描述+按钮+链接跳转的场景且支持自定义设置内容

根据店铺的装修风格可设置文本对齐方式为：居左/居中/居右；按钮支持选择是否开启移动端左右滑动插件及组件分割线

• 该组件下的模块内容可分别上传图片、调整文案、及调整图片宽度

 

【图文模块】组件一般适用于图片轮播+文字、按钮跳转固定展示的场景；同时，文字部分可以用语展示店铺的销售信息，组件整体可调整左右位置

• Shoptop支持您对该组件的图片、标题、副标题、按钮文案、销售信息文案自定义修改
• 不同的销售信息支持用icon图标及自定义进行颜色调整
• 图片可根据店铺整体风格调节图片宽度

 

【联系表】一般用于店铺默认展示的装修组件，可用于收集顾客信息；该组件仅支持调整PC、移动端的上下边距

 

【富文本】一般用于店铺里纯文案展示的场景；该组件下可增加模板块：文本和自定义页面

• Shoptop支持您对该组件的标题、正文、按钮、按钮文案自定义设置内容
• 标题对齐和文本对齐可调节为居中/居左/居右
• 可选择是否开启使用标准列宽、放大文字、及显示模块分割线的按钮

 

【单图】一般适用于店铺装修里只展示单张图片的场景；可同时对PC端及移动端分别设置；该组件可以对图片、按钮文案、正文文本、标题、副标题自定义设置内容

• Shoptop支持您调整图片的展示区域、电脑端/移动端高度、文本位置、背景不透明度
• 按钮支持开启滚动视差，开启后视差效果会裁减部分图片以达到效果

 

【图标声明】一般是用于以icon图标卡片的形式展示信息，适用于呈现重要声明、特点介绍、引导用户、合作伙伴展示等各种情境，为网站增添信息传达效果和视觉吸引力。

• Shoptop支持您设置标题和正文，调整组件宽度，自定义布局、字体颜色、图标颜色和背景颜色，以确保与整体设计风格协调。
• 每个图标卡片都可以个性化设置，包括选择图标、添加图片、设置标题、副标题和跳转链接

 

【幻灯片】常用于网站的横幅（Banner）展示，将重要信息、特色内容或促销活动以动态和视觉吸引力的形式呈现给访问者

• 该组件支持调节每张图片的统一高度、分页器样式、过渡效果、及轮播速度，也可以选择是否自动轮播
• 每张图片可以分别针对PC/移动端设置不同的图片、及调节图片的展示区域
• 图片内的文字内容也可按需设置及对应调整

 

【图标声明2】一般是用于以icon图标+文字动态展示的形式，适用于呈现重要声明、特点介绍、引导用户、合作伙伴展示等各种情境，为网站增添信息传达效果和视觉吸引力

• 自定义标题和正文，调整组件宽度，并设置布局、字体颜色、图标颜色、背景图和背景颜色，以与整体设计风格相协调

 

【活动推广】一般适用于特殊商品单独做营销活动或商品及商品专辑单独展示的装修场景；分为横幅和专辑两个模块

• Shoptop支持您对该组件整体调节PC/移动端的上下边距及选择是否开启宽屏展示按钮、每个模块的间距距离
• 横幅模块支持自定义调整文案及上传图片；每个按钮都支持设置跳转链接
• 专辑模块可直接绑定后台的分类专辑展示，模块内的文案均可自定义设置

 

【页尾】可以放置政策页面、邮箱订阅、支付图标、公司介绍等内容，提供网站相关信息的说明，提升用户信任度。

• Quick Link：可自定义设置菜单的标题；绑定后台设置好的菜单，可调整栏目宽度百分比
• 自定义内容：可自定义设置标题、描述、图片、设置跳转链接及栏目宽度
• 邮箱订阅：可自定义设置标题、正文、按钮文案、输入框提示文案、栏目宽度
• 联系方式：可自定义设置标题、联系方案文案及icon图标、栏目宽度