1729880206
2024-10-25 18:12:00
有料アプリを使用せずに、オンライン ストアでギフト ノートを設定します。
デフォルトでは、多くの Shopify テーマには、カートのチェックアウト時に注文メモのオプションがあり、注文全体にメモが添付されます。たとえば、次の「注文に関する特別な指示」ボックスを参照してください。
花屋や宝石店など、Shopify ビジネスがギフトの注文を処理する場合、これにはいくつかの欠点があります。
- それは顧客にとって直感的ではありません。多くの場合、ギフトメモをいつ、どこに含めるかを顧客に伝えるための追加の指示を追加する必要があります。
- ご注文に複数の商品がある場合でも、カートメモは 1 つだけになります。
- この箱は汎用品です。デザインの設定やその他の指示にも使用されます。
この投稿では、顧客により良いエクスペリエンスを提供するために、個々の商品にギフトノートを追加する方法について説明します。このブログを終えるまでに、製品ページには次のような内容が表示されるようになります。
とても簡単でアプリなしでもできます！少しコードが必要になりますが、順に説明していきます。 Web ブラウザには Google Chrome を使用していることに注意してください。これはステップ 3 に関連します。
管理者ページで、オンライン ストアの「テーマ」画面にあるテーマ エディターの「カスタマイズ」ボタンに移動します。
製品ページに移動します。
「製品情報」というセクションを見つけます。 「ブロックを追加」をクリックし、「カスタムリキッド」を選択します。
このカスタム液体コードを追加します。
「カスタム リキッド」ブロックを製品ページ上の目的の場所にドラッグ アンド ドロップします。以下の数量セレクターの後に追加しました。
やあ、このページにギフトノートを追加しました。カートに追加されたときにメモが製品にリンクされるように、メモを注文フォームにリンクする必要があります。
次に、作成したばかりの「Custom Liquid」ブロックを編集して、フォームにリンクする必要があります。これを行うには、テーマの汎用フォーム ID を見つける必要があります。
使用している場合 夜明け または センスの場合は、幸いにもこのステップをスキップできます。汎用フォーム ID が見つかったので、属性を使用して「カスタム リキッド」を更新できます。 form="product-form-{{ section.id }}" 次のようになります:
その後、ステップ 4 に進みます。
別のテーマを使用している場合は、汎用フォーム ID を一緒に見つけてみましょう。
別のウィンドウで、Web サイトの製品ページを開きます。 「カートに追加」ボタンを右クリックし、「検査」を選択します。
これにより、Google Chrome の Web インスペクターが開きます。怖がらないでください、一緒に解決していきましょう。いくつかの要素を見ていきます。
- 製品送信ボタン (A) を探します。 開くと、強調表示された行が表示されます。これを A と呼び、方向を定めるために使用します。
- カートに追加フォーム (B) を探します。 次に、A の上の行を、
element, which we'll call B. - On B, get the form ID for the page: This line begins with
. It should haveaction="/cart/add"。右側を見て属性を見つけますid。この場合、ご覧のとおり、id="product-form-template-16090539327572_main"。
よし、素晴らしい！ページのフォーム ID があります。product-form-template-16090539327572_main。ただし、これはこの製品のみのフォーム ID であり、ギフト ノート付きのすべての製品で機能する汎用 ID が必要です。 - 製品 ID とセクション ID © を探します。 次に A に戻り、その下を見てください。で始まる 2 行が表示されます。
。それらのうちの 1 つは、name="product-id"そして1つは持つでしょうname="section-id"。これら 2 行を「 (C)。 - C で、プロダクト ID とセクション ID を確認します。 「値」フィールドを見てください。ページのフォーム ID の末尾にどれが一致するかを確認してください。私たちの例では:
- product-id の値は次のとおりです。
"7537494655060"。 - セクション ID の値は次のとおりです。
"template-16090539327572_main"。
セクション ID が一致するため、汎用フォーム ID は次のようになります。 product-form-{{ section.id }}。
フォーム ID を取得したので、ステップ 2 で作成した「Custom Liquid」ブロックに戻ります。属性を更新します。 form="product-form-{{ section.id }}" 次のようになります:
これでギフトノートが機能するはずです。アレンジメントをカートに追加して、カートを確認してみてください。製品のギフトメモが表示されます。
ギフトノートがテーマに一致するように、カスタム リキッドのクラスを変更できます。このステップは完全にオプションです。
きれいにする前に:
きれいにした後:
これで完了です！
完成した Custom Liquid コード (Dawn と Sense 用):
きれいなスタイルを備えた完成した Custom Liquid コード (Sense 用):
で アワ私たちはあなたのウェブサイトがあなたのビジネスにとっていかに重要であるかを理解しています。また、あなたがテクノロジーではなく、販売しているもの (切りたての花、ジュエリー、衣類!) に情熱を注いでいることも私たちは知っています。そのため、技術的な経験は必要なく、Web サイトに簡単に統合できるツールを作成しています。当社の最初の製品である無料の Shopify アプリを使用すると、カスタム ブーケ機能を 2 分以内にセットアップできます。新しいエキサイティングなツールが開発中ですので、ぜひチェックしてください。 Webサイト メーリング リストに参加して最新ニュースを入手してください。
#Shopify #ストアにギフトノートを追加する方法 #カトリーナリー著 #年 #月