自訂 CSS

對於視覺編輯器無法達成的樣式，Sami Product Labels 內建 CSS 編輯器。您也可以使用 z-index 控制徽章的層疊順序、加入滑鼠移過時顯示的工具提示，以及為圖片徽章設定 alt 文字。

如何加入自訂 CSS

1. 開啟徽章編輯器

   從 Sami Product Labels 前往 Badges & Labels。選擇 Create badge，或選擇現有徽章在 Actions 欄中的 Edit badge/label 圖示。

2. 前往 Design 標籤

   在徽章編輯器中選擇 Design。編輯器開啟時預設會選取此標籤。

3. 捲動到 Advanced Settings

   展開 Design 標籤底部附近的 Advanced settings。

4. 啟用「Custom css」

   在 Advanced 下，開啟 Custom css。

5. 插入選擇器並加入您的 CSS

   CSS 編輯器會出現，並在 CSS reference 下提供三個選項：

   • .samita_productLabel-content 用於設定整個徽章的樣式。
   • .samita_productLabel-content-text 用於設定文字徽章的樣式。
   • .samita_productLabel-content img 用於設定圖片徽章的樣式。

   選擇您需要的選項。應用程式會將以目前徽章 ID 限定範圍的選擇器（例如 .__content--94129）插入編輯器。請保留選擇器中專屬於該徽章的部分，然後只在大括號內加入您需要的宣告。

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   在 CSS reference 下選擇一個 class，即可將限定於該徽章的選擇器插入 Custom CSS 編輯器。

6. 預覽並儲存

   編輯時請查看即時預覽。結果看起來正確後，選擇 Save，然後在您商店前台的相關商品系列或商品頁面上驗證徽章。

警告

自訂 CSS 會隨此徽章一併儲存，但其選擇器仍然決定它能影響哪些商店前台元素。請保留應用程式產生的徽章專屬選擇器。單獨使用 .samita_productLabel-content 這類寬泛的選擇器，也可能會比對到其他徽章。

Z-index 控制

修正被商品圖片覆蓋層、固定式標頭或其他徽章遮住的徽章。

1. 在 Advanced settings 中，啟用 Z-index。
2. 輸入 1 到 100 的值。較高的值會讓徽章位於 z-index 值較低的元素之前。

設定 z-index 值以控制徽章的層疊順序。

注意

Z-index 也會受到您佈景主題所建立的層疊情境影響。如果提高徽章的值仍無法讓它顯示在前面，可能需要對佈景主題中的父容器另行調整 CSS。

滑鼠移過時的工具提示

加入一則當顧客將滑鼠移到徽章上時顯示的工具提示，適合用來說明「New Arrival」或「Limited Edition」的意思，又不會讓商品圖片顯得雜亂。

1. 在 Advanced settings 中，啟用 Show tooltip on hover。
2. 輸入滑鼠移過時要顯示的工具提示文字。

加入顧客將滑鼠移到徽章上時顯示的工具提示文字。

請不要只把重要資訊放在工具提示中。觸控螢幕使用者和使用鍵盤瀏覽的顧客可能無法觸發滑鼠移過狀態。

圖片徽章的 SEO alt 文字

設定 alt 文字，讓螢幕閱讀器能描述圖片徽章的含義。具描述性的 alt 文字也有助於圖片 SEO。

1. 在 Advanced settings 中，啟用 Seo alt text。
2. 輸入徽章所傳達訊息的簡短描述，例如「20% off sale badge」或「Free shipping label」。請避免堆砌關鍵字，也避免使用「image of」之類的用語。

為無障礙功能和 SEO 設定 alt 文字。

後續步驟

• 變更徽章樣式：使用視覺編輯器控制項自訂您的徽章。
• 變更徽章位置：將徽章放在頁面上的正確位置。

提示

需要支援嗎？

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