テーマにインストールされたタグへ「調整項目」を追加することでデザインを変更できます。
商品ページに実装
<div class="sns-gift-product-container"></div>の中に調整用の属性を追加してください。カートページに実装
<div class="sns-gift-new-cart-container"></div>の中に調整用の属性を追加してください。
注意点
「ギフトオプションの項目」および「不要」の文言はアプリの仕様上テキスト変更ができません。
プレースホルダーの文言変更はできません。
テキスト編集不可項目
OS2.0以外のテーマでは、data-font-sizeはrem換算で適用されます。
例：14 → 1.4rem
<div
class="sns-gift-product-container"
data-font-color="#4DB56A"
data-secondary-font-color="#4DB56A"
data-font-size="14"
>
</div><div
class="sns-gift-product-container"
data-font-color="#4DB56A"
data-secondary-font-color="#4DB56A"
data-font-size="14"
>
</div><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>
<div class="sns-gift-new-cart-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>
<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>
<div
class="sns-gift-new-cart-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-original-color-enableはtrueまたはfalseのみ使用可能。falseの場合は、ボタンや文字色を個別設定できます。
<div
class="sns-gift-product-container"
data-original-color-enable="false"
data-primary-button-text-color="#FFFFFF"
data-primary-button-color="FFFFFF"
>
</div><div
class="sns-gift-new-cart-container"
data-original-color-enable="false"
>
</div><div class="sns-gift-new-cart-container"
data-multiship-gift-setting-button-text="#配送先を追加する"
>
</div>
<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>
<div
class="sns-gift-new-cart-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>
カートページ実装の仕様
概要 --- 本機能を利用すると、購入者は カートページ上でギフト設定 を行えるようになります。 複数の商品をまとめてギフトとして設定・購入することが可能です。 ※複数配送機能をOFF にしている場合、eギフト購入時に複数商品をカートへ追加しても、生成されるeギフトURL は 1 件のみとなります。 - カタログギフトはeギフト専用商品のため商品詳細ページに実装してください。 - 「商品詳細ページ」「カートページ」どちらにもギフト設定を表示することが可能です。 - 「商品詳細ページ」にてギフト設定後、「カートに追加」する実装することも可能です。設定方法はこちらをご確認ください。 ご利用イメージ --- カートページにAll in giftを実装すると、複数の商品をカートに入れた状態でギフト設定が可能です。 注意点 カートでギフト設定をした後に ページを離脱 したり、チェックアウトに進んでカートに戻った際は、ギフト設定に齟齬が生じないようにするため、商品がリセットされる仕様になっております。 仕様（情報の引き継ぎ） --- - 商品詳細ページで設定されたLine Item Propert
