心得分享

有些时候需要在电脑端和手机端显示不同的内容，或者在一个端显示在另外一个端不显示。

有些主题模板的section部分有控制电脑端或者手机端显示的选项，但是大部分没有。

我们只需要简单修改一些代码即可实现这个功能。

首先在电脑上Chrome或者其他浏览器打开网页，然后按F12。找出section对应的代码。

先用鼠标点击右上角箭头，然后将鼠标移至对应的块上，观察右边元素，找到section-template-*这样的字样，连在一起的完整的一串就是块对应的ID代码。比如上图就是

section-template–17392001679585__multicolumn_xQYLTF-padding

记下这串代码。

去shopify后台-模板-编辑代码

到Assets文件夹中找到theme.css或者base.css，或者theme.scss.liquid，styles.scss.liquid等之类。

在这个文件最后增加代码。

只在电脑端显示：

/* Hide on screens smaller than 768px */
@media (max-width: 767px) {
  .section-template--17392001679585__multicolumn_xQYLTF-padding {
    display: none;
  }
}

在电脑端隐藏：

/* Initially hide the section */
.section-template--17392001679585__multicolumn_xQYLTF-padding {
  display: none;
}

/* Show only on screens smaller than 768px */
@media (max-width: 767px) {
  .section-template--17392001679585__multicolumn_xQYLTF-padding {
    display: block;
  }
}

将section-template–17392001679585__multicolumn_xQYLTF-padding替换为你自己的块代码。保存验证，记得清理缓存。