正文 

当前位置： 首页 > 知识 >

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

     2023-02-15     139

关键词：

【中文标题】向每个 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 %

【讨论】：

如何添加 App Store 产品页面横幅

】如何添加AppStore产品页面横幅【英文标题】：HowtoaddanAppStoreproductpagebanner【发布时间】：2021-08-1801:11:41【问题描述】：我将Unity用于我的应用程序。浏览AppStore我看到了一些应用，例如“谷歌浏览器”，它们在商品详情中的图标... 查看详情

如何在 shopify 产品页面上添加自定义文本框字段

】如何在shopify产品页面上添加自定义文本框字段【英文标题】：Howtoaddcustomtextboxfieldonshopifyproductpage【发布时间】：2021-03-2519:43:00【问题描述】：我需要在shopify产品页面上添加自定义文本框字段。我的要求是在产品页面上添加文... 查看详情

如何在 Shopify 网站的产品页面中添加信用卡徽标

】如何在Shopify网站的产品页面中添加信用卡徽标【英文标题】：HowtoaddacreditcardlogointheproductpageofaShopifysite【发布时间】：2022-01-0218:09:35【问题描述】：查看我们的Shopify网站后，我意识到Shopify的一个主要困难在于，该主题似乎尽... 查看详情

如何开发一个改变产品页面的shopify应用程序？

】如何开发一个改变产品页面的shopify应用程序？【英文标题】：Howtodevelopashopifyapplicationthatmakechangeinproductpage?【发布时间】：2019-02-2801:12:20【问题描述】：我正在尝试开发一个Shopify推荐应用程序，它将推荐的​​捆绑产品嵌入... 查看详情

Shopify API Python 使用 Python API 上传多张图片

】ShopifyAPIPython使用PythonAPI上传多张图片【英文标题】：ShopifyAPIPythonMultiplePicturesuploadwithPythonAPI【发布时间】：2018-11-0209:12:24【问题描述】：我正在尝试使用PythonAPI在Shopify上添加多张图片，但是我无法将2张图片上传到一个产品。... 查看详情

Shopify：如何显示每个位置变体的库存数量？

】Shopify：如何显示每个位置变体的库存数量？【英文标题】：Shopify:Howtodisplayinventoryquantitiesofavariantperlocation?【发布时间】：2020-08-2408:00:11【问题描述】：是否可以在产品页面上显示每个位置的产品变型的库存数量？由于此信息... 查看详情

如何对 Shopify 应用进行负载测试？

】如何对Shopify应用进行负载测试？【英文标题】：HowdoyoudoaloadtestforaShopifyapp?【发布时间】：2021-11-1016:37:43【问题描述】：我有一个关于Shopify应用负载测试的技术问题。我的应用向不同的商店添加了一个备用产品页面，并且最终... 查看详情

尝试在 Shopify 中添加变体时出错

】尝试在Shopify中添加变体时出错【英文标题】：ErrorwhentryingtoaddavariantinShopify【发布时间】：2017-02-0813:42:27【问题描述】：我正在尝试向现有产品ID添加一个变体。下面是我完成的JSON请求。但是我得到一个错误"errors":"variant":"expec... 查看详情

在 Shopify 中添加自定义多图像部分

】在Shopify中添加自定义多图像部分【英文标题】：Addcustommulti-imagesectioninShopify【发布时间】：2019-12-1309:29:51【问题描述】：我正在尝试在Shopify中添加一个自定义部分，以允许用户上传2张宣传图片。我是新手，但我设法为1张图... 查看详情

如何使用 Shopify API 获取产品页面的 URL？

】如何使用ShopifyAPI获取产品页面的URL？【英文标题】：HowcanIgettheURLforproduct\'spageusingtheShopifyAPI?【发布时间】：2012-08-0711:02:59【问题描述】：我检查了Shopify产品API，但结果似乎没有返回产品页面URL。URL看起来像是在对标题进行一... 查看详情

Shopify 多个产品选项，将事件添加到生成的下拉选项中

】Shopify多个产品选项，将事件添加到生成的下拉选项中【英文标题】：ShopifyMultipleProductoptions,addeventtogenerateddropdownoptions【发布时间】：2013-07-3010:41:15【问题描述】：Shopify有现有的主题来使用具有多个选项的产品，如此处所述htt... 查看详情

使用 Shopify API Python，添加带有价格和“requires_shipping”的新产品：False

】使用ShopifyAPIPython，添加带有价格和“requires_shipping”的新产品：False【英文标题】：UsingShopifyAPIPython,addnewproductwithpriceand\'requires_shipping\':False【发布时间】：2018-02-0116:37:40【问题描述】：我正在尝试通过PythonShopifyAPI添加新产品... 查看详情

Shopify 将具有不同属性的多个产品添加到购物车

】Shopify将具有不同属性的多个产品添加到购物车【英文标题】：Shopifyaddmultipleproductstocartwithdifferentproperties【发布时间】：2020-01-0308:19:30【问题描述】：我想使用一个添加到购物车按钮将不同的产品添加到购物车。我也在用这个... 查看详情

在 Shopify 产品页面上显示一种颜色选项

】在Shopify产品页面上显示一种颜色选项【英文标题】：DisplayonecolouroptiononShopifyproductpage【发布时间】：2021-01-1810:47:02【问题描述】：我试图在任何时候只显示我产品的一种颜色变体。当我手动为每种产品颜色分配图像时，我可... 查看详情

在 Shopify 中，如何通过 url 将不同数量的多个产品添加到购物车

】在Shopify中，如何通过url将不同数量的多个产品添加到购物车【英文标题】：InShopifyhowtoaddmultipleproductstocartwithvaryingquantitiesviaurl【发布时间】：2019-09-2223:45:25【问题描述】：我知道在Shopify中您可以像这样添加多个产品：/cart/add?... 查看详情

在 Shopify JSON 模板中添加自定义表单字段

】在ShopifyJSON模板中添加自定义表单字段【英文标题】：AddingacustomformfieldinaShopifyJSONTemplate【发布时间】：2022-01-0617:26:21【问题描述】：我有一个使用新Dawn模板的Shopify商店，其中包括JSON模板。我想添加一个文本区域，客户可以... 查看详情

除了 Shopify 商店的主页之外，如何在任何页面中添加主页部分？

】除了Shopify商店的主页之外，如何在任何页面中添加主页部分？【英文标题】：HowcanIaddhome-pagesectionsinanypage,otherthanhome-pageinmyShopifyStore?【发布时间】：2020-03-2614:10:04【问题描述】：在我的Shopify商店中，我可以看到我可以使用我... 查看详情

使用布鲁克林主题在 Shopify 的收藏页面上显示所有颜色变体

】使用布鲁克林主题在Shopify的收藏页面上显示所有颜色变体【英文标题】：ShowAllColorVariantsonCollectionpageinShopifyusing***lynTheme【发布时间】：2016-05-1509:28:20【问题描述】：嘿，我在我的shopify网站上使用***lyn主题。我有不同的产品会... 查看详情