FROM CACHE - zh-cn_header

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

Eric__li
观光客
3 0 1

 

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

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

shopify-description-split-1-1.png

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

shopifans.myshopify.com_products_E4BAA7E59381E68F8FE8BFB0E58886E589B2-1.png

修改教程

第一步:

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

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

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

 

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

并将其替换为以下代码:

 

  1. <div class="product-single__description rte" id="first_product_description">
  2. {{ product.description | split: '<!-- split -->' | first }}
  3. </div>
  4. {% if product.description contains "<!-- split -->" %}
  5. <div class="product-single__description rte" id="last_product_description">
  6. {{ product.description | split: '<!-- split -->' | last }}
  7. </div>
  8. {% endif %}

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

第二步:

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

 

 

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

 

shopify-description-split-3.png

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

独立站卖家,adwords/seo爱好者
3 条回复3

leuphis
观光客
7 0 0

这样做的有点复杂了,直接样式控制会更合理

专注基于Shopify外贸营销推广,提供Shopify建站,谷歌广告,Facebook广告服务。
George211
访客
1 0 0

求教程

ldnio
观光客
3 0 0

老铁,具体怎么操作,请指点一下哈