优化shopify:不使用app的情况下在Shopify添加公告栏(带计算包邮门槛)

如上图所示，公告栏是展示包邮、销售或其他促销活动的好办法。本文介绍一个不需要使用收费的app。只需在主题中复制几行代码就可以了（可以先熟悉一下如何在shopify添加css）！这个简单的功能，没必要装个app，越少的app，网站打开的速度就越快，对于优化shopify店铺来说，是个好方案。

这个公告栏还可以显示一个可选的“包邮计算”，所以购物者总是知道他们离包邮还差多少钱！以促进客户加购，提高客单价，下面就跟着我一步一步来实现吧：）

一、在shopify后台打开模板编辑器

在后台，在线商店 > 模板 > 编辑 > 编辑代码，如下图所示：

如果您的网站已经是正在运行的情况，我建议您制作一份模板副本，并在未发布的模板中进行操作，以避免破坏您的正常店铺。

二、添加一个新的Section

在模板编辑器左侧栏。在“Section”下，单击“新增 section”。在出现的弹出窗口中，输入名称“announcement-bar.liquid”。之后删除里面的默认代码。

三、复制粘贴代码

把下面的代码粘贴到这个文件里面后保存。

{% if section.settings.message %}
  {% if section.settings.home_page_only == false or template.name == 'index' %}
  <style>
    .announcement-bar {
      background-color: {{ section.settings.color_bg }};
      text-align:center;
      {% if section.settings.header_padding > 0 %}
        position:absolute;
        top: -{{ section.settings.header_padding }}px !important;
        left:0;
        width:100%;
        z-index:9;
      {% endif %}
    }
    .announcement-bar p {
      padding:10px 0;
      font-size: {{ section.settings.font_size }}px;
      margin:0 !important;
    }
    .announcement-bar__message,
    .announcement-bar--link {
      color: {{ section.settings.color_text }};
    }
    .announcement-bar--link:hover, 
    .announcement-bar--link:hover .announcement-bar__message {
      color: {{ section.settings.color_text_hover }} !important;
    }
    body {
      position:relative;
      top: {{ section.settings.header_padding }}px !important;
    }
  </style>

  {% if section.settings.message_link == blank %}
  <div class="announcement-bar">
    {% else %}
    <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
      {% endif %}

      {% capture shipping_value %}{{ section.settings.free_shipping_threshold | times: 100 }}{% endcapture %}
      {% assign cart_total = cart.total_price %}
      {% assign shipping_value_left = shipping_value | minus: cart_total %}
      {% assign shipping_value_left_money = shipping_value_left | money %}
      {% capture free_shipping_notqualified %}
        {{ section.settings.free_shipping_notqualified | replace: '[price]', shipping_value_left_money }}
      {% endcapture %}
      {% assign free_shipping_qualified = section.settings.free_shipping_qualified %}
      {% assign announcement_message = section.settings.message_text %}
      
      {% if section.settings.free_shipping_countdown %}
        {% if cart.total_price > 0 %}
          {% assign announcement_message = free_shipping_notqualified %}
        {% endif %}
        {% if shipping_value_left <= 0 %}
          {% assign announcement_message = free_shipping_qualified %}
        {% endif %}
      {% endif %}
      
      <p class="announcement-bar__message">{{ announcement_message }}</p>

      {% if section.settings.message_link == blank %}
      </div>
    {% else %}
    </a>
  {% endif %}

  {% endif %}
{% endif %}

<style>
  
</style>

{% schema %}
  {
    "name": "公告栏",
    "settings": [
      {
        "type": "header",
        "content": "通用"
      },
      {
        "type": "checkbox",
        "id": "message",
        "label": "显示公告",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "home_page_only",
        "label": "只在主页显示",
        "default": false
      },
    {
        "type":   "range",
        "id":     "header_padding",
        "min":    0,
        "max":    100,
        "step":   1,
        "unit":   "px",
        "label":  "顶部间距",
        "default":   0,
    "info":   "将页面内容向下推到公告栏下方（仅在某些主题上需要）"
      },
    {
        "type": "header",
        "content": "内容"
      },
      {
        "type": "text",
        "id": "message_text",
        "label": "公告",
        "default": "这里填公告内容"
      },
    {
        "type": "checkbox",
        "id": "free_shipping_countdown",
        "label": "显示包邮倒计时",
    "info": "告诉客户需要添加到购物车中多少才能获得免费配送（仅当购物车中至少有一个商品时才会显示）.",
        "default": false
      },
    {
        "type":   "range",
        "id":     "free_shipping_threshold",
        "min":    5,
        "max":    100,
        "step":   1,
        "unit":   "$",
        "label":  "包邮门槛",
        "default":   25,
    "info":   "客户免费配送的金额（必须与您的配送设置匹配）。"
      },
    {
        "type": "textarea",
        "id": "free_shipping_notqualified",
        "label": "不符合包邮的信息",
        "default": "Add just [price] to your cart to receive free shipping!"
      },
    {
        "type": "textarea",
        "id": "free_shipping_qualified",
        "label": "符合包邮的信息",
        "default": "Your order qualifies for free shipping!"
      },
      {
        "type": "url",
        "id": "message_link",
        "label": "链接",
        "info": "可选"
      },
    {
        "type": "header",
        "content": "字体和颜色"
      },
      {
        "type": "color",
        "id": "color_bg",
        "label": "背景颜色",
        "default": "#333333"
      },
      {
        "type": "color",
        "id": "color_text",
        "label": "文字颜色",
        "default": "#ffffff"
      },
    {
        "type": "color",
        "id": "color_text_hover",
        "label": "链接颜色",
        "default": "#eeeeee"
      },
    {
        "type":   "range",
        "id":     "font_size",
        "min":    8,
        "max":    36,
        "step":   1,
        "unit":   "px",
        "label":  "字体大小",
        "default":   14
      }
    ]
  }
{% endschema %}

如下图所示：

四、在模板编辑器中打开 theme.liquid 文件

您可以在侧边栏顶部的layout文件夹中找到theme.liquid，如下图所示。

五、在 theme.liquid 文件里添加一行代码

在theme.liquid中，查找如下代码：

{% section 'header' %}

不同的主题模板，它可能被名字不太一样，但它可能有单词“header”。其他一些常见的名字是：

{% section 'general-header' %}
 
{% section 'dynamic-header' %}

在这行代码上方，复制并粘贴以下内容：

{% section 'announcement-bar' %}

如下图所示：

六、进入自定义模板设置公告栏

完成以上操作后，这个公告栏就已经大功告成了！我们进入自定义模板界面里面（在线商店 -> 模板 -> 自定义），就会看见多出来一个公告栏的项目，点击进入，可以看到里面有一些配置，可以根据你自己的需要来进行进一步的调整，比如公告信息、颜色、字体大小、链接、包邮价格设置等。

如此：就完成了这个功能，省去了安装app还要付费，岂不是很爽！