Introduction

此文件提供開啟「獨立分潤賣場放大商品圖片套件」的完整教學，適用於已啟用 Layout Engine 的商家。

新版放大主圖功能支援：

組合商品彈出視窗，商品圖片新增圖片 popup 功能
多規格商品彈出視窗，優化商品圖片 popup 功能

獨立分潤賣場放大商品圖片套件功能：

更高解析度商品圖片
桌機版點擊圖片放大、縮小
手機版手勢縮放
圖片輪播與圖片數量顯示

功能展示範例：

加入獨立分潤賣場放大商品圖片套件 style

到後台選擇左邊的目錄，點選 網店設計 -> 編輯 HTML/CSS。

點擊搜尋框，輸入 theme.css，篩選出 theme.css.liquid 檔案，並且點擊進入編輯。

將以下整段 css 貼到 theme.css.liquid 最下方。此部分 style 是處理放大主圖套件的輪播及手機版的 zoom in Icon 樣式，建議先處理好後再聯繫專員開通]功能。

.photoswipe-dot {
  display: block;
  margin: 0px;
  padding: 5px;
  span {
    width: 6px;
    height: 6px;
    display: block;
    transition: opacity .2s ease;
    border-radius: 30px;
    margin: 0;
    background: #fff;
    border: 1px solid #eee;
  }
  &.photoswipe-dot-active span {
    background: #c74060;
  }
}