Shopify. 如何添加一个多组(行)的横幅

Ryan DeWitt January 12, 2016

Rating: 5.0/5. From 2 votes.

Please wait...

本教程展示了如何添加更多的一组(行)的横幅 Shopify theme.

Shopify. 如何添加一个多组(行)的横幅

在我们的案例模板中有6个横幅:
让我们再添加3个横幅(一行横幅). Open Chrome开发工具. You may use Firebug in Firefox browser. 我们可以看到类 custom_showcase and custom_showcase__1 are used. 为了添加横幅，我们应该修改模板文件和样式. 我们可以使用这样的类来定位模板文件中适当的代码部分:
确保您已经下载并解压缩了主题文件. Open software like Notepadd++ 以便在模板文件中搜索代码. 打开搜索对话框访问 Find and replace tab. 中指定类名 Find what field. 选择主题文件所在的文件夹，确保你有相同的选项，然后点击 Find All:
我们已经找到了有样式的文件. 我们应该在 responsive.css.liquid and style.css.liquid files. Open responsive.css.liquid file in Shopify editor. 找到合适的代码. 复制前三个横幅的代码:

粘贴代码下面的css代码的最后一个 banner. 更改类并保存更改:

Custom_showcase__1 ~ custom_showcase__7

从Custom_showcase__2到custom_showcase__8

从Custom_showcase__3到custom_showcase__9

现在我们应该执行类似的更改 style.less.liquid file. 在Shopify中打开文件 editor. 为三个横幅找到合适的代码并复制代码. 将最后一个块的代码粘贴到样式下面. 按照我们之前指定的方式更改类:
现在我们应该寻找定义横幅代码和设置的文件. 在我们的例子中，最好的方法是使用 custom_showcase keyword in template files. 在我们的案例中，应该对以下文件执行更改: settings_data.json, settings_schema.json, widget-homepage-showcase.liquid. Open settings_data.json in Shopify editor. Search code using custom_showcase keyword. 复制前三个横幅的代码:
对类执行更改，并将其添加到最后一个类的代码下面 banner. Save the changes:
现在我们要修改 settings_schema.json file. 搜索代码的适当部分使用 custom_showcase keyword. 我们可以看到第一个块的代码. 我们应该复制三个横幅的代码并更改类名. 将更新后的代码粘贴到最后一个代码的下面 banner. 更改区块编号(Block #1 应该改成 Block #7 etc.). 请查看教程视频版本了解更多详细信息:
We should also edit widget-homepage-showcase.liquid file. 在Shopify中打开文件 editor:
将数字更改为周期中横幅的数量. 在我们的例子中有9条横幅:
转到主题部分并单击 Customize theme. Open Custom blocks. 添加了新的横幅. 您可能需要为新横幅上传图像:
Refresh the page. 我们增加了一排新的横幅: