配送日要素にカスタムテキストを追加する方法

デフォルトでは、 配達日要素 配達予定情報のみが表示され、その横にカスタムテキストは追加されません。

しかし多くの場合、販売者は配達日後にメッセージを追加することで、明確性を高めたり、緊急性を演出したり、顧客の信頼を高めたりしたいと考えています。

このガイドでは、GemPagesでカスタムCSSを使用して、配送日要素の後にカスタムテキストを追加する方法を説明します。

一般的な使用例

配送日要素にカスタムテキストを追加することで、ショッピング体験を向上させ、重要な情報をより明確に伝えることができます。

一般的な使用例は次のとおりです:

• 次のようなメッセージを表示します。
  • 「配達予定日」
  • 「迅速な発送」
  • 「速達配送可能」
  • 「営業日のみ」
  • 「在庫限り」
  • 「送料無料」
• 配達予定日の横にプロモーションメッセージを追加する
• コンバージョン最適化のための迅速な配送を強調
• 店舗のブランドイメージに合わせた配送情報の表示
• より高級感のある商品ページデザインを作成する

例：

6月12日～6月15日 | 無料速達配送

ステップ1：カスタムコードエリアを開く

• GemPagesエディタを開きます。
• 以下を行うには、 納期 要素。
• 要素を右クリックします。
• 選択 カスタムコード.

これにより、その特定の要素のカスタムコードエディタが開きます。

ステップ2：カスタムコードを貼り付ける

以下のコードをカスタムコード欄に貼り付けてください。

.gzacmFacXB {}

.gzacmFacXB .estimate-date-main{

背景：＃339868;

パディング：4px 10px;

border-radius：6px;

色: #fff !重要;

}

.gps .gzacmFacXB .estimate-date-container:after {

内容：「テスト専用」

位置：相対;

色：#151515。

フォントサイズ：17px。

font-family: 'AbeeZee', Sans-Serif;

}

@media(最大幅:767px){

.gps .gzacmFacXB .estimate-date-container:after {

フォントサイズ：14px。

}

}

注：コード内の交換可能な部品

コードを使用する前に、以下のカスタマイズ可能な部分を、ご自身の環境設定やデザインの好みに合わせて置き換えてください。

ステップ 3: 保存して公開する

• 詳しくはこちら Save.
• ページを公開または更新します。
• デスクトップとモバイルでページをプレビューできます。

これで、配送日要素に、カスタムテキストが添えられたスタイル付きバッジが表示されるはずです。