アプリウィジェットのデザイン編集：OS2.0以外のテーマ用

デザイン編集の方法

テーマにインストールされたタグへ「調整項目」を追加することでデザインを変更できます。

商品ページに実装
<div class="sns-gift-product-container"></div>の中に調整用の属性を追加してください。
カートページに実装<div class="sns-gift-new-cart-container"></div> の中に調整用の属性を追加してください。

注意点

「ギフトオプションの項目」および「不要」の文言はアプリの仕様上テキスト変更ができません。

調整項目の例

フォント設定

OS2.0以外のテーマでは、data-font-sizeはrem換算で適用されます。

例：14 → 1.4rem

■商品ページに実装

Plaintext

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

■カートページに実装

Plaintext

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

ボタンデザイン（チェックアウト／主要／サブ）

■商品ページに実装

Plaintext

<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>

■カートページに実装

Plaintext

<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>

アイコン表示/非表示・ラジオボタン文言

■商品ページに実装

Plaintext

<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>

■カートページに実装

Plaintext

<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 の場合は、ボタンや文字色を個別設定できます。

■商品ページに実装

Plaintext

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

■カートページに実装

Plaintext

<div
  class="sns-gift-new-cart-container"
  data-original-color-enable="false"
>
</div>

カートページ特有の設定

Plaintext

<div class="sns-gift-new-cart-container" 
  data-multiship-gift-setting-button-text="#配送先を追加する"
>
</div>

その他

■商品ページに実装

Plaintext

<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>

■カートページに実装

Plaintext

<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>