來到 Shopify 在線商店后臺(tái)，選擇 Online Store - Themes - Customize - Theme settings，

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

首先，來看 Arrow Styles 即控制產(chǎn)品系列滑動(dòng)查看時(shí)的箭頭樣式設(shè)置，共有 2 種設(shè)置樣式，分別是：

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

• Bottom-Centered：底部居中

具體效果如下所示：

Left-Right (Disabled on Mobile)

Bottom-Centered

當(dāng)選擇 Bottom-Centered 顯示樣式時(shí)，還可以勾選下面的 Hide border-bottom on the sections，

把底部邊框去掉，

接下來是 Collection Item Styles 即產(chǎn)品系列中的產(chǎn)品顯示風(fēng)格，共有 3 種顯示風(fēng)格，分別是：

• Show Products in Boxes：在方框中顯示產(chǎn)品；

• No boxes, but on hover over the box appears：沒有方框，但在鼠標(biāo)懸停時(shí)會(huì)出現(xiàn)；

• No Boxes：沒有方框。

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

而 No Boxes 的效果顯示如下，如果產(chǎn)品圖是白底圖的話此處效果會(huì)更明顯。

接著再來看看兩個(gè)移動(dòng)端產(chǎn)品布局設(shè)置，

Show 2.5 products on mobile：勾選即表示移動(dòng)端產(chǎn)品系列布局顯示 2.5 個(gè)產(chǎn)品，而不勾選即默認(rèn)情況下只顯示 2 個(gè)。

Use fixed swipe on mobile：控制在移動(dòng)端產(chǎn)品系列中滑動(dòng)時(shí)查看的產(chǎn)品數(shù)量。

然后是 Sale Button Style Option，即銷售徽標(biāo)樣式設(shè)置，共有 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

緊接著，下面還有一個(gè) Product Layout Option 及產(chǎn)品布局選擇設(shè)置，共 5 種樣式，分別是：

• Option 1

• Option 2

• Option 3

• Option 4

• None

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

Option 1

Option 2

Option 3

Option 4

None

上面的 Option 1 和 Option 3 效果都是鼠標(biāo)劃過懸停時(shí)顯示的，而 None 樣式則是當(dāng)鼠標(biāo)劃過懸停時(shí)只顯示 QUICK BUY 快速購買按鈕，不顯示產(chǎn)品節(jié)省的優(yōu)惠金額（節(jié)省百分比或節(jié)省的具體金額）。

最后，來看看 Product Badges 即產(chǎn)品徽章，例如標(biāo)識(shí)產(chǎn)品是新品/免運(yùn)費(fèi)/售罄/最暢銷，等等，

Shoptimized 主題中完整的產(chǎn)品徽章 Tag 列表如下所示，

• badge-freeshipping

• badge-bestseller

• badge-new

• badge-onsale

• badge-performance

• badge-savenow

• badge-toprated

• badge-preorder

• badge-instock

• badge-custom1

• badge-custom2

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

完整的產(chǎn)品徽章定位 Tag 列表如下所示：

• badgestyle-topright

• badgestyle-topleft

• badgestyle-middleleft

• badgestyle-middleright

• badgestyle-center

• badgestyle-bottomright

• badgestyle-bottomleft

使用時(shí)把上述對應(yīng)的 Tag 添加到要顯示產(chǎn)品徽章的產(chǎn)品中即可，

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

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