Shoptimized 主題產品徽章和布局設置

來到 Shopify 在線商店后臺，選擇 Online Store - Themes - Customize - Theme settings，

在模板編輯器側邊欄中找到 PRODUCT BADGES & LAYOUT SETTINGS 設置，

首先，來看 Arrow Styles 即控制產品系列滑動查看時的箭頭樣式設置，共有 2 種設置樣式，分別是：

• Left-Right (Disabled on Mobile)：左-右（移動端不可用）

• Bottom-Centered：底部居中

具體效果如下所示：

Left-Right (Disabled on Mobile)

Bottom-Centered

當選擇 Bottom-Centered 顯示樣式時，還可以勾選下面的 Hide border-bottom on the sections，

把底部邊框去掉，

接下來是 Collection Item Styles 即產品系列中的產品顯示風格，共有 3 種顯示風格，分別是：

• Show Products in Boxes：在方框中顯示產品；

• No boxes, but on hover over the box appears：沒有方框，但在鼠標懸停時會出現；

• No Boxes：沒有方框。

其中 Show Products in Boxes 即在方框中顯示產品的效果如下：

而 No Boxes 的效果顯示如下，如果產品圖是白底圖的話此處效果會更明顯。

接著再來看看兩個移動端產品布局設置，

Show 2.5 products on mobile：勾選即表示移動端產品系列布局顯示 2.5 個產品，而不勾選即默認情況下只顯示 2 個。

Use fixed swipe on mobile：控制在移動端產品系列中滑動時查看的產品數量。

然后是 Sale Button Style Option，即銷售徽標樣式設置，共有 6 種顯示樣式，分別是：

• Option 1

• Option 2

• Option 3

• Option 4

• Option 5

• No Sale Button

其各自顯示效果如下所示，

Option 1

Option 2

Option 3

Option 4

Option 5

No Sale Button

緊接著，下面還有一個 Product Layout Option 及產品布局選擇設置，共 5 種樣式，分別是：

• Option 1

• Option 2

• Option 3

• Option 4

• None

其各自顯示效果如下所示，

Option 1

Option 2

Option 3

Option 4

None

上面的 Option 1 和 Option 3 效果都是鼠標劃過懸停時顯示的，而 None 樣式則是當鼠標劃過懸停時只顯示 QUICK BUY 快速購買按鈕，不顯示產品節省的優惠金額（節省百分比或節省的具體金額）。

最后，來看看 Product Badges 即產品徽章，例如標識產品是新品/免運費/售罄/最暢銷，等等，

Shoptimized 主題中完整的產品徽章 Tag 列表如下所示，

• badge-freeshipping

• badge-bestseller

• badge-new

• badge-onsale

• badge-performance

• badge-savenow

• badge-toprated

• badge-preorder

• badge-instock

• badge-custom1

• badge-custom2

也可以使用自定義徽章，但要確保是透明的 PNG 格式。另外，還有一個指定徽章顯示位置的 Tag，例如控制產品徽章顯示在產品圖片右上角，等。

完整的產品徽章定位 Tag 列表如下所示：

• badgestyle-topright

• badgestyle-topleft

• badgestyle-middleleft

• badgestyle-middleright

• badgestyle-center

• badgestyle-bottomright

• badgestyle-bottomleft

使用時把上述對應的 Tag 添加到要顯示產品徽章的產品中即可，

另外要注意 Tag 必須完全一樣，區分大小寫。

好了，以上便是 Shoptimized 主題中有關產品徽章和布局設置的介紹，剩下還有一些關于字體樣式，大小及字體顏色等的設置，這些比較簡單，就不在這里展開說了。