カテゴリー
All in giftウィジェット
商品ページにおけるカートボタン追加設定
概要 --- 本ページでは、All in gift を実装した商品詳細ページに「カートに追加」ボタンを表示する設定方法と、利用時の注意点についてご案内します。 購入導線 --- 本設定を有効にすると、商品ページから以下の購入フローになります。 1. 商品ページでギフト設定を行う 2. 「カートに追加」ボタンをクリック 3. カートページへ遷移 4. 決済へ進む この導線により、複数のギフト商品をカートに追加し、まとめて購入(合わせ買い)することが可能になります。 (商品ページにAll in gift の「カートに追加する」ボタンが表示されます。) ※本設定の「カートに追加」ボタンは、押下後にカートページへ遷移する動作を前提とした機能です。押下後に商品ページへ留まるといった、カートページへ遷移しない動作には対応しておりません。 利用条件 --- 本機能は、以下の設定の場合のみ利用できます。 - 配送先住所入力をスキップしない設定:ON - 複数配送機能:OFF 注意点 以下の設定状況では本機能は利用できません。 - 配送先住所入力をスキップする設定にしている場合 - カタログギフト商品アプリの埋め込み対応
概要 --- テーマにアプリを埋め込む設定をすることで、今後も正しくアプリが表示されます。 注意点 こちらの対応は2025年8月28日(木)までにご対応ください。 期日までにご対応いただけない場合、All in giftアプリが表示されなくなりますのでご注意ください。 設定方法 1. アプリ > All in gift > インストール に進む 2. アプリの埋め込み対応 のテキストリンクをクリック 3. 「All in gift」のトグルボタンをONにする。 4. 保存するをクリックして完了です。商品ページへの設置方法:OS2.0のテーマ用
概要 --- OS2.0テーマをご利用の場合、All in giftのウィジェットは自動的にインストールされます。テーマエディタからブロック追加することで、簡単に表示設定を行うことができます。 設定方法 --- 1. オンラインストア > テーマ > カスタマイズ > 商品詳細ページを選択 2. 商品情報 > ブロックを追加 よりAll in gift アプリを選択してください 3. ウィジェットの表示位置をドラッグで調整し、保存をクリックして完了です。 ウィジェットが表示されない場合の確認ポイント 1. アプリ管理画面で「ギフト設定」が有効になっているかを確認してください。 2. 「特定商品のみギフトを使用する」にチェックが入っている場合は、一度チェックを外して挙動を確認してください。 3. 上記を確認しても解決しない場合は、アプリ管理画面右下の チャットボタン よりお問い合わせください。 デザインの編集方法 --- フォントサイズやテキスト、カラーの変更が可能です。 詳細は以下のページをご確認ください。商品ページへの設置方法:OS2.0以外のテーマ用
概要 --- 本ページでは、OS2.0以外のテーマで、商品詳細ページにAll in giftを設置する方法をご案内します。 OS2.0以外のテーマではテーマエディタで編集できないため、Liquidファイルに All in giftタグを追加して設置します。表示できる位置はご利用のテーマによって異なります。 設定方法 --- テーマのLiquidコード編集が必要です。 作業前にテーマを複製してバックアップを作成することを推奨します。 1. Shopify管理画面 > オンラインストア > テーマ に進む 2. 「・・・」 > コードを編集 を選択する 3. 商品ページのLiquidファイル(snippets/product-form.liquidやsections/product-template.liquid等)を選択する 4. All in giftを表示する箇所に、以下のコードを追加する <div class="sns-gift-product-container"></div> デザインの編集方法 --- フォントサイズやテキスト、カラーの変更が可能です。 詳細は以下のページをごカートページ実装の仕様
概要 --- 本機能を利用すると、購入者は カートページ上でギフト設定 を行えるようになります。 複数の商品をまとめてギフトとして設定・購入することが可能です。 ※複数配送機能をOFF にしている場合、eギフト購入時に複数商品をカートへ追加しても、生成されるeギフトURL は 1 件のみとなります。 - カタログギフトはeギフト専用商品のため商品詳細ページに実装してください。 - 「商品詳細ページ」「カートページ」どちらにもギフト設定を表示することが可能です。 - 「商品詳細ページ」にてギフト設定後、「カートに追加」する実装することも可能です。設定方法はこちらをご確認ください。 ご利用イメージ --- カートページにAll in giftを実装すると、複数の商品をカートに入れた状態でギフト設定が可能です。 注意点 カートでギフト設定をした後に ページを離脱 したり、チェックアウトに進んでカートに戻った際は、ギフト設定に齟齬が生じないようにするため、商品がリセットされる仕様になっております。 仕様(情報の引き継ぎ) --- - 商品詳細ページで設定されたLine Item Propertカートページへの設置方法:OS2.0のテーマ用
概要 --- OS2.0テーマをご利用の場合、All in giftのウィジェットは自動的にインストールされます。テーマエディタから簡単に表示設定を行うことができます。 →カートページ実装の仕様はこちら 複数個購入した際のポイント --- 複数の商品に個別のギフトオプションを設定して購入された場合、どの商品にどのギフトが紐づいたかは注文情報の properties で確認できます。 例: - ハーブティーセット → ラッピングB - クッキーセット → ギフトボックスA 設定方法 --- 1. オンラインストア > テーマ > カスタマイズ > カートページを選択 2. 商品情報 > ブロックを追加 よりAll in gift アプリを選択する 3. ウィジェットの表示位置をドラッグで調整 4. 保存をクリックして完了です。 ウィジェットが表示されない場合の確認ポイント - アプリ管理画面で「ギフト設定」が有効になっているかを確認してください。 - 「特定商品のみギフトを使用する」にチェックが入っている場合は、一度チェックを外して挙動を確認してください。 - 上記を確認しても解決しないカートページへの設置方法:OS2.0以外のテーマ用
概要 --- 本ページでは、OS2.0以外のテーマで、カートページにAll in giftを設置する方法をご案内します。 OS2.0以外のテーマではテーマエディタで編集できないため、LiquidファイルにAll in giftタグを追加して設置します。 表示できる位置はご利用のテーマによって異なります。 カートページ実装の仕様は以下のヘルプページをご確認ください。 設定方法 --- テーマのLiquidコード編集が必要です。 作業前にテーマを複製してバックアップを作成することを推奨します。 1. Shopify管理画面 > オンラインストア > テーマ に進む 2. 「・・・」 > コードを編集 を選択する 3. カートページのLiquidファイル(cart-template.liquid等)を選択する 4. All in giftを表示する箇所に、以下のコードを追加する <div class="sns-gift-new-cart-container"></div> 5. 保存をクリック デザインの編集方法 --- ウィジェットを右寄せにしたい場合(CSS記載例) コードに styleその他のページへの設置方法
① トップページ / ページへの設定方法 --- 概要 トップページなど、複数の商品が掲載されているページで、ギフトアプリを表示させたい場合、指定のタグをページ内に設置いただくことで表示可能です。 - デモストアのTOPページのように、ギフト機能が表示されます。 注意点 バリエーションが設定されている商品についてはこの設定はご利用いただけません。商品ページかカートページに表示させることをご検討ください。 設定方法 テーマのコード編集が必要です。 1. トップページや表示させたいページのリキッドファイルを開く 2. 表示させたい指定の箇所に、以下のタグを設置する <div class="sns-gift-product-container" data-product-variant-id="*****"></div> data-product-variant-id="*****"の*****は商品ID(variant)をいれてください。 商品ID(variant)の確認方法 商品ページURLの末尾の数字をコピー&ペーストで入れてください。 3. 保存をして完了です。 ② PageFlyでアプリウィジェットのデザイン編集:OS2.0テーマ用
概要 --- OS2.0テーマをご利用の場合、Shopify管理画面のテーマエディタからアプリウィジェットのデザイン編集が可能です。 注意点 - 2022/10/22以降の仕様変更により、テーマエディタで編集可能になりました。 - 過去にCSSでデザイン調整をしていた場合は、そのCSSを削除してください。CSSが優先されて適用されるため、テーマエディタでの編集が反映されないことがあります。 - 以下の「ギフトオプションの項目」および「不要」の文言はアプリの仕様上テキスト変更ができません。 設定方法 --- 1. Shopify管理画面 > オンラインストア > テーマ > カスタマイズに進む 2. 対象ページ(商品やカート)を選択する 2. All in giftブロックをクリック 3. テーマエディタにて、ボタンテキストやフォントカラー、フォントサイズ、ボタンカラー等が編集可能です。 ・ストアの世界観に合わせてトンマナを編集します。 4. 保存をクリックして完了です。 --- ◾️テーマエディタの編集項目 編集対象 テキスト初期値 設定可能内容 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" >不要パーツを非表示にする
概要 --- 本ページでは、ギフト設定時に不要なパーツを非表示にする方法をご案内します。 本設定を行うことで、以下のことが実現できます。 - ギフト設定時に、テーマの数量カウンターやメモ欄を非表示にできる - 購入ページの不要なウィジェット(他社の日時指定アプリなど)を非表示にできる 注意点 --- All in gift経由の注文では、テーマの数量カウンターやメモ欄の内容は注文管理画面に取り込まれません。ギフト設定時は、テーマ側の数量カウンターやメモ欄を非表示にしてください。 eギフトの日時指定は受取者が行うため、他社の日時指定アプリを使用している場合、購入ページでのウィジェットを非表示にしてください。 設定方法 --- 設定方法は2通りあります。アプリの実装方法に合わせて選んでください。 1. テーマエディタから設定する:All in giftブロックを設置している場合 2. テーマのコードから設定する:LiquidファイルにAll in giftタグを追加している場合 ◾️テーマエディタから設定する 1. 非表示にしたい要素(メモ欄・数量カウンターなど)のクラス名・ID名を、ブラウ