如何将滑块添加到您的 Shopify 商店并充分利用它们（+ 来自企业主的见解）

越多越好。 至少在电子商务买家方面。

客户想要阅读评论，从各个可能的角度查看产品，并在考虑点击“添加到购物车”按钮之前探索新的折扣和优惠。

但是，如果您将所有这些信息都塞进您的网站，您就有可能让它们不堪重负。 这就是滑块如此方便的原因——您可以利用转换触发器，而无需创建一个淹没在图像和副本中的冗长页面。

Shopify 上的滑块是什么？

滑块本质上是 Shopify 商店中的幻灯片。 它可以是自动的（它会根据一组规则自动开始播放）或手动的（只有当用户点击它时才会移动）。

以下是一些最受欢迎的滑块类型和示例：

• 推荐滑块- 客户评论和图像的轮播可提供出色的社会证明

QuadLock 在其所有产品页面上都使用了这样的推荐滑块。 用户可以通过单击向左或向右箭头来筛选产品评论。

Laird Superfood 还在主页上使用推荐滑块来展示最佳客户评论。

• 徽标滑块——对于 B2B 公司，炫耀与他们合作的公司会向潜在买家发送所有正确的信号。

Beauty Solutions 在其主页底部使用手动徽标滑块来共享他们提供给客户的名称。

• 产品图片滑块- 从各个角度展示您的产品，并将最佳产品属性写为这些图片的标题。

CriticalSlide 的冲浪短裤在产品页面上有一个手动产品图像滑块。 树干从前面、侧面和后面显示。 还有一些材料和设计的特写照片以及模特穿着它的图像。

• 流行的产品滑块——太多的选择会让客户不知所措。 向他们展示在其他客户中流行的东西，您可以更轻松地做出决定。

Proper 在这个“购买我们的 Instagram 外观”手动轮播中展示了其最受欢迎的产品。 每张幻灯片都显示了产品，其中包含有关价格的信息以及网站上的链接。

eFashion Paris 使用手动滑块来展示新品和畅销商品，并分享指向这些相应类别的链接。

• 横幅滑块- 在这些横幅中分享商店折扣、优惠或新产品。

49th Parallel 在其主页上使用此 2 幻灯片手动横幅滑块将注意力吸引到

• 最畅销的过滤咖啡和
• 可持续采购豆类的故事。

Beard & Blade 的手动横幅滑块链接到最畅销的产品，并鼓励访问者阅读博客。

如何将滑块添加到您的 Shopify 商店

根据您要安装的 Shopify 应用，将滑块添加到商店的确切步骤可能会有所不同，但这里有一个快速且基本的教程：

第 1 步：复制您的实时主题

登录您的 Shopify 商店。 转到在线商店-> 主题。

在实时主题旁边，单击“操作”按钮并选择“复制”。 这将创建您 Shopify 主题的备份，以防您犯了可能对您的商店产生不利影响的错误。

第 2 步：将自定义滑块部分添加到 Shopify 商店

您安装的 Shopify 滑块应用程序可能需要在您的网站上粘贴一些自定义代码。 为此，在实时主题旁边，单击“操作”按钮并选择“编辑代码”。

接下来，展开“部分”类别，然后单击“添加新部分”

为您的滑块命名并点击“创建部分”，您可以粘贴自定义代码。

第 3 步：转到 theme.liquid

向上滚动以单击 theme.liquid。 您可能需要在此处粘贴其他代码。

第 4 步：自定义滑块

返回主题，然后单击实时主题旁边的“自定义”。

找到您创建的部分，现在您可以自定义 Shopify 商店中的滑块。 如果您安装了图像滑块应用程序，则在此步骤中您需要做的就是选择您想要展示的集合。

如果您更喜欢视频教程，请观看来自 EcomExperts 的视频，他们在其中解释了如何将特色产品滑块添加到您的 Shopify 商店。

2022 年热门 Shopify 滑块应用程序：主要功能、用户评论

#1。 POWR.io的产品图像滑块轮播

定价：免费-89.99 美元/月

评分：4.2/5（243 条评论）

这个应用程序允许您创建带有标题、文本、按钮、视频、边框和复制保护的滑块和产品轮播。

主要特征：

• 不同的滑块过渡样式可供选择
• 在滑块或轮播之间进行选择
• 高度可定制的设计
• 任何设备上的移动响应
• 支持所有语言的文本

正面评价

批判性审查

