thumbnail

商品ページへの設置方法:OS2.0以外のテーマ用


本ページでは、OS2.0以外のテーマで、商品詳細ページにAll in giftを設置する方法をご案内します。

OS2.0以外のテーマではテーマエディタで編集できないため、Liquidファイルに All in giftタグを追加して設置します。表示できる位置はご利用のテーマによって異なります。


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

作業前にテーマを複製してバックアップを作成することを推奨します。

  1. Shopify管理画面 > オンラインストア > テーマ に進む

  2. 「・・・」 > コードを編集 を選択する

  1. 商品ページのLiquidファイル(snippets/product-form.liquidsections/product-template.liquid等)を選択する

  2. All in giftを表示する箇所に、以下のコードを追加する

Plaintext
<div class="sns-gift-product-container"></div>


フォントサイズやテキスト、カラーの変更が可能です。

詳細は以下のページをご確認ください。

アプリウィジェットのデザイン編集: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


以下の対応で表示速度を改善できる場合があります。

  1. ギフトボタン表示タグを設置しているLiquidファイルの最上部に、以下のコードを追加する

JavaScript
  1. ギフトタグにdata-is-catalog="{{ isCatalog }}"を追加する

Plaintext
<div
  class="sns-gift-product-container"
  data-is-catalog="{{ isCatalog }}"
></div>
  1. 保存をクリックして完了