Shopify 外掛程式的商品與商品系列顯示進階自訂
這些進階設定可協助您自訂在 WordPress 的線上店面、塑造品牌形象，並提升顧客的購買體驗。
本頁內容
Shopify 外掛程式與 Shopify 線上店面元件
Shopify 外掛程式以 Shopify Storefront Web Components 建置。以下元件是您 Shopify 線上店面的基礎組成：
- 商品卡片元件：此元件用來顯示單一商品資訊，通常出現在產品資訊或商品系列頁面。常見元素包含產品圖片、標題、價格，以及「加入購物車」按鈕。
- 商品快速檢視互動視窗元件：此元件會在既有內容上顯示互動視窗，提供商品詳情、「加入購物車」按鈕，以及檢視完整商品詳情的連結。
- 商品詳情頁面元件：此元件會顯示單一商品的完整詳情。每個商品詳情頁面元件都有唯一的網址。
- 商品系列元件：此元件會顯示您建立的商品系列。
Shopify 商品與商品系列的顯示自訂
外掛程式中預設的 Shopify 線上店面元件提供工具，協助打造流暢的購物體驗。您也能彈性自訂這些元件的顯示方式，使其符合您的品牌識別與設計需求。
若要進行這類自訂，您必須能修改 WordPress 佈景主題的檔案與目錄。此流程需要在目前使用的 WordPress 佈景主題目錄內建立一個專用資料夾。
步驟：
- 建立
Shopify資料夾：先在目前使用的佈景主題目錄中直接建立名為Shopify的新資料夾。此資料夾將作為自訂元件覆寫的集中位置。 - 覆寫個別元件：若要修改特定元件，請在新建立的 Shopify 資料夾中加入一個指定名稱的 PHP 檔案。這些覆寫檔的命名規則至關重要，外掛程式會據此辨識並套用您的自訂版本：
- 若要覆寫 商品卡片元件，請在
Shopify資料夾中建立名為product-card.php的 PHP 檔案。 - 若要覆寫 商品快速檢視互動視窗元件，請在
Shopify資料夾中建立名為modal.php的 PHP 檔案。 - 若要覆寫產品詳情頁元件，請在
Shopify資料夾內建立名為pdp.php的 PHP 檔案。 - 若要覆寫商品系列元件，請在
Shopify資料夾內建立名為component.php的 PHP 檔案。
- 若要覆寫 商品卡片元件，請在
建立自訂 PHP 檔案後，外掛會忽略該元素的預設元件檔案。您可以在這些覆寫檔案中加入任何程式碼，從靜態 HTML 區塊到複雜的 PHP 邏輯皆可。
雖然強烈建議沿用預設外掛架構所使用的 Shopify Storefront Web Components，以維持一致性並使用內建的 Shopify 功能，但您並不受限於此。您可以整合其他方式來擷取與顯示商品與商品系列資料，以進行進階自訂。
如需更多資訊與最佳做法，請參考 WordPress 外掛開發人員文件。
Shopify 商品與商品系列網址重寫
當您在 Shopify 發布商品或商品系列時，每個項目都會有唯一的網址。預設會使用您的 Shopify 網域建立這些網址。透過重寫功能，您可以使用公開的 WordPress 網域存取這些唯一網址。
步驟：
- 在 Shopify 外掛中，前往設定。
- 在進階分頁，確認Shopify 連結重寫區段中的兩個核取方塊已勾選。
- 前往永久連結。
- 點選儲存以套用此新規則。
- 前往您的 Shopify 管理介面，然後開啟要為其建立 WordPress 連結的商品或商品系列詳情頁面。
- 在「搜尋引擎產品資訊」卡片中，會顯示一組可讓顧客直接前往您的商品或商品系列的網址。例如：
https://johns-apparel.myshopify.com › products › huskee-reusable-cup。 - 在您的 WordPress 網站網址末端加入
products/huskee-reusable-cup。例如：https://johns-apparel-wordpress.com/products/huskee-reusable-cup。
自訂商品卡片行為
在 Shopify Storefront 元件中，商品詳情卡片有兩種類型：
- 快速檢視：將游標移到商品卡片上時，顧客可以選擇
快速選購。點擊後，商品詳情會在背景的現有內容上以彈出視窗或互動視窗的樣式顯示。 - 詳細產品頁面：當顧客點擊商品卡片（例如圖片或商品名稱）時，商品詳情會以完整頁面檢視顯示，並具有唯一網址。
您可以變更此設定，只顯示快速檢視、只顯示詳細產品頁面，或同時提供兩者。
步驟：
- 在 WordPress 的 Shopify 外掛中，前往設定。
- 在進階分頁，前往產品檢視區段。
- 選擇最適合您商店的選項。
- 點選儲存。