本ページでは、OS2.0以外のテーマで、商品詳細ページにAll in giftを設置する方法をご案内します。
OS2.0以外のテーマではテーマエディタで編集できないため、Liquidファイルに All in giftタグを追加して設置します。表示できる位置はご利用のテーマによって異なります。
テーマのLiquidコード編集が必要です。
作業前にテーマを複製してバックアップを作成することを推奨します。
Shopify管理画面 >
オンラインストア>テーマに進む「・・・」 >
コードを編集を選択する
商品ページのLiquidファイル(
snippets/product-form.liquidやsections/product-template.liquid等)を選択するAll in giftを表示する箇所に、以下のコードを追加する
<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
以下の対応で表示速度を改善できる場合があります。
ギフトボタン表示タグを設置しているLiquidファイルの最上部に、以下のコードを追加する
ギフトタグに
data-is-catalog="{{ isCatalog }}"を追加する
<div
class="sns-gift-product-container"
data-is-catalog="{{ isCatalog }}"
></div>保存をクリックして完了