本ページでは、OS2.0以外のテーマで、カートページにAll in giftを設置する方法をご案内します。
OS2.0以外のテーマではテーマエディタで編集できないため、LiquidファイルにAll in giftタグを追加して設置します。
表示できる位置はご利用のテーマによって異なります。
カートページ実装の仕様は以下のヘルプページをご確認ください。
カートページ実装の仕様
概要 --- 本機能を利用すると、購入者は カートページ上でギフト設定 を行えるようになります。 複数の商品をまとめてギフトとして設定・購入することが可能です。 ※複数配送機能をOFF にしている場合、eギフト購入時に複数商品をカートへ追加しても、生成されるeギフトURL は 1 件のみとなります。 - カタログギフトはeギフト専用商品のため商品詳細ページに実装してください。 - 「商品詳細ページ」「カートページ」どちらにもギフト設定を表示することが可能です。 - 「商品詳細ページ」にてギフト設定後、「カートに追加」する実装することも可能です。設定方法はこちらをご確認ください。 ご利用イメージ --- カートページにAll in giftを実装すると、複数の商品をカートに入れた状態でギフト設定が可能です。 注意点 カートでギフト設定をした後に ページを離脱 したり、チェックアウトに進んでカートに戻った際は、ギフト設定に齟齬が生じないようにするため、商品がリセットされる仕様になっております。 仕様(情報の引き継ぎ) --- - 商品詳細ページで設定されたLine Item Propert
テーマのLiquidコード編集が必要です。
作業前にテーマを複製してバックアップを作成することを推奨します。
Shopify管理画面 >
オンラインストア>テーマに進む「・・・」 >
コードを編集を選択する
カートページのLiquidファイル(
cart-template.liquid等)を選択するAll in giftを表示する箇所に、以下のコードを追加する
<div class="sns-gift-new-cart-container"></div>保存をクリック
コードに style を追加します。
<div
class="sns-gift-new-cart-container"
style="width: 300px; margin-left: auto;"
></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” >
複数の商品にそれぞれ個別のギフトオプションを設定して購入された場合、どの商品にどのギフトが紐づいたかは、注文に紐づく付加情報(properties)で確認できます。
例:
ハーブティーセット → ラッピングB
クッキーセット → ギフトボックスA