shopify的布鲁克林主题

Question

我目前订阅了Shopify并正在使用＆＃34; Brooklyn＆＃34;主题。我本质上希望产品页面上出现的图像是幻灯片格式，而不是它们出现在另一个之下，因为向下滚动以便看到所有图像都很繁琐。任何人都有这个主题的经验可以帮助我吗？非常感谢。

Answer 1

你想要达到的目标在＆＃34;有用的人类＆＃34;在这个链接。 https://ecommerce.shopify.com/c/ecommerce-design/t/change-product-photos-to-thumbnails-under-main-image-in-brooklyn-theme-272292

我按照此修改我的布鲁克林主题来修改产品。有一些修改要做。

1. 从商店管理员处安装经典主题（但不要发布）。
2. 转到在线商店＆gt;主题＆gt;然后单击“经典主题”下拉列表中的“编辑HTML / CSS”
3. 打开Assets文件夹，然后单击timber.js.liquid文件。
4. 在单独的标签页中打开布鲁克林主题的HTML / CSS。 （请在尝试之前备份）并编辑＆＃39; theme.js.liquid＆＃39;布鲁克林主题文件
5. 在Class主题timber.js中，您将看到一行代码为timber.productImageSwitch（）;在init函数中。这是我们需要的功能。将此行复制并粘贴到theme.js文件中的相同timber.init函数
6. 您还需要复制文件下方的实际功能代码（第175 - 207行）。要确保您正在抓取正确的代码，请在页面（cmd + F）中搜索productImageSwitch，然后您将看到相关的函数以及switchImage函数。将这两个函数完全复制并传递到theme.js。

7. 现在在theme.js文件（布鲁克林主题）中，找到行

   Shopify.Image.switchImage(newImg, el, theme.showVariantImage);

用此替换此行     Shopify.Image.switchImage(newImg, el, timber.switchImage);

1. 您想要复制的最后一段JS是在timber.cache里面的Product Page注释下的23行和27行。将以下两行从timber.js（经典）复制到theme.js（布鲁克林） $productImageWrap: $('#ProductPhoto'), $thumbImages: $('#ProductThumbs').find('a.product-single__thumbnail'), 注意：记下尾随的逗号。
2. 最后，您要从与缩略图相关的product.liquid模板中复制标记。这开始于＆＃34; {％if product.images.size＆gt; 1％}＆＃34;和相关的＆＃34; {％endif％}＆＃34;声明。
3. 那就是它。您可以按照自己喜欢的方式设置标记样式，但单击图像现在应该交换特色图像而不刷新页面。如果它不起作用，请检查浏览器的控制台是否有错误。使用复制和粘贴代码时，错过必要的逗号或结束标记可能会破坏整个功能。这需要注意细节。

如果您需要进一步的帮助，请提供您商店的链接。