#2。 Secomapp 的横幅滑块

定价：免费 - 39.99 美元/月

评分：4.5/5（152 条评论）

尽管该应用程序被称为横幅滑块，但您可以使用代码创建不同类型的高度可定制的滑块。 Banner Slider 易于安装和设置，并提供友好的后端管理。

主要特征：

• 创建 40 多种不同类型的滑块
• 将视频添加到滑块
• 在前端显示滑块的嵌入式代码
• 发布前预览滑块
• 批量上传功能
• 设置横幅的开始和结束日期
• 支持全角模式

正面评价

批判性审查

#3。 Enorm 图像滑块

定价：免费 - 16.99 美元/月

评分：4.9/5（116 条评论）

此应用程序允许您在图像上创建带有文本和评论的横幅滑块、图像滑块、轮播和徽标，并为滑块上的每个图像添加链接。

主要特征：

• 移动响应
• 控制滑块速度
• 一次上传多张照片
• 添加文本和链接

正面评价

批判性审查

#4。 主滑块 - 图像滑块

定价：免费

评分：3.8/5（73 条评论）

这个免费的应用程序允许您创建无限的自定义滑块，而无需任何编码知识。 您可以使用 5 个模板之一，也可以从头开始。

主要特征：

• 支持图片替换文字
• 无限层
• 适用于任何设备的响应式滑块
• 添加覆盖按钮、自定义 HTML 和文本
• 安排滑块的开始和结束日期
• 在滑块或轮播之间进行选择

正面评价

批判性审查

#5。 POWR.io的客户推荐幻灯片

定价：免费-89.99 美元/月

评分：2.7/5（35 条评论）

这个易于使用的应用程序允许您展示客户推荐、评论、照片、描述和视频。

主要特征：

• 自动播放视频推荐
• 突出显示您的最佳产品评论
• 控制循环、幻灯片过渡、速度和自动滑动
• 高度可定制的设计
• 任何设备上的移动响应
• 支持所有语言的文本

正面评价

批判性审查

#6。 Ada IQ：图片滑块库

定价：2.99/月（10 天免费试用）

评分：5/5（23 条评论）

这个无代码 Shopify 图像滑块应用程序允许您创建无限的滑块和幻灯片来展示您最畅销的产品。

主要特征：

• 轻松定制
• 在多个登录页面上添加相同的幻灯片
• 未来的更新和新功能
• 将图像链接到您商店的任何页面

正面评价

批判性审查

目前没有对该应用程序的批评性评论。 用户确实提到了应用程序遇到的问题，这些问题在所有情况下都由支持解决。

#7。 多页响应式滑块

定价：4.99/月（7 天免费试用）

评分：4.2/5（8 条评论）

这个易于使用的应用程序允许您以不同的设计创建水平或垂直滑块，并将多个滑块添加到单个页面。

主要特征：

• 任何设备上的移动响应
• 自动生成简码以粘贴到任何页面
• 易于搜索和过滤类别和项目
• 使用按钮、数字和缩略图创建滑块

正面评价

批判性审查

目前还没有对该应用程序的批评性评论。

#8。 滑块革命

定价：6.99-89 美元/月（7 天免费试用）

评分：4.9/5（44 条评论）

此应用程序允许您创建各种滑块并流式传输完全响应和可定制的社交媒体内容。

主要特征：

• 来自 Facebook、Twitter、Flickr 和 Instagram 的 Steam 社交内容
• 从 YouTube 或 Vimeo 上传视频
• 完全控制样式、过渡和动画
• 针对所有设备进行了优化
• 全宽、全屏、自动响应滑块大小
• 所见即所得的拖放编辑器

正面评价

批判性审查

滑块与旋转木马：您需要知道什么？

滑块和轮播在本质上是相同的，除了一个区别——轮播一次显示多张幻灯片。

您可以使用轮播向客户展示徽标、推荐或畅销产品。

何时使用轮播

当您希望更多可见的内容占据您页面上的相同空间时，请使用轮播，以便买家更有可能看到它。

这里有一些注意事项：

不要做

• 不要在主页的英雄部分使用轮播，因为它会使访问者感到困惑。
• 不要将信息推送给对他们没有好处的用户，只有公司。
• 不要让它成为转储内容的地方。 如果你不能证明它的使用是合理的，那就不要使用它。

做的：

• 当人们期望它时，请使用旋转木马。 例如，显示客户评论、畅销产品或新品。
• 使用轮播可以节省人们的时间、精力和点击次数。
• 一定要用它来比较两种不同的产品。

使用轮播的最佳实践

• 使用手动轮播，以便用户控制
• 使用箭头或点导航让用户导航
• 保持这些轮播中的文字简短明了
• 确保轮播可以在移动设备上以相同的方式滑动

优化 Shopify 商店中的滑块：（+来自企业主的优点、缺点和见解

我们请了几位企业主分享他们使用滑块的第一手经验，以及它们是否有用。

滑块工作吗？

让我们首先从两个角度来检查滑块：性能和说服力。

• 性能：机器人可以抓取滑块并理解它们吗？ 他们真的会减慢网站速度吗？
  
  是和不是。 机器人可以抓取滑块，因此让它们对 SEO 友好很重要，而且并非您安装的所有滑块应用程序都会对网站速度产生巨大影响。
• 说服力：滑块在吸引人们购买方面做得很好吗？
  
  确定它们是否适合您的最佳方法是对它们进行 A/B 测试。 首先，测试两个版本——一个有滑块，一个没有。

用最畅销产品的静态图片促销和带有悬停状态的按钮替换滑块，将转化率提高了 30%（统计显着性为 98%）。

这个测试做了我认为它会做的事情，但这里的关键是有更直接的证据来帮助引导这个客户和其他人远离他们主页上的滑块。 我不是唯一有过这种经历的人，而且我已经阅读了大量具有类似结果的案例研究。

问题是人们将滑块视为广告，因此他们不会与它们互动，特别是如果没有办法在滑块上轻松导航或导航被隐藏起来。

要点：去掉主页推广区域的滑块，鼓励客户用它来讲述他们的故事或推广畅销的产品或关键服务。 这次经历的另一个重要收获是，A/B 测试比谈论“最佳实践”或鼓励基于我读过的其他内容的想法更能吸引客户。

Tim Brown，5 个改变了我设计网站方式的 A/B 测试

企业主对滑块有什么看法？

我最近在我的 Shopify 商店中添加了一个图像滑块，我对结果非常满意。 图片滑块是展示产品、突出显示特别优惠以及为您的商店增添视觉趣味的绝佳方式。

  卢克·李，联合创始人，everwallpaper.co.uk

对我来说，图像滑块可以在 Shopify 商店中发挥作用。 如果使用得当，它们可以帮助突出某些产品或功能，并使客户更容易了解商店所提供的更多信息。

Burak Ozdemir，setalarmonline.com 创始人

是的，图像滑块在一定程度上有效。 当产品目录很大并且您在页面上显示同一型号的多个变体时，图像滑块效果最佳。

Theola Tinny，VinPit 联合创始人

多年来，我在我的 Shopify 客户上测试了不同类型的滑块。 我们发现表现最好的 Sliders 提供了某种暗示，表明还有更多值得关注的地方。 特别是一个客户在他们的第一个 Slider 中放置了“Deal #1 of 3”，然后当然有 Slider #2 和 Slider #3 以及更多的交易。

JMoriarty Marketing 的数字营销忍者 Jeff Moriarty

滑块会适得其反吗？

是的，滑块可能会适得其反，这是企业主希望您知道的：

我不建议在您的 Shopify 商店中使用任何形式的图像滑块或轮播。 它们会引起混乱，并且会使来您商店的访客不知所措。 当他们注册了一张图片时，它已经移到了下一张。 此外，为您的客户提供太多选择可能会分散他们的注意力，而不是他们最初来到您的商店的主要原因。 为您的访问者提供一条直接到达那里的路径，而不会分心。 期权通常是糟糕策略的副产品。

一种更加用户友好的做法是使用一张醒目的图像来提醒他们他们已经降落在正确的位置。 滑块插件还可以显着减慢页面加载时间并造成糟糕的用户体验。 它们很难设计，并且在不同的设备和浏览器上响应不佳的可能性更高。

Emily Amor，数字飞镖 SEO 经理

用户倾向于不与滑动图像进行交互，并且经常忽略它们，因为他们认为它们是广告。 滑块似乎提供了能够在同一页面上传递多条消息的承诺，但我几乎总是发现专注于一条消息和号召性用语 (CTA) 更有效。

院长卡普兰，https://www.kaplancollectionagency.com

我与一位客户遇到的最糟糕的 Slider 问题是他们没有压缩图像并上传了每个超过 50mb 的 Slider。 几乎没有人看到它们，因为当访问者向下滚动或转到另一个网页时，它们并没有加载。 啊!

JMoriarty Marketing 的数字营销忍者 Jeff Moriarty

优化滑块时要遵循的最佳实践

以下是使用滑块时应了解的内容：

• 确保您的滑块加载速度快
  
  高质量的图像也往往是大文件，这可能会减慢您的滑块。 确保根据滑块的大小选择正确的图像大小。
  
  超过某一点，用户无法分辨图像质量的差异，因此不要害怕压缩文件。 您还可以延迟加载滑块并减少样式和字体的数量，这样就不会减慢加载时间。
• 首先显示最重要的幻灯片
  
  人们应该向你购买的首要原因是什么？ 使用您的 USP 将访问者吸引到滑块，以便他们更倾向于滚动浏览内容。
• 在所有幻灯片上使用引人入胜的副本
  
  您所有的幻灯片都是吸引访问者并使用不同的销售角度来转换它们的机会。 添加解决好处和痛点以及基于行动的 CTA 的标题。
• 幻灯片少于 5 张
  
  但不要过度使用幻灯片。 您不想用太多的选择压倒访问者，也不想因为分析瘫痪而没有购买。 有意识地使用你的滑块，并有一个强烈的为什么你首先将它包括在内。
• 设置慢速旋转时间
  
  给潜在客户足够的时间来消化您的内容。 太快了，他们会错过内容，不得不等待幻灯片再次出现。 太慢了，他们会痛苦地等待下一张幻灯片出现。 Rich Page 建议将旋转时间设置为 3 秒。
• 自动旋转幻灯片
  
  即使您使用自动滑块，您也无法确定访问者会耐心等待整个幻灯片循环播放。 让访问者可以选择通过箭头或点导航来浏览滑块。
• 对轮播使用不对称布局
  
  如果您正在考虑使用轮播，请尝试为您的图像使用不对称布局。 Airbnb 和 Booking.com 都使用了 A/B 测试并得出了几乎相似的图像布局——一个大的“特征”图像，周围有较小的图像（几乎像缩略图）。

企业主如何以最佳方式使用滑块？

首先，确保您使用的图像质量高且尺寸合适。 模糊或像素化的图像会损害您商店的专业外观。 其次，避免使用过多的幻灯片——通常三四张就足够了。 太多的幻灯片可能会让访问者不知所措，并使他们难以找到他们正在寻找的信息。 最后，确保将滑块放置在页面上易于看到的区域——最好靠近顶部。

卢克·李，联合创始人，everwallpaper.co.uk

定期更新滑块中的图像也很重要，因为陈旧的图片很快就会变得过时并且在实现其吸引注意力的目的方面效果不佳。

此外，您应该确保您的滑块易于导航，并带有清晰的“下一个”和“上一个”按钮，以便用户可以轻松地浏览您的产品。 最后，在每张图片中加入相关文本会很有帮助，以帮助读者理解每张图片的内容。

Burak Ozdemir，setalarmonline.com 创始人

如果使用滑块，它们应该是静态的。 每隔几秒钟更换一次图像的自动滑块对于某些用户来说通常移动得太快，而对于其他用户来说又太慢。 最好使用带有清晰导航按钮的静态滑块，以确保用户始终处于控制之中。

院长卡普兰，https://www.kaplancollectionagency.com

客户更喜欢看图像而不是阅读文本。 通过向观众提供有吸引力的图像而不是长文本，使您的滑块吸引观众。

Signaturely 创始人 Will Cannon

滑动您的获胜方式：A/B 测试您的滑块

滑块是一个有争议的想法是有充分理由的。 盲目地模仿最佳实践或竞争对手或行业可能会产生相反的效果。 访问者可能会感到恼火，从页面跳出，您的转化率可能会下降。

A/B 测试您的滑块，以便您有数据来支持您的决策，并有一个框架来测试新的更改以提高转化率。

Rich Page，转换专家，分享了一些您可以使用的 A/B 想法：

• 测试具有单个图像与旋转幻灯片
• 使用解释器视频与幻灯片进行测试
• 测试滑块的高度和宽度
• 向正确的目标受众显示滑块
• 尝试以不同方式添加社会证明

无论您想测试哪种假设，Convert 易于使用的 A/B 测试平台都能为您提供支持。 免费试用 15 天。