表示デザインを調整したい場合は、以下の通り調整いただけます。

設定についてご不明な場合はサポートさせていただきますのでお気軽にお問い合わせください。

デザイン変更　新仕様（2022/10/12以降）

<aside> ⚠️ この機能を用いる場合は、過去CSSでデザイン調整を行なっていた場合は、その内容を削除してください。過去設定しているCSSの内容がある場合は、そちらの内容が優先されて適用されます。

</aside>

■OS2.0テーマの場合

• テーマカスタマイズ画面から「ギフトボタン」を押すと各デザインを調整いただけます

  

■それ以外のテーマの場合（商品ページ）

• テーマへインストールいただいたタグに、「調整したい各項目」を追記いただくことで調整いただけます。

ページフライで作成した商品詳細ページへの設置方法

■各項目の追記例

<aside> ⚠️ テーマインストールの際に設置いただいた、<div class="sns-gift-product-container"></div>　このタグの中にそれぞれ追加いただくことで、調整いただけます。

</aside>

<aside> 🎨 フォント

<div class="sns-gift-product-container" 
              data-font-color="#4DB56A"
              data-secondary-font-color="#4DB56A"
              data-font-size="14"
              >
</div>

※上記タグ設置によるフォントサイズの単位はremになります。

</aside>

<aside> 🎨 チェックアウトボタン、主要ボタン、サブボタン

<div class="sns-gift-product-container" 
              data-checkout-button-text="購入手続きへ"
              data-checkout-button-text-color="#FFFFFF"
              data-checkout-button-color="#FD7E00"
              data-primary-button-color="#FD7E00"
              data-primary-button-text-color="#FFFFFF"
              data-secondary-button-color="#4DB56A"
              data-secondary-button-text-color="#FFFFFF"
              data-button-radius="10"
              data-gift-setting-button-text="ギフト設定"
							data-gift-setting-cancel-button-text="ギフト設定をキャンセルする"
              >
</div>

</aside>

<aside> 🎨 アイコンの表示・非表示、ラジオボタンのテキスト

<div class="sns-gift-product-container" 
              data-icon-show="true"
              data-gift-radio-text="指定の住所に贈る"
							data-gift-checkbox-text="ギフト配送を希望する"
              data-e-gift-radio-text="住所をしらない相手にeギフトを贈る"
							data-nickname-label-text="贈り主の名前を入力してください"
              >
</div>

※data-icon-show は true か false しか受け付けません

※表示設定ができるアイコンは以下です

• 変更可能箇所

  

  

  

</aside>

<aside> 🎨 ギフト専用にする

※cssでのコードのみ対応可能です。

<div class="sns-gift-product-container" 
             data-enable-default-general-gift="true"
              >
</div>

※true か false しか受け付けません

※表示設定ができるアイコンは以下です

• 変更可能箇所（デフォルトで「ギフト配送を希望する」にチェックが入った状態）

  

</aside>

<aside> 🎨 eギフト専用にする

※この機能を利用したい商品は、通常ギフト設定は対象外にする必要があります。

<div class="sns-gift-product-container" 
             data-is-catalog=“{{ isCatalog }}“>
</div>

※表示設定ができるアイコンは以下です

• 変更可能箇所（eギフト設定のみの表示、「指定の住所に送る」「ギフト配送を希望する」の非表示）

</aside>

<aside> 🎨 その他

<div class="sns-gift-product-container" 
							data-header-text="お届け方法"
              data-e-gift-description-text="相手の住所を知らなくても、ギフトを贈れるサービスです。 購入後に発行される、受け取り用のURLをLINEやSNSなどを使ってお相手にお送りください。"
							data-e-gift-description-color="#000000"
              data-e-gift-description-url="<https://huckleberry-inc.com/>"
              >
</div>

※data-original-color-enable は true か false しか受け付けません

※オリジナルカラーというのは ↓ の色を指します。「false」の場合は主要ボタンの色が適用されます。

※data-original-color-enable がfalse に設定されている時、テキストカラーとボタンカラーを個別で設定が可能です。

<div class="sns-gift-product-container" 
              data-original-color-enable="false"
　　　　　　　　　　　　　　　　　　　　　　　　　　　　data-primary-button-text-color="#FFFFFF"
　　　　　　　　　　　　　　　　　　　　　　　　　　　　data-primary-button-color="FFFFFF"
              >
</div>

</aside>

<aside> 🎨 ギフト選択時に一定の表示を非表示にする

例：Shopifyテーマのカートボタンが非表示にならない

数量セレクターが重複するので動線上非表示にしたい

カート内のメモ欄

など

ご利用のテーマによって、eギフトを選択した時にカートボタンが非表示にならないことがあります。その場合は、カスタマイズ画面より非表示にしたい要素(クラス名やID名)を指定することで非表示にしていただくことができます。

• カートボタン
• 定期購買app

CSS調整

<div class="sns-gift-product-container" 
							data-hidden-elements="クラス名"
							>
</div>

</aside>