【发布时间】：2016-06-23 19:18:34
【问题描述】：
我目前订阅了 Shopify，并且正在使用“布鲁克林”主题。我本质上希望产品页面上显示的图像以幻灯片格式显示，而不是显示在另一个下方，因为向下滚动以查看所有图像可能很乏味。有人有这个主题的经验可以帮我吗？将不胜感激。
【问题讨论】：
标签： image slider shopify product
【发布时间】：2016-06-23 19:18:34
【问题描述】：
此链接中“Helpful Human”的答案中解释了您想要实现的目标。 https://ecommerce.shopify.com/c/ecommerce-design/t/change-product-photos-to-thumbnails-under-main-image-in-brooklyn-theme-272292
我按照这个来修改我的布鲁克林主题以修改产品。需要做一些修改。
- 从您的商店管理员安装经典主题（但不要发布）。
- 转到在线商店 > 主题 > 并单击经典主题下拉菜单下的编辑 HTML/CSS
- 打开 Assets 文件夹并单击
timber.js.liquid文件。 - 在单独的选项卡中打开布鲁克林主题的 HTML/CSS。 （尝试此操作前请先备份）并编辑 Brooklyn 主题的“theme.js.liquid”文件
- 在类主题 wood.js 中，您会看到一行代码为 wood.productImageSwitch();在初始化函数中。这是我们需要的功能。将此行复制并粘贴到您的 theme.js 文件中的同一个 wood.init 函数中
- 您还需要复制文件下方的实际功能代码（大约第 175 - 207 行）。为确保您获取正确的代码，请在页面 (cmd+F) 中搜索 productImageSwitch，您将看到相关函数以及 switchImage 函数。将这两个函数全部复制并粘贴到 theme.js 中。
-
现在在 theme.js 文件（布鲁克林主题）中，找到该行
Shopify.Image.switchImage(newImg, el, theme.showVariantImage);
将此行替换为
Shopify.Image.switchImage(newImg, el, timber.switchImage);
- 您要复制的最后一段 JS 位于 wood.cache 内产品页面注释下的第 23 和 27 行附近。将以下两行从 wood.js(Classic) 复制到 theme.js(Brooklyn)
$productImageWrap: $('#ProductPhoto'),$thumbImages: $('#ProductThumbs').find('a.product-single__thumbnail'),注意：注意结尾的逗号。 - 最后，您需要从 product.liquid 模板中复制与缩略图相关的标记。这以“{% if product.images.size > 1 %}”和相关的“{% endif %}”语句开头。
- 就是这样。您可以根据自己的喜好设置标记的样式，但单击图像现在应该交换特色图像而不刷新页面。如果它不起作用，请检查浏览器的控制台是否有错误。使用复制和粘贴代码，很容易错过可能破坏整个功能的必要逗号或结束标记。这需要注意细节。
如果您需要进一步的帮助，请提供您商店的链接。
【讨论】：