建立信任徽章

信任徽章是由付款、安全、運送、保證或政策圖示組成的區塊，可搭配選填的標題和說明。編輯器分為兩個分頁：Design 用於內容與樣式，Placement 用於設定內建的商品頁面位置和短代碼。

1. 開啟 Trust Badges

   在 Shopify 後台中，開啟 Sami Product Labels，在應用程式導覽中選擇 Extra Features，然後選擇 Trust Badges 分頁。

   如果您已有信任徽章，頁面會以表格顯示。如果清單是空的，頁面會改為顯示 Create your first trust badge 面板。

   

   Trust Badges 分頁包含建立動作、已儲存的信任徽章和精選範本。

2. 選擇開始方式

   點擊 Create trust badge。當表格顯示時，此按鈕會出現在頁面標題處；如果您尚未建立任何信任徽章，則會出現在空白狀態面板中。

   捲動到 Featured templates。點擊 View all templates 即可顯示全部四種設計：Eco-Friendly template、With payment method、Policies store template 和 Badge box template。點擊範本上的 Select，即可開啟已套用圖示和樣式的範本。

   兩種方式都會在 Design 分頁開啟編輯器。

   

   從頭建立信任徽章，或選擇四種精選範本之一。

3. 為信任徽章命名

   名稱欄位位於預覽上方。將 New Trust Badge 替換為不超過 50 個字元的名稱。此名稱僅用於在應用程式中辨識信任徽章，不會顯示給顧客。

   

   使用清楚的內部名稱，方便在表格中找到信任徽章。

4. 新增標題與說明

   在 Content & Badges 中，開啟 Title 和 Description，並輸入顯示在圖示上方的選填文字。這兩個欄位都支援粗體、斜體、底線、表情符號、文字對齊和原始碼模式。

   這些欄位依語言分別設定，標籤會顯示目前的語言，例如 Title (en)。使用預覽上方的語言選擇器即可編輯其他語言。

   如果只想顯示圖示，請將兩個欄位都留空。

   

   Title 和 Description 為選填的富文字欄位，每種語言需分別編輯。

5. 新增徽章圖示

   在 Badges 下，點擊 Add Badge，然後選擇：

   選項	功能
   Select badge image	開啟 Select Image 對話框。
   Line break	讓後面的圖示從新的一列開始。

   在 Select Image 中，使用 Search images 尋找圖示。Library 來源包含超過 400 張付款、安全、運送、保證和政策圖片；目前的項目數量會顯示在來源名稱旁。選取一張或多張圖片，然後點擊 Select Image。

   切換到 Design your Images，即可使用上傳、從網址匯入或相關的自訂設計。選取圖片後，若想在新增前建立變化版本，請點擊 Edit with AI。

   

   搜尋內建圖片庫或切換到 Design your Images，然後確認您的選擇。

6. 重新排序並設定每個圖示

   每個圖示都會在 Badges 清單中顯示為一列。拖曳該列的把手可變更顯示順序，或點擊 Delete 移除。使用 Line break 項目可控制新的一列從哪裡開始。

   點擊該列的 General 按鈕即可開啟其設定：

   • Change Image：替換所選的圖示。
   • Link：讓圖示開啟某個網址；使用外部連結選項可在新分頁中開啟。
   • Tooltip：新增最多 150 個字元，當購物者將游標移到圖示上時顯示。
   • Layout colors：為內建 SVG 圖示中支援的圖層重新上色。

   

   拖曳圖示即可重新排序，並使用 General 變更圖片、連結、提示文字或支援的顏色。

7. 設定信任徽章區塊的樣式

   使用可收合的設計區段，讓信任徽章與您的佈景主題相符：

   區段	主要設定
   Design Main Section	區塊寬度、外距、內距、邊框大小／樣式／顏色、陰影和圓角半徑。
   Design title & description	標題和說明的自訂字型、顏色、字型大小和行高。
   Design Badge	單色、卡片單色、原色或卡片原色樣式；對齊方式；寬度和高度；外距；以及動畫。
   Responsive size	平板和手機各自獨立的圖示寬度和高度。
   Advance Section	自訂 CSS，以及可點擊的信任徽章選擇器 CSS 參考。

   可用的動畫有 SlideInUp、SadeInDown、BounceIn、FlipInX 和 ZoomIn。開啟 Animation，選擇效果，並使用播放按鈕預覽。

   

   開啟各個設計區段，即可設定容器、文字、圖示、響應式尺寸和自訂 CSS 的樣式。

   注意

   在 Advance Section 中，點擊 CSS reference 內的選擇器，即可將其範圍規則插入自訂 CSS 編輯器。

8. 選擇信任徽章的顯示位置

   切換到 Placement 分頁：

   選項	功能
   Product page	開啟開關後，會在所有商品頁面上應用程式內建的位置顯示信任徽章。
   Shortcode	若想將信任徽章放在佈景主題中的自訂位置，請複製程式碼片段。

   尚未儲存的信任徽章，其短代碼會使用 data-id="new"。請先儲存信任徽章，再將該程式碼片段放入佈景主題中。

   

   使用內建的商品頁面位置，或複製短代碼以放在自訂位置。

   注意

   完整的佈景主題編輯器操作流程，請參閱使用短代碼放置信任徽章。

9. 預覽並儲存

   使用預覽上方的控制項可以：

   • 切換編輯語言；
   • 預覽 Product page；
   • 在桌機和手機檢視之間切換；
   • 顯示或隱藏範例商品；
   • 將信任徽章設為 Active 或 Draft。

   確認預覽後，點擊右上角的 Save。如果想在不保留未儲存編輯的情況下離開，請點擊 Discard。

   

   預覽結果，選擇 Active 或 Draft，然後儲存信任徽章。

後續步驟

• 信任徽章總覽：管理已儲存的信任徽章、範本、狀態和顯示位置。
• 使用短代碼放置信任徽章：將信任徽章加到佈景主題中的精確位置。

提示

需要支援嗎？

如果您在操作這些步驟時遇到任何困難，請透過 [email protected] 聯絡我們。