第 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;
}
}