Introduction

此文件提供開啟「放大商品主圖套件」的完整教學，適用於已啟用 Layout Engine 的商家。

新版放大主圖功能支援：

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

功能展示範例：

加入放大商品主圖套件 style

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

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

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

...

.icon-zoom-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1;
  display: flex;
  padding: 10px;
  background: rgba(255, 255, 255, 0.6);
  svg {
    fill: var(--page-text, #333);
    width: 100%;
  }
}

.ProductDetail-product-gallery {
  .owl-carousel {
    overflow: hidden;
  }
  .icon-zoom-wrapper {
    pointer-events: none;
    position: absolute;
    top: 12px;
    right: 12px;
  }
}

.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;
  }
}

開啟放大商品主圖套件功能

請到商家後台，點擊右下角聯繫小幫手，請小幫手協助開啟放大商品主圖套件功能

前往商品頁面確認是否顯示

手機版本會在圖片上右上角額外顯示 zoom in Icon，引導使用者點擊。

手機、桌機版點擊商品圖片，都會進入新版的 popup 介面。

如需協助，請聯繫我們。

開啟放大主圖功能後，無需改動 HTML 結構，即可套用新版展示效果。