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

更新于 Dec 2, 2024

绝大部分 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;
  }
}

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