shopify产品描述拆分为短秒速、长描述

Eric
36
文章
1
评论
2021年4月14日11:50:09 评论 792 855字阅读2分51秒

在大多数模板中,产品描述均位于产品页加购按钮之下。但是对于产品页面包含大量产品内容,图像或视频时,将描述进行拆分效果比较好。本文将展示如何将shopify产品描述拆分为两部分。

例如Brooklyn模板中的原始产品描述如下图,产品描述全在页面右侧

修改之后的产品描述如下图

修改教程

第一步:

在shopify后台,在线商店-->模板-->点击编辑代码

在section文件夹中找到 product-template.liquid 文件,这是我们需要编辑的文件。

然后在product-template.liquid中找到以下代码行,

<div class="product-single__description rte" itemprop="description">
 {{ product.description }}
</div>

并将其替换为以下代码:

<div class="product-single__description rte" id="first_product_description">
      {{ product.description | split: '<!-- split -->' | first }}
</div>
 {% if product.description contains "<!-- split -->" %}
<div class="product-single__description rte" id="last_product_description">
      {{ product.description | split: '<!-- split -->' | last }}
 </div>
{% endif %}

由于模板不同,具体样式需要进行细微调整。

第二步:

转到需要拆分描述的产品,然后在描述区域中选择 < > 符号“显示HTML”视图:

然后在html视图中,将  <!-- split -->  添加到描述需要拆分的地方。

注意:如果在代码视图中以外的任何地方输入<!– split –>,否则此功能将失效。另外,split分割标签不会出现在内容编辑器中;您必须在代码视图中才能看到它。

 

  • 版权声明: 发表于 2021年4月14日11:50:09
  • 转载注明:https://www.shopifyfans.com/split-shopify-product-description.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: