第 175 期 将 Shopify 右侧产品描述移动到下方单独展示 避免网页拥挤显示太长

点击这里查看 带字幕 视频教程     本期 YouTube 链接(免登录观看 4K)

绝大部分 Shopify 主题都默认将产品描述展示在右侧,一般是购买按钮的下方,这样做肯定是有原因的。

但是也有很多人问过,如何将右侧的产品描述 (Description) 移动到下方单独展示,也就是像一个独立的分区模块 (Section) 一样。

哪种方式更好取决于每个人的主观感受,不过放在下方展示,的确特别适合产品描述中包含图片和视频比较多的情况。本期内容介绍实现方法。

参考视频教程进行操作:

<div class="page-width">
  <div class="rte">
    {{ product.description }}
  </div>
</div>

增强版主题推荐使用 Tabs 功能进行展示,点击可以切换对应的内容,提高交互性。另外,通过代码进行了调整,确保图片和视频等元素在移动端和 PC 端都能正常显示

关于移动端图片显示问题,可以复制以下代码添加到 base.css 文件底部:

@media screen and (max-width: 768px) {
  .page-width img {
    max-width: 100vw;
    margin-left: auto;
    margin-right: auto;
  }
}
第 142 期 适用于所有 Shopify 推出的主题 增强版本 添加三十几项功能
Shopify增强版主题,添加几十项功能,支持一键开启或关闭。适用于所有Shopify推出的 2.0 版九款主题,减少插件安装,降低每个月的插件订阅费。访问查看具体内容与视频演示

内容标签:   #Shopify 教程,   #Shopify 主题优化,   #Shopify 产品详情页,   #Shopify 店铺装修,   #Shopify 主题开发,   #Shopify提升转化