Shopify Impulse主题移动端轮播内容定位及文本换行设置求助

一、移动端轮播文本与按钮位置调整 #

你需要调整移动端轮播的文本和按钮位置，使其匹配预期的居中布局效果。当前自定义CSS已做部分适配，可通过以下优化实现目标：

现有自定义CSS代码 #

.btn {
  color: #183170 !important;
  padding: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 25px;
}
@media only screen and (max-width: 1200px) {
  .animation-contents {
    text-align: center;
    display: block;
  }
  .btn {
    display: block;
    color: #183170 !important;
    padding: 0.5rem;
    padding-left: 0.1rem;
    padding-right: 0.1em;
    font-size: 15px;
  }
  .hero__subtitle {
    font-size: 1.3rem;
    display: block;
    vertical-align: middle;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

优化后的CSS代码 #

.btn {
  color: #183170 !important;
  padding: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 25px;
}
@media only screen and (max-width: 1200px) {
  /* 确保轮播内容容器整体居中 */
  .animation-contents {
    text-align: center;
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  /* 按钮居中显示，优化内边距与间距 */
  .btn {
    display: block;
    color: #183170 !important;
    padding: 0.5rem 1.5rem;
    font-size: 15px;
    margin: 10px auto 0;
    width: fit-content;
  }
  /* 副标题样式优化 */
  .hero__subtitle {
    font-size: 1.3rem;
    display: block;
    margin: 5px 0;
    line-height: 1.4;
  }
  /* 确保标题也居中对齐 */
  .hero__title {
    text-align: center;
    line-height: 1.3;
  }
}

说明：

• 给.btn添加margin: 10px auto 0，确保按钮在移动端居中并与副标题保持合理间距
• 调整按钮内边距为0.5rem 1.5rem，避免左右内边距过小导致按钮过窄
• 添加.hero__title的居中样式，保证标题布局统一

二、轮播文本字段添加换行 #

Shopify编辑器默认不支持直接换行，可通过以下两种方法实现：

方法1：插入HTML换行标签 #

在轮播文本字段中，需要换行的位置直接插入<br>标签，示例：

第一行宣传文本<br>第二行核心卖点<br>第三行引导内容

Shopify会自动解析HTML标签，实现前端换行效果。

方法2：使用CSS强制识别换行 #

如果不想插入HTML标签，给轮播文本容器添加以下CSS：

.hero__title, .hero__subtitle {
  white-space: pre-line;
}

添加后，在Shopify编辑器中输入文本时直接按回车键换行，保存后前端会自动识别并显示换行。

内容的提问来源于stack exchange，提问作者Diego Utreras