如何创建Shopify主题预览模式下的自定义Close Preview按钮？

核心思路 #

Shopify主题预览状态下，页面会携带专属的URL参数（如preview_theme_id），同时Liquid提供了request.preview_mode变量用于识别预览状态，我们可以基于这两点实现自定义关闭按钮，并通过URL参数处理完成退出预览的动作。

具体实现步骤 #

1. 识别预览模式
   在主题的核心模板（比如theme.liquid的<body>标签内合适位置），通过Liquid判断当前是否处于预览状态：

{% if request.preview_mode %}
  <!-- 自定义按钮代码将放在此处 -->
{% endif %}

2. 添加自定义按钮的结构与样式
   直接编写HTML和CSS，实现和示例图匹配的按钮样式（以下示例为固定在右上角的深色按钮，可按需调整）：

{% if request.preview_mode %}
  <style>
    .custom-close-preview {
      position: fixed;
      top: 16px;
      right: 16px;
      padding: 8px 16px;
      background-color: #2d3748;
      color: #ffffff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      z-index: 9999;
      transition: background-color 0.2s;
    }
    .custom-close-preview:hover {
      background-color: #4a5568;
    }
  </style>
  <button class="custom-close-preview" onclick="exitPreview()">Close Preview</button>
{% endif %}

3. 实现退出预览的逻辑
   添加JavaScript代码，通过移除URL中的预览参数来退出预览状态：

<script>
function exitPreview() {
  const currentUrl = new URL(window.location.href);
  // 移除所有预览相关参数
  currentUrl.searchParams.delete('preview_theme_id');
  currentUrl.searchParams.delete('preview');
  // 跳转到清理参数后的页面
  window.location.href = currentUrl.toString();
}
</script>

补充说明 #

• 该方案无需依赖Shopify未公开的API，完全基于官方提供的Liquid变量和前端URL处理实现，兼容性稳定。
• 按钮的样式、位置、文案都可以根据需求自由修改，比如调整颜色、增加图标等。
• 如果主题自带Shopify官方的预览栏，自定义按钮不会与其冲突，两者可同时存在。

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