在佈景主題編輯器中自動產生佈景主題區塊

透過 Shopify Magic,您可以使用人工智慧 (AI),根據您提供的詳情,在您的 佈景主題編輯器 中產生新的 佈景主題區塊

產生佈景主題區塊的注意事項

請先閱讀下列產生佈景主題區塊時的注意事項:

  • AI 產生的程式碼不見得完美,可能出現錯誤、非預期結果,或不完全符合無障礙功能或成效的最佳做法。您有責任檢視、測試,並確保產生的區塊符合您的標準且能正確運作。
  • 請在佈景主題編輯器的預覽畫面中,分別以電腦版與行動版檢視預覽區塊的外觀。
  • 如果您的區塊包含自訂設定,新增後請測試這些設定,確認能如預期運作。
  • 產生佈景主題區塊後,該區塊的新 Liquid 檔案會新增至您佈景主題程式碼中的 blocks 資料夾。
    • 佈景主題區塊由 Liquid(Shopify 的範本語言) 組成。區塊檔案也包含 HTML、CSS、JSON 與 JavaScript。產生佈景主題區塊後,該區塊的新 Liquid 檔案會新增至 blocks 您佈景主題的程式碼中的資料夾。
      佈景主題程式碼編輯器中的 blocks 資料夾
    • 若要透過修改程式碼來編輯已產生的佈景主題區塊,您可以編輯您的 theme code。僅在您熟悉 HTML 與 CSS,並具備基本的 Liquid 概念時,才建議編輯佈景主題程式碼。
    • Shopify Magic 產生的 Liquid 檔案是自成一體的。佈景主題商店發佈新版本時,您仍可 update your theme

產生佈景主題區塊的資格條件

請先閱讀下列產生佈景主題區塊的需求。

定價方案需求

您的商店必須使用下列其中一種 pricing plans

  • 免費試用
  • Basic
  • Growth
  • Advanced
  • Plus

Starter 方案不提供此功能,該方案使用的是 Spotlight 佈景主題,且不支援新增自訂的佈景主題區段或區塊。

佈景主題相容性

Shopify 佈景主題商店上的所有佈景主題皆可使用佈景主題區塊產生功能。若您使用的是相容的第三方佈景主題,則必須先購買該佈景主題才能產生佈景主題區塊,因為免費試用版不支援此功能。

舊版佈景主題不提供此功能。深入瞭解不同佈景主題架構版本的功能

使用者權限需求

下列使用者可以在佈景主題中產生區塊:

撰寫有效佈景主題區塊提示的秘訣

產生的區塊品質通常取決於提示的品質。請遵循以下最佳做法:

  • 具體且具描述性:提示長度應至少為五個字。包含較多細節的較長提示較可能帶來更準確的結果。例如,請輸入建立一個左側為圖片,右側為標題、段落文字和「立即購買」按鈕的區塊,並在行動裝置上採用堆疊顯示,而不要只輸入新增圖片和文字
  • 提及內容元素:列出區塊所需的內容類型,例如標題、段落、圖片、按鈕、表單和圖示。
  • 建議版面配置:描述區塊中元素的排列方式,例如並排、網格、置中或交錯的列。
  • 包含自訂設定:如果您希望區塊在佈景主題編輯器中具備特定的可編輯設定 (例如變更圖片、文字或按鈕連結的選項),請將這些設定包含在提示中。例如,若要在包含影片的區塊中加入控制動畫速度的設定,請輸入包含控制動畫速度的設定
  • 利用後續指示反覆調整:如果第一次的結果未盡理想,請使用更多細節或不同的措辭來調整提示,然後再次產生。

請參考以下符合最佳做法的提示範例:

  • 顧客評價區塊,包含顧客照片、引文文字、顧客名稱與 5 星評等顯示。
  • 左右並排的功能區塊:左側有圖示與標題,右側為說明文字。
  • 全寬橫幅:含背景圖片、置中的大標題,下方為較小的副標題文字,並包含行動號召按鈕。

產生佈景主題區塊

產生區塊並決定保留後,系統會將新區塊加入區塊選擇器。您可以將此區塊加入支援佈景主題區塊的相容區段。

步驟:

  1. 在 Shopify 管理介面中,前往 線上商店 > 佈景主題

  2. 找到要編輯的佈景主題,然後按一下 編輯佈景主題

  3. 自訂首頁,或點選 首頁 下拉式選單,接著選取您要新增區段的範本。

  4. 按一下您要在其中產生區塊的區段。

  5. 按一下 新增區塊

  6. 按一下 產生

  7. 輸入您想產生的區塊說明。

  8. 按一下 產生。Shopify Magic 會處理您的要求並產生程式碼。

  9. 直接在佈景主題編輯器中預覽已產生的區塊。若也有產生自訂設定,您即可自訂區塊。

  10. 如果您對產生的區塊滿意,按一下 保留。否則,您可以捨棄該區塊,或提供進一步指示。

從佈景主題中刪除產生的佈景主題區塊

產生佈景主題區塊後,系統會將該區塊的新 Liquid 檔案新增到您佈景主題程式碼中的 blocks 資料夾。如果產生的佈景主題區塊在商店造成問題,您可以在佈景主題程式碼中刪除對應的 Liquid 檔案來移除它。

步驟:

  1. 在 Shopify 管理介面中,前往 線上商店 > 佈景主題

  2. 在要編輯的佈景主題旁,按一下 編輯佈景主題

  3. 自訂首頁,或點選 首頁 下拉式選單,接著選取您要新增區段的範本。

  4. 按一下包含您要刪除區塊的區段。若您先前已將該區塊全部移除,請按一下 新增區塊,從區塊選擇器重新加入該區塊。

  5. 在該區塊的設定中,按一下 水平選單 > 程式碼 編輯程式碼

  6. 在側邊欄選單中,按一下 blocks 資料夾以展開,然後找到您目前檢視的區塊檔案。該檔案名稱會與目前開啟的區塊名稱相同,並以 .liquid 結尾。

    佈景主題程式碼編輯器的 blocks 資料夾與要刪除的已開啟佈景主題區塊檔案

  7. 在側邊欄選單中,按一下該區塊檔案旁的 刪除 圖示。

  8. 在對話方塊中,按一下 刪除檔案 以確認。