向每个 Shopify 产品系列页面添加图片横幅

Posted 2023-02-15

【中文标题】向每个 Shopify 产品系列页面添加图片横幅

【英文标题】：Adding an Image Banner to Each Shopify Collection Page

【发布时间】：2020-06-29 20:49:00

【问题描述】：

我需要一些帮助。我正在为使用 Shopify 的客户开发一个网站。

网站需要根据创建集合时上传的集合图像为每个集合页面设置一个横幅。

我被告知我可以使用此代码来执行此操作...

% if collection.image % collection.image | img_url: 'medium' % endif %

我查看了 Shopify 代码编辑部分，并检查了模板部分中的 collection.liquid 代码，但没有看到添加此代码的地方。然后我检查了section部分中的collection-template.liquid部分，但我仍然没有看到可以添加它的地方。

我应该在哪里添加此代码？

我不熟悉 Shopify Liquid 代码系统。我只知道如何编写 html 和 CSS。

如果有帮助，我正在使用 Everything 主题。

【问题讨论】：

看不到添加此代码的地方是什么意思？只需将其添加到 collection.liquid 或 collection-template.liquid

【参考方案1】：

我找不到名为“Everything Main”的主题，但我可以通过其中一个免费主题向您展示如何使用它。在本例中，我使用的是“供应”。

所以，首先打开 /sections/collection-template.liquid 文件并查找以下代码：

        <header class="section-header">
          <h1 class="section-header--title h1"> collection.title </h1>
          <div class="rte rte--header">
             collection.description 
          </div>
       </header>

这会显示集合描述，以防它不为空。现在如果你想显示集合图像，这个 sn-p 看起来像这样：

        <header class="section-header">
          <h1 class="section-header--title h1"> collection.title </h1>
          <div class="rte rte--header">
             collection.description 
          </div>
          % if collection.image %<div><img src=" collection.image | img_url: 'medium' " /></div>% endif %
       </header>

因此，如果图像不是空白的，则会插入一个包含您的图像的容器。

罗马

【参考方案2】：

% if collection.image %

<imgsrc=" collection.image | img_url: 'medium' ">

% endif %