Shopify產品變體太多, 產品頁面雜亂不堪? 試試 StarApps 的這4款應用

如果你在獨立站上銷售的是服裝箱包類等變體圖片特別多的產品，比方說某一款服裝，有7個顏色變體，每個變體有6張細節圖，如果你要把所有的圖片都放在產品頁面上，那麼就有42張圖片堆在一個產品頁面上。如果你選的主題能夠合理的控制Shopify產品變體圖片的展示，可能頁面會乾淨整潔很多。不過如何能像亞馬遜那樣展示變體信息呢？例如下圖中Color一共有20個變體顏色，假設每個變體都有3張細節圖要展示，那按照很多Shopify主題的“習慣”，比方說Debut或者Brooklyn，在左側可能就會堆積着60張產品圖片。。。變體越多，客戶的體驗也就越差。

最近 Shopify 在國內不太穩定，如果打不開 Shopify 官網, 或者打開速度很慢，無法註冊或者登錄 Shopify 賬戶，請使用“魔法”重試，你懂的。

先來看下安裝App之後的效果圖，（演示網站 https://demo.starapps.studio/products/printed-maxi-dress）如下圖所示，該產品一共有4個變體，每個變體有5張細節圖，因此一共有20張圖片，不過只有當用戶點擊了Print一欄中某個變體（例如紅色）的時候，在左側的大圖中才會展示相應變體（紅色）的細節圖，其他變體（綠色，棕色，青色）的細節圖自動隱藏。

同時，在選擇某個變體的時候，頁面中的標題以及產品描述信息也會隨之發生變化。上圖和下圖是Shopify同一個產品頁面展示的信息，簡單的比較可以看出來，在選擇不同變體信息的時候，左邊的大圖，產品的標題，以及產品的描述都隨之發生了改變。至少在功能上是不是和亞馬遜Listing頁面一模一樣了呢？

如果你的Shopify主題不支持類似亞馬遜那樣管理變體信息的功能，那麼你可以試試 Star Apps 開發的 4 款應用，讓你的Shopify產品頁面和亞馬遜的Listing頁面一樣展示更豐富信息的同時，頁面反而更加的整潔簡單。

Variant Options Swatch King 負責的是將變體色塊變成小圖片。
Variant Image Automator 負責的是在大圖位置只顯示當前變體的細節圖，隱藏其他變體圖片。
Product Description Tabs & FAQ 負責的是不同的變體展示不同的產品描述信息。
Variant Title King 負責的是不同的變體展示不同的產品標題。

Shopify產品變體插件 – Variant Options Swatch King

你可以按照自己的需求去選擇和安裝shopify主題，例如我之前推薦的Prestige這款主題，以及我所見過的大部分主題，在表達顏色變體信息的時候都是使用色塊，而不是小圖片（Swatch）來展示。如果你想讓色塊變成小圖片，那麼你可以安裝“Variant Options Swatch King”這款應用來實現。

安裝Variant Options Swatch King之後，這款應用會依據你的設置，在變體圖片選項中將模版自帶的色塊替換爲圖片。

APP的安裝過程很簡單，不再贅述，安裝成功之後，在Product Option Style settings板塊中會自動展示出你的網站所有設置的shopify產品變體，例如 Color，Size， Material，Type等等，如果沒有顯示或者顯示不完整，你可以點擊右上角的 Refresh option list 按鈕重新抓取。

Display Style 有 4 個選項，通常你選擇Automated Variant Image Swatch即可，如果你有其他需求，也可以使用 Color or Custom image swatch。

例如，我將上圖中的 Size 改爲 Pattern，然後Display style選擇 Color or custom image swatch，點擊Update swatch，給每個屬性值上傳一個提前製作好的花色圖案圖標。

保存好以上設置之後，在網站前臺的展示效果如下圖所示。下圖沒有考慮實際情況，只是做一個簡單的示例演示。

再比方說，如果你做的是寵物用品，牽引繩，狗窩等等產品，那麼你的產品頁面，除了可以使用這一應用展示顏色變體之外，是否可以將下圖中的 Size 改成狗狗的圖片，例如將Small改成泰迪犬的圖片，將Large改爲成年拉布拉多的圖片，這樣更加的直觀和形象？（舉例子的時候忽略了拉布拉多也是從小不點兒長大的，明白思路就好）

在App的設置頁面，Customize Swatch Style 板塊，可以調整Swatch的形狀，大小，邊框等等樣式，按照你的主題樣式進行設置和調整就可以。

安裝好 Variant Options Swatch King 這一應用之後，該應用默認是關閉狀態的，你需要完成上面的設置，然後在Master switch板塊中點擊 Enable 按鈕啓用應用，則網站前臺產品頁面會按照你的設置展示Swatch信息。

我在使用Prestige主題測試這款應用的時候，只要啓用，網站前臺變體就會由色塊變成圖片。如果這款應用不適配你使用的主題，或者根本不起作用，那麼你可以聯繫應用的作者，讓他們幫你免費修改主題的代碼。

Shopify產品變體插件 – Variant image automator

Variant image automator 相比較於上面的Variant Options Swatch King的設置就要簡單很多。

應用安裝好之後，在Pick Your Theme選項中選擇你在使用的主題，然後保存，如果你沒有在Pick your theme中找到你的主題，那麼可以直接點擊Fill it up鏈接，在彈窗中將你的產品頁面提交給插件的作者，他們會在48小時只能幫你搞定。

在選好主題之後，應用會自動給你發一封郵件，告訴你如何修改主題的代碼，以保證插件可以正常工作，例如Prestige主題需要做的修改如下圖郵件截圖所示。不過，如果你看不懂，只需要將“[email protected]”添加爲你的Shopify員工賬戶，並將網站主題，應用，以及產品頁面的編輯權限給到這個子賬戶，然後回覆郵件即可，應用開發者會幫你修改好主題的代碼。

修改好以上的代碼之後在上傳產品圖片的時候，將所有相同顏色的圖片放在一起，如下圖，白色圖片後面跟着白色圖片，黃色圖片跟着黃色圖片，然後把所有白色產品圖片中的第一張圖片作爲Variant的縮略圖，就可以了，Variant image automator這款應用會自動的將所有的產品圖片歸類好。

如果某幾張圖片要顯示在所有的變體圖片選項中，只需要將這幾張圖片放到Media/Image板塊的靠前位置即可。如下圖所示，當我們在網站前臺選擇黃色變體時，展示出來的圖片，除了兩張黃色產品圖片之外，還有放在Image板塊最靠前位置的兩張模特圖片。而白色，綠色，灰色的產品圖片自動隱藏了。

另外兩款應用 Product Description Tabs & FAQ 以及 Variant Title King 我沒有安裝試用，就不再贅述，你有需求的話，可以安裝試用下。