將彈出式尺寸表新增至您的商品頁面

中繼欄位能讓您儲存一般不會在 Shopify 管理介面擷取的特定資訊,藉此自訂 Shopify 商店的功能和外觀。中繼欄位可用於內部的 Shopify 管理介面,也能在網路商店中顯示。

您可以透過中繼欄位將頁面參考新增至彈出式視窗區塊,藉此在商品頁面顯示一個連結。點按該連結即會開啟顯示您頁面內容的彈出式視窗。使用頁面的 RTF 文字編輯器即可新增圖片和其他多媒體檔案。

舉例而言,您可以將以下這些彈出式視窗資訊新增至商品頁面:

  • 尺寸表
  • 保養說明
  • 組裝說明
  • 產品規格
  • 常見問題

這個 4 步驟教學課程旨在介紹頁面參考中繼欄位,並說明如何為頁面參考建立商品中繼欄位、為網路商店建立商品頁面範本、新增頁面、參考特定商品中的頁面,以及將商品頁面範本套用至特定商品。您可以使用本教學課程,在彈出式視窗中建立任何您想要的內容。本教學課程將繼續使用尺寸表的範例。

本教學課程需要使用 Online Store 2.0 佈景主題。如果您使用舊版佈景主題,或想要新增佈景主題不支援的中繼欄位類型,則可以編輯佈景主題程式碼聘僱 Shopify 合作夥伴

步驟 1:為頁面建立商品中繼欄位

首先,您必須為商品頁面建立頁面參考中繼欄位定義。商品中繼欄位會連結至特定頁面,並且可針對每件商品自訂內容。如果您未對使用相同範本的商品新增頁面參考,則彈出式視窗連結文字看起來仍像會連結至某內容。為了只在特定商品上顯示彈出式視窗連結,您可以建立商品範本並僅套用至相關商品。

透過頁面參考中繼欄位,您可為各類商品建立不同頁面以顯示不同的商品資訊。舉例來說,您可以分別為兩個年齡層建立不同的尺寸表頁面 (例如幼兒尺寸表和嬰兒尺寸表),然後只將幼兒尺寸表的頁面參考新增至幼兒相關商品。

您需要為頁面參考建立中繼欄位定義,才能將頁面參考連結至佈景主題編輯器中的彈出式視窗區塊。建立中繼欄位定義時,系統預設會選取「店面存取權限」。

步驟如下:

電腦版
  1. 在 Shopify 管理介面 中,前往「設定」>「自訂資料」。

  2. 在「中繼欄位定義」區段中,點按「商品」。

  3. 點擊「新增定義」。

  4. 名稱欄中,輸入尺寸表

  5. 按一下「⊕ 選取類型」。

  6. 從下拉式選單中選取「頁面」。系統預設會選取「一個頁面」。

  7. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「」>「設定」。
  2. 點選「自訂資料」。
  3. 在「中繼欄位定義」區段中,點選「商品」。
  4. 點選「+」。
  5. 名稱欄中,輸入尺寸表
  6. 點選「+ 選取類型」。
  7. 從下拉式選單中點選「頁面」。系統預設會選取「一個頁面」。
  8. 點選「儲存」。
Android
  1. Shopify 應用程式中,點選「」>「設定」。
  2. 點選「自訂資料」。
  3. 在「中繼欄位定義」區段中,點選「商品」。
  4. 點選「+」。
  5. 名稱欄中,輸入尺寸表
  6. 點選「+ 選取類型」。
  7. 從下拉式選單中點選「頁面」。系統預設會選取「一個頁面」。
  8. 點選「」以儲存。

步驟 2:建立商品頁面範本

本教學課程需要使用 Online Store 2.0 佈景主題。如果您使用舊版佈景主題,或想要新增佈景主題不支援的中繼欄位類型,則可以編輯佈景主題程式碼聘僱 Shopify 合作夥伴

新增區段或區塊後,您可以按一下動態來源圖示來選取中繼欄位:

連結動態來源圖示

如果您不想將彈出式尺寸表新增至所有商品,則需要建立新的商品頁面範本。按照這些步驟操作即可建立新的商品頁面範本,但您也可以選擇現有的商品頁面範本進行自訂。

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。
  2. 在您要自訂的佈景主題旁邊點擊「自訂」。
  3. 在編輯器頂端的「首頁」下拉式選單中按一下「產品」,然後點按「⊕ 建立範本」以建立和自訂新範本。
  4. 在「區段」導覽側邊欄中,前往「範本」>「產品資訊」區塊,然後按一下「⊕ 新增區塊」。
  5. 按一下「彈出式視窗」。
  6. Link 標籤欄中,輸入尺寸表。此處的文字應顯示顧客點按連結後出現的彈出式視窗頁面內容。
  7. 按一下「頁面」旁邊的動態來源圖示,然後點按以選取您所建立的頁面參考中繼欄位。
  8. 按一下「儲存」。
iPhone
  1. Shopify 應用程式中,點選「」>「網路商店」。
  2. 點選「管理所有佈景主題」。
  3. 點選您要自訂的佈景主題旁邊的「自訂」。
  4. 在編輯器頂端的「首頁」下拉式選單中點選「產品」,然後再點選「⊕ 建立範本」以建立和自訂新範本。
  5. 在「區段」導覽側邊欄中,前往「範本」>「產品資訊」區塊,然後點選「⊕ 新增區塊」。
  6. 點選「彈出式視窗」。
  7. Link 標籤欄中,輸入尺寸表。此處的文字應顯示顧客點按連結後出現的彈出式視窗頁面內容。
  8. 點選「頁面」旁邊的動態來源圖示,然後再點選您所建立的頁面參考中繼欄位。
  9. 點選「儲存」。
Android
  1. Shopify 應用程式中,點選「」>「網路商店」。
  2. 點選「管理所有佈景主題」。
  3. 點選您要自訂的佈景主題旁邊的「自訂」。
  4. 在編輯器頂端的「首頁」下拉式選單中點選「產品」,然後再點選「⊕ 建立範本」以建立和自訂新範本。
  5. 在「區段」導覽側邊欄中,前往「範本」>「產品資訊」區塊,然後點選「⊕ 新增區塊」。
  6. 點選「彈出式視窗」。
  7. Link 標籤欄中,輸入尺寸表。此處的文字應顯示顧客點按連結後出現的彈出式視窗頁面內容。
  8. 點選「頁面」旁邊的動態來源圖示,然後再點選您所建立的頁面參考中繼欄位。
  9. 點選「」以儲存佈景主題。

步驟 3:新增包含尺寸表的頁面

您必須建立一個包含中繼欄位參考內容的尺寸表頁面。如果已經建立該頁面,請跳到步驟 4。

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「頁面」。
  2. 按一下「新增頁面」
  3. 標題欄中,輸入尺寸表,然後在內容中新增尺寸表資訊。
  4. 在「公開性」區段中,將頁面設定為「可見」。
  5. 按一下「儲存」。
iPhone
  1. Shopify 應用程式中,點選「」>「網路商店」。
  2. 點一下「頁面」
  3. 點選「新增頁面」。
  4. 標題欄中,輸入尺寸表,然後在內容中新增尺寸表資訊。
  5. 在「公開性」區段中,將頁面設定為「可見」。
  6. 點選「儲存」。
Android
  1. Shopify 應用程式中,點選「」>「網路商店」。
  2. 點一下「頁面」
  3. 點選「新增頁面」。
  4. 標題欄中,輸入尺寸表,然後在內容中新增尺寸表資訊。
  5. 在「公開性」區段中,將頁面設定為「可見」。
  6. 點選「」以儲存。

您可以視需要建立中繼欄位參考的多個尺寸表頁面,但商品中繼欄位只能連結一個頁面。

步驟 4:參考頁面並將商品範本套用至特定商品

當您針對特定商品新增頁面參考時,該頁面的資訊只會與該商品一起顯示。如果某項商品使用該商品範本,而您未提供此商品的頁面參考,則連結文字仍會以連結形式顯示。不過,彈出式視窗會因為沒有頁面參考而呈現空白,這可能讓顧客感到困惑。您可以為有尺寸表的特定商品類型(例如服裝、鞋子)使用不同的商品頁面範本,然後為其他商品類型(例如兒童玩具、珠寶或其他飾物)使用另一個商品範本。

深入瞭解範本

步驟如下:

電腦版
  1. 在 Shopify 管理介面 中,前往「產品」。
  2. 按一下您要新增頁面參考的商品。
  3. 在「商品中繼欄位」區段,按一下「尺寸表」頁面參考,然後按一下「選取頁面」,並選取「尺寸表」頁面。
  4. 在「佈景主題範本」區段,選取您在步驟 2 建立的尺寸表商品頁面範本。
  5. 按一下「儲存」。
iPhone
  1. Shopify 應用程式中,前往「產品 > 所有產品」
  2. 點選您要新增頁面參考的商品。
  3. 在「商品中繼欄位」區段,點選「尺寸表」頁面參考,然後點選「選擇頁面」,並選取「尺寸表」頁面。
  4. 在「佈景主題範本」區段,選取您在步驟 2 建立的尺寸表商品頁面範本。
  5. 點選「儲存」。
Android
  1. Shopify 應用程式中,前往「產品 > 所有產品」
  2. 點選您要新增頁面參考的商品。
  3. 在「商品中繼欄位」區段,點選「尺寸表」頁面參考,然後點選「選擇頁面」,並選取「尺寸表」頁面。
  4. 在「佈景主題範本」區段,選取您在步驟 2 建立的尺寸表商品頁面範本。
  5. 點選「」以儲存。

您可以視需要對任意數量的商品重複這些步驟。

沒有找到您需要的答案嗎?我們很樂意為您提供協助。