thumbnail

その他のページへの設置方法


トップページなど、複数の商品が掲載されているページで、ギフトアプリを表示させたい場合、指定のタグをページ内に設置いただくことで表示可能です。

注意点

バリエーションが設定されている商品についてはこの設定はご利用いただけません。商品ページかカートページに表示させることをご検討ください。

テーマのコード編集が必要です。

  1. トップページや表示させたいページのリキッドファイルを開く

  2. 表示させたい指定の箇所に、以下のタグを設置する

Plaintext
<div class="sns-gift-product-container" data-product-variant-id="*****"></div>

data-product-variant-id="*****"*****商品ID(variant)をいれてください。

商品ID(variant)の確認方法

商品ページURLの末尾の数字をコピー&ペーストで入れてください。

  1. 保存をして完了です。


  1. 対象の商品の商品ページのテーマテンプレートを確認します

    例)pf-f43b4***

  2. 「テーマ」>「コードを編集」から先ほど確認したテンプレート名のファイルを検索します

    例)product.pf-f43b4***

  3. 確認したテンプレートの適切な箇所にコードを入れます

Plaintext
<div class="sns-gift-product-container"></div>
  1. デザインの調整の詳細は、以下のページよりご確認ください。

アプリウィジェットのデザイン編集: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 ■商品ページに実装 <div class=“sns-gift-product-container” data-font-color=”#4DB56A” data-secondary-font-color=”#4DB56A” data-font-size=“14” > </div> ■カートページに実装 <div cl

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