Big Cartel Luna主题：如何修改代码实现移动端与桌面端价格差异化显示

操作步骤 #

Luna主题默认全局统一产品信息的显示方式，要实现移动端信息放图片下方、桌面端悬停显示，不用改HTML，靠CSS媒体查询就能搞定：

1. 先设置桌面端默认模式
   进入Big Cartel后台的Luna主题「设计设置」，把产品列表信息设置为on rollover（悬停显示）——这是给桌面端用的默认样式。

2. 添加自定义CSS代码
   找到主题后台的「自定义CSS」（一般在设计设置最底部，或者单独的「自定义代码」选项里），粘贴以下代码：

   /* 针对屏幕宽度小于768px的设备（手机/平板竖屏），强制产品信息显示在图片下方 */
   @media screen and (max-width: 767px) {
     /* 取消悬停隐藏规则，让产品信息始终可见 */
     .product-grid .product .info {
       opacity: 1 !important;
       visibility: visible !important;
       position: relative !important;
       top: auto !important;
       transform: none !important;
     }
     /* 调整布局为垂直排列，实现图片在上、信息在下 */
     .product-grid .product {
       flex-direction: column;
     }
     /* 可选：调整图片与信息的间距，数值可自行修改 */
     .product-grid .product .image {
       margin-bottom: 10px;
     }
   }
   

   这段代码仅对移动端生效，会把原本悬停才显示的产品信息改成始终可见，同时调整布局为图片在下的样式。

3. 测试验证
   保存设置后，用手机访问店铺，或者在电脑浏览器按F12打开开发者工具、切换到移动端模拟器，确认桌面端仍为悬停显示，移动端信息在图片下方即可。

为什么不用修改HTML？ #

Luna主题的产品列表模板已经包含了图片和信息的完整结构，只是通过CSS控制显示规则和布局方式。直接用CSS媒体查询覆盖移动端样式，比修改HTML更简单，也不会破坏主题原有结构。

内容的提问来源于stack exchange，提问作者Davida S