背景

本功能需要啟用 領券中心召回優化

依照文件操作後會在領券中心新增兩個樣式，分別為：

Coupon 立即按鈕 樣式
領券中心 前往購物車按鈕 樣式

修改檔案

進入 網店設計 > 編輯 HTML/CSS 功能，找到 theme.css.liquid

操作步驟

Step1. 新增立即使用按鈕樣式

請將以下樣式程式碼複製到 theme.css.liquid 中

.coupon-v2--disabled {
  .coupon-v2__claimed {
    font-weight: normal;
    color: #999;
  };
  .coupon-v2__apply-button {
    flex-shrink: 0;
    padding: 5px 16px;
    border: 0;
    border-radius: 3px;
    background-color: #333;
    color: #fff;
    &:hover {
      background-color: #666;
      color: #fff;
    }
    @media (max-width: 767px) {
      &:hover {
          background-color: #333;
      }
      &:active {
          background-color: #000;
      }
    }
  };
}

Step2. 新增前往購物車按鈕樣式

網頁無使用背景圖

繼續將以下樣式程式碼複製到 theme.css.liquid 中

如果您有設定背景顏色，請將 background 以及 box-shadow 的色碼改成網頁的色碼

.coupon-center-back-to-cart-container {
  position: sticky;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: #fff;
  box-shadow: 0 -24px 24px #fff;
  height: 128px;
  button {
    height: 40px;
    max-width: 343px;
    width: 100%;
    font-size: 16px;
    color: var(--primary-text, #fff);
  };
  @media (max-width: 767px) {
    height: 72px;
    box-shadow: none;
    button.btn.btn-color-primary {
      height: 44px;
      max-width: 100%;
      border-radius: 0;
    };
  }
};

網頁有使用背景圖

請將下方程式碼中的 {IMAGE_URL} 改成你背景圖片的網址，再將程式碼複製到 theme.css.liquid 中

.coupon-center-back-to-cart-container {
  position: sticky;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: #fff;
  height: 144px;
  box-shadow: none;
  backgound-image: url("{IMAGE_URL}");
  background-repeat: repeat;
  padding-top: 16px;
  button {
    height: 40px;
    max-width: 343px;
    width: 100%;
    font-size: 16px;
    color: var(--primary-text, #fff);
  };
  @media (max-width: 767px) {
    padding-top: 0;
    height: 72px;
    button.btn.btn-color-primary {
      height: 44px;
      max-width: 100%;
      border-radius: 0;
    };
  }
};

Step3. 按下保存並發布

檢查剛剛貼上的兩段程式碼正確後，按下保存並發布，就能成功在領券中心套用 立即使用 以及 前往購物車 按鈕樣式。

背景