使用轮播字段

我们将涵盖的内容

轮播是一组旋转横幅或幻灯片,显示在您商店的主页上。它允许您显示最多五张由图像和文本组成的幻灯片,这些幻灯片可以链接到特定的产品或页面。图像每隔几秒就会改变一次。

轮播有多种尺寸,由主题决定。通常,主题使用的尺寸至少为1200 x 600 像素。轮播图像必须为JPEG/JPG、PNG或GIF格式。

轮播生成器

Carousel Builder 位于Storefront › Home Page Carousel

将图像添加到幻灯片

您最多可以在轮播中显示五张幻灯片。空幻灯片不会出现在您的店面上。

专家提示!第一次使用 Carousel Builder 时,它会预先加载示例图像。确保在添加新图像之前删除示例幻灯片。

1. 单击空白幻灯片缩略图。预览将变为一条消息,告诉您添加图像。

2. 在您的计算机上,打开包含您的图像的文件夹,然后将图像从您的计算机拖放到轮播预览框。或者,单击从您的计算机中选择并选择要上传的图像。

3. 保存您的更改。

添加文本和链接

您可以选择向每个轮播幻灯片添加文本。幻灯片由标题、按钮文本和常规文本组成,可以链接到商店的另一部分或另一个网站。

要编辑幻灯片上的文本,请单击要编辑的幻灯片的缩略图。从这里,您可以在要显示的文本类型旁边的字段中输入消息。

要更改文本颜色,请转到Page Builder

您的 Carousel Builder 看起来有什么不同吗?旧版蓝图主题具有用于编辑轮播文本颜色的不同设置。有关详细信息,请参阅蓝图主题

当您的客户单击幻灯片上的任意位置时,将URL 添加到“链接字段会将其带到指定的页面。

要链接到商店中的页面,例如特定产品或类别,请单击浏览

选择您要链接到的页面类型的选项卡(产品、类别、品牌、网页或博客),然后从显示在选项卡下方的列表中选择页面,然后单击插入链接。要将购物者引导至其他网站,例如非现场博客,请直接在输入目标链接的字段中输入该网站的 URL 。

设置幻灯片旋转的频率

要更改幻灯片的旋转频率,请更改交换每[数字]字段中的数字。间隔必须在 1 到 90,000 秒(25 小时)之间。

重新排序幻灯片

单击并拖动幻灯片以将其移动到您喜欢的顺序。所有文本和链接都将随之移动。

在离开页面之前保存您的更改。

删除幻灯片

删除幻灯片将同时删除图像和文本。

当心!一旦删除,图像将无法恢复,因此请务必备份您使用的图像。

要删除幻灯片,请找到要删除的幻灯片的小缩略图,然后单击缩略图右上角的X

图像失真

如果图像看起来模糊、拉伸或挤压,则可能不符合主题的图像尺寸要求。推荐的图像尺寸可以在主题手册中找到,或者在选择空白幻灯片时在图像预览中列出。如需更多建议,请参阅我们的编辑商店图片指南。

查找轮播尺寸

我们的每个主题都包括一个轮播或幻灯片,以突出显示产品和号召性用语。由于我们的主题有多种风格,因此它们对轮播图像尺寸的要求也不同。

  • 图像尺寸 — 图像的宽度和高度,使用像素 (px) 度量

图像推荐可以在其文档中找到,使用下面的指南来帮助查找这些规范。

需要修复轮播图像?请参阅我们关于调整商店图像设置的指南,以获取有关为轮播设置正确尺寸的图像的帮助。

图像尺寸

模板主题通常使用介于 1200 x 600 像素和 1600 x 900 像素之间的轮播尺寸。在创建和添加轮播幻灯片之前检查您的主题文档,因为不同的主题有不同的推荐尺寸。

超出推荐尺寸的图像可能会出现变形的风险,因为主题会拉伸或挤压图像以使其适合。有关调整图像大小以适合轮播的帮助,请参阅编辑您的商店图像。由于所有 Stencil 主题都是响应式的,因此 Carousel 将根据客户的屏幕尺寸进行调整。

如果您购买了主题,请联系主题的开发人员并查看主题文档。

如果您使用的是基石主题,请参阅基石主题手册。Page Builder 有一个选项可以在更大的屏幕上调整轮播图像大小,强制图像拉伸或不拉伸。

没有看到任何推荐的高度尺寸?如果手册对图像高度没有建议,我们建议使用 600800 像素。确保所有图像使用一致的高度。

不方便调整您的设计或想与专家合作?查看我们的BigCommerce 合作伙伴目录,或考虑使用我们的代理设计请求计划与认证设计合作伙伴合作。由于我们的设计政策,我们的技术支持无法编辑代码或进行设计更改。

常问问题

为什么预览看起来与店面不同?

控制面板中轮播预览的外观可能与您店面上的轮播有很大不同。这是因为控制面板中的预览没有考虑主题的 CSS 样式。店面的轮播展示了用户创建的和基于主题的样式。

主题可以控制轮播的哪些方面?

主题管理以下方面。这些只会显示在店面,不会显示在控制面板的预览中。

为什么轮播图像看起来被拉伸或挤压?

如果图像与主题所需的图像尺寸不匹配,图像将被拉伸或挤压以适应。如果您遇到这种情况,请参阅对您的商店图像进行故障排除并查看您的主题文档。

如果轮播切断了我的图像的一部分,我该如何修复它?

某些 Stencil 主题在Page Builder中有一个设置,用于确定如何处理较大的图像。

我可以更改轮播上使用的字体吗?

要更改轮播字体,您必须使用Stencil CLI自定义主题。这可以通过自定义模板文件在旧版蓝图主题中完成。

如何移除轮播?

删除轮播的最简单方法是删除所有幻灯片,使其只有空的幻灯片缩略图。

我可以更改轮播的尺寸吗?

可以通过编辑主题代码来调整轮播的默认尺寸。我们建议通过访问我们的合作伙伴目录或提交代理设计请求与 BigCommerce 合作伙伴联系。

我可以在轮播中使用动画图像或视频吗?

如果需要额外的移动,轮播可以使用动画GIF图像,但不支持视频文件。

我必须有多张幻灯片吗?

您可以有 0 到 5 张幻灯片。如果您只有一张幻灯片,它不会旋转,而是保持静态图像。