Xポストログ

【Shopify TIPS】
未発送注文を見落とさないよう自動で通知するShopify Flowの設定例

出荷遅延はお客様の信頼を失ってしまうリスクがあります。Shopify Flowを使うことで、毎日（または数時間）に１回のペースで、未発送の注文状況を指定したメールアドレスに通知するためのFlow設定方法です。

◆実装のメリット
・未発送注文の把握が確実になり、出荷遅延のリスクを大幅に削減
・定期的な自動通知で、担当者の確認漏れを防止
・お客様満足度の向上につながる、スムーズな出荷対応が可能に

◆設定手順（Shopify Flow）
・トリガーに「スケジュール」を選択し、通知頻度を設定
・未発送注文のデータを取得するアクションを追加
・メール通知アクションを使って、指定メールアドレスに未発送状況を通知するアクションを追加

#Shopify #ShopifyTIPS #ShopifyFlow

【Shopify TIPS】
テーマ「Dawn/Rise」で、商品ごとに指定した商品サムネイルを表示できるようにする設定例

商品画面のトップ画像と、一覧画面で表示する画像を意図的に変えておきたいというリクエストをいただくことがあります。そこで、「コレクション」や「特集コレクション」などの商品一覧画面で、トップ画像以外に指定したサムネイル画像を商品ごとに表示する方法です。（前回（https://x.com/sh_sakamoto/status/1875029322005614965）とは別に、今回は商品ごとに指定する形です）

◆実装のメリット
・一覧画面に表示する商品画像を個別に指定できるため、柔軟な商品訴求が可能です。
・商品メタフィールドを使って簡単に設定できるので、運用コストを低く抑えることができます。

◆具体的な手順
①表示するサムネイルを指定するための商品メタフィールドを作成
②snippets/card-product.liquidに商品画像を指定されたものに切り替える処理を追加

#Shopify #ShopifyTIPS

【Shopify TIPS】
テーマ「Dawn/Rise」の特集コレクションセクションで指定した番号の商品サムネイルを表示できるようにする設定例

トップページなどで一定数の商品をリスト表示するために使用する特集コレクションセクションで、最初の商品画像ではなく、指定した番号の商品画像を表示させる方法です。
一定の順番ルールで商品カラーバリエーション画像などを登録しているストアで、特定のカラーに絞って表示させる際に使用したりすることができます。

◆実装のメリット
・同じ商品を扱いつつ、複数の特集コレクションごとに異なる画像を指定できるため、柔軟な商品訴求が可能です。
・テーマエディタから簡単に設定できるので、運用コストを低く抑えることができます。

◆具体的な手順
①sections/featured-collection.liquidにschemaを、ja.schema.jsonにラベル追加し、snippets/card-product.liquidを参照する際に表示番号用の引数を追加
②snippets/card-product.liquidに商品画像を指定されたものに切り替える処理を追加
③テーマエディタで特集コレクションセクションを追加し、表示させたいサムネイル番号を指定

#Shopify #ShopifyTIPS

【Shopify TIPS】
テーマ「Dawn/Rise」の商品詳細ページで、バリアントが１つだけの商品が売り切れている場合、「今すぐ購入」ボタンが購入可能な状態に見えてしまっているので、これを修正する設定例です。

いずれ、この不具合が解消されるかもしれないため、商品の売り切れ状態を判別しJavascriptを使って「今すぐ購入」ボタンに状態を変更しています。

◆実装のメリット
・数行のコードで実装可能

◆具体的な手順
・商品テンプレートの商品情報セクションにカスタマイズされたLiquidブロックを追加しコードを挿入

#Shopify #ShopifyTIPS

【Shopify TIPS】
特集コレクションに一括で商品をカート追加する機能の実装例

あけましておめでとうございます。
さて新年一つ目ですが、すでにアプリで一括購入できる機能は多々提供されていますが、テーマ「Dawn/Rise」の特集コレクションを活かして、そのセクションにまとめ買いボタンを設置する方法です。
おすすめされている商品をまとめて購入したいユーザーにとって、購入ステップを簡略化することができるため、コンバージョン率向上が期待できます。

◆実装のメリット
・複数商品の一括カート投入でユーザーの購入ステップを簡略化
・コンバージョン率向上が期待できる

◆具体的な手順
①sections/featured-collection.liquidにschemaを、ja.schema.jsonにラベル追加
②featured-collection.liquidに一括カート追加の処理を実装
③一括購入してもらいたい商品をまとめたコレクションを作成し、対象商品専用のテンプレートに特集コレクションセクションを設置してそのコレクションを指定

◆実装時の注意点
・デフォルトバリアントのみが対象となるため、バリエーション選択が必要な商品には不向きです。
・処理を簡易にしているため在庫切れ商品がある場合の処理は追加できなくなります。

#Shopify #ShopifyTIPS

【Shopify TIPS】
特集コレクションの左右送りボタンを使いやすくする設定例

Rise/Dawnテーマで非常に使う機会の多い特集コレクションですが、「デスクトップでカルーセルを有効にする」を有効にした際に表示される、カルーセルの左右送りボタンが少々小さいため、大きく表示させたいというリクエストをいただくことがあります。
そこで、デスクトップ画面でストレスなく商品を閲覧できるように、クリッカブルエリアを大きくしつつ、左右に動かせることがすぐにわかるように左右送りボタンを商品リスト上に配置する設定方法です。

◆実装のメリット
・クリック領域が広がることでユーザーの回遊性が向上
・ストレスフリーな商品閲覧体験を提供
・デスクトップ画面での商品表示がより快適に
・デザインを崩さずに操作性を改善

◆具体的な手順
・特集コレクションセクションに専用のカスタムCSSを追加

#Shopify #ShopifyTIIPS

【Shopify TIPS】
商品絞り込みの表示ラベルをカスタマイズする設定方法

Search & Discoveryアプリを使っている場合に、絞り込み値の表示名をより直感的なラベルに変更する方法です。

◆実装のメリット
・お客様にとってわかりやすい表示名に変更できる
・商品管理側の設定はそのままに、フロント側だけ表示を変えられる

◆具体的な手順
①Search & Discoveryの管理画面を開く
②「グループを作成」機能を選択
③変更したい項目値を指定して新しい表示ラベルを設定して保存
④全ての項目にラベルを設定したら表示順を「手動」で整える

本来はその名の通り表示項目をグルーピングするための機能なのですが、単体項目でもグループ設定できることから、表示用の別ラベルを指定するために使っています。

#Shopify #ShopifyTIPS

【Shopify TIPS】
ヘッダーを周囲にシャドウを落としたフローティングスタイルの見た目にする設定例

Rise/DawnテーマのヘッダーにカスタムCSSを追加するだけの手軽な設定で、印象を変えられるカスタマイズ方法です。シャドウ効果でモダンな浮遊感を演出します。

◆実装のメリット
・視覚的な奥行きが生まれ、コンテンツが引き立ちます
・スクロール時の視認性が向上し、ユーザー体験が改善します

◆具体的な手順
・ヘッダーセクションの設定画面を開き、カスタムCSSを追加

#Shopify #ShopifyTIPS

【Shopify TIPS】
Rise/Dawnテーマ「折りたたみコンテンツ」の特定の行を最初から開いておく設定例（その２）

前回（https://x.com/sh_sakamoto/status/1870680667182469433）は、最初に開いておきたい行を”１つだけ”指定できるようにするものでしたが、今回はコンテンツ行を複数指定できるようにする設定方法です。

◆実装のメリット
・重要な情報を最初から見せることで、ユーザーの理解度向上が期待できます。
・必要な情報への到達までのクリック数を減らすことができます。

◆具体的な手順
①schemaファイルの編集
・「sections/collapsible-content.liquid」のスキーマに設定項目を追加
・「ja.schema.json」に日本語のラベルを追加
②テンプレートファイルの編集
・「sections/collapsible-content.liquid」に指定行を開くための処理を追加

#Shopify #ShopifyTIPS

商品詳細画面で注文前の事前承認モーダルを表示する設定例

購入いただく前に何かしら承認を取っておきたい情報を掲載したい場合に、モーダルウィンドウを表示し、「承認」が取れたら以降は表示しないようにする方法です。cart attributesを使って承認状態を保持するので、注文情報に承認済みであることの証左を残すことができます。
間に１ステップ挟むことになるので、カート追加率は下がってしまいますが、それでも了承いただく必要がある時などに使うことが想定されます。

◆実装のメリット
・了承されるまで何度も表示され、了承済みの場合は以降、別の商品でも表示されません。
・直接「カートに追加する」ボタンイベントを操作するわけではないので、購入アクションへの影響が最小限に

◆具体的な手順
・商品テンプレートに「カスタマイズされたLiquidセクション」を追加
・承認チェック用のコードを挿入

◆活用シーン
・数量限定商品の販売
・特定の条件下でのみ販売可能な商品
・在庫管理が厳密に必要な商品など

#Shopify #ShopifyTIPS

【Shopify TIPS】
Javascriptなしで実装できるモーダルウィンドウの設定方法

年末年始のお知らせなど、一時的なモーダルウィンドウを追加したい際に、Javascriptを使わずにサクッとCSSだけで実装する方法です。

◆実装のメリット
・軽量な実装
・保守性の高いシンプルなコード

◆具体的な実装手順
・表示したい箇所にカスタマイズされたLiquidセクションを追加し、用意したモーダル用コードを挿入
・CSSでスタイリングを適用

◆注意ポイント
ただし、テーマ「Dawn/Rise」の商品情報など、親要素に「transform」プロパティが設定されている場合、画面全体のモーダル表示が正しく機能しません。
事前に親要素のスタイルを確認しておく必要があります。

#Shopify #ShopifyTIPS

【Shopify TIPS】
価格の異なるバリアントを持つ商品で価格テーブルを表示する設定例

テーマ「Dawn/Rise」の標準仕様のため異なる価格のバリアントを持つ商品は、バリアントを選択して価格を確認する必要があります。
予めバリアントごとの価格表を表示しておけば、お客様がストレスなく商品を選ぶことができます。

◆実装のメリット
・お客様が一目で全価格を確認可能
・バリアント切替の手間を削減
・購入までの導線がスムーズに

◆具体的な手順（テーマ：Rise/Dawn）
商品テンプレートの商品情報セクションにカスタムLiquidブロックを追加してコードを挿入

#Shopify #ShopifyTIPS #EC #ECTips

【Shopify TIPS】
バリアントピッカーにバッジを表示する設定例（その２）

前回は商品バリアント名に直接バッジを記載する方法でしたが、商品管理や受発注への影響を避けるためバリアント名自体は変更せず、バリアントピッカーにバッジを表示する方法です。
運用難易度が少々上がってしまいますが、JSON形式の商品メタフィールドを使ってバッジを表示させたいバリアントを指定します。

◆実装のメリット
・バリアント名そのものに影響を与えず、バッジの表示を追加可能
・バリアント名の変更による商品管理や受発注への影響を避けられる
・同様にSEOへの影響を避けられる

◆具体的な実装手順
①JSON型の商品メタフィールドを作成し、対象の商品のバリアントに応じた内容を指定
②商品テンプレートにLiquidセクションを追加しコードを挿入

#Shopify #ShopifyTIPS

【Shopify TIPS】
バリアントピッカーにバッジを表示する設定例

商品バリエーションが多いストアでは、顧客が選択に迷う可能性があります。バリアントにバッジを表示することで、商品選びの判断材料を提供できます。

◆実装のメリット
・顧客の商品選択をスムーズにサポート
・視覚的な情報で直感的に商品の特徴が伝わる
・迷いやすいポイントを解消し、離脱率の改善が期待できる

◆具体的な実装手順
①商品バリアント名の設定
・管理画面で各バリアントに（）を使ってバッジ表示したい文言を追記
例：S（残りわずか）、M（おすすめ）、L（新色）

②テーマファイルの編集
・Rise/Dawnテーマの場合は「snippets/product-variant-options.liquid」を開く
・バリアント名の（）内の文字を抽出してスタイル付きのspanタグで表示する処理を追加

#Shopify #ShopifyTIPS

【Shopify TIPS】
Rise/Dawnテーマ「折りたたみコンテンツ」の特定の行を最初から開いておく設定例

Rise/Dawnテーマお商品ページに設定できる「折りたたみコンテンツ」で最初から開いておきたい行を自由に指定できるようにする方法です。
必ずしも最初の行だけを開いておきたくない場合もあるため、この設定を追加することで、ユーザーが最初に見るべき情報を指定できるようになります。

◆実装のメリット
・重要な情報を最初から見せることで、ユーザーの理解度向上が期待できます。
・必要な情報への到達までのクリック数を減らすことができます。

◆具体的な手順
①schemaファイルの編集
・「sections/collapsible-content.liquid」のスキーマに設定項目を追加
・「ja.schema.json」に日本語のラベルを追加
②テンプレートファイルの編集
・「sections/collapsible-content.liquid」に指定行を開くための処理を追加

#Shopify #ShopifyTIPS

【Shopify TIPS】
ページ遷移をスムーズに。ローディングバー実装の設定例

ページ遷移時のユーザー体験を大きく改善できる、ローディングバーの実装方法です。
ストア内を回遊するリンクをクリックした際に、ヘッダー部分に擬似的なローディングバーを表示します。正確に遷移先のロードを行っているわけではないのですが、リンクに反応していることをフィードバックすることで、ページ読み込み中の進捗が視覚的に分かり、ユーザーのストレス軽減します。

◆実装のメリット
・ページ読み込み中の進捗が視覚的に分かり、ユーザーのストレス軽減
・「サイトが固まっている」と誤解される事態を防止

◆具体的な手順
・ヘッダーグループに「カスタマイズされたLiquidセクション」を追加
・ローディングバー用のコードを挿入

#Shopify #ShopifyTIPS

【Shopify TIPS】
配送日時指定不可の対象商品をカート画面で確認できるようにする設定例

配送日時指定ができるアプリを使用する際に、配送日時を指定できない商品が含まれている場合に、どの商品がその対象なのかを表示する設定方法です。

◆具体的なメリット：
・どの商品が対象かすぐにわかることで購入時の商品調整が可能に
・問い合わせ対応の工数削減
・カート離脱率の改善が期待できる

◆実装手順
①対象の配送日時指定不可商品にタグを設定
②Rise/DawnテーマのカートテンプレートにカスタムLiquidセクションを追加しコードを挿入

さらにShopify Plusをお使いの場合、チェックアウト画面で配送日時指定を可能にするケースも多いかと思います。
この設定により、お客様は配送日時指定ができない商品をカート画面で確認できるようになるので、チェックアウト時に気づいたお客様の声にも対応できます。

#Shopify #ShopifyTIPS

【Shopify TIPS】
特集コレクションを日時指定で公開する方法（Rise/Dawn対応）

商品の季節性やキャンペーンに合わせて特集コレクションを表示したい場合、アプリ「Matrixify」を使って実現する方法です。
事前に、コレクションが未公開の場合は「特集コレクション」セクションを非表示とするカスタマイズは行っておく必要があります。

◆実装のメリット
・時間帯や季節に応じた商品訴求が可能
・手動での切り替え作業が不要

◆具体的な手順
①テーマファイルの編集
「sections/featured-collection.liquid」にコレクションが設定されている場合のみ表示されるよう条件分岐を設定

②対象コレクションの販売チャネルから「オンラインストア」をオフに
（これにより通常のコレクション一覧には表示されなくなります）

③Matrixifyでインポート用ファイルを作成し公開したい日時を指定してインポートを実行
（設定した時間になるとインポートしたファイルの内容が反映され、自動でコレクションが表示されます）

◆補足
・事前にテスト環境での動作確認をおすすめします。
・季節商品やタイムセール等と組み合わせると効果的です。

#Shopify #ShopifyTIPS

【Shopify TIPS】
カート内商品数に応じて割引メッセージを表示する方法

「n個以上でx円オフ」の自動ディスカウントを使う時、Rise/Dawnテーマでカート内の商品点数によってメッセージを出し分ける設定例です。
自動ディスカウントはクーポンコードの入力を必要とせず自動で割引が適用される便利な機能ですが、ディスカウントが適用される前からその割引内容をユーザーに分かりやすく伝えておくと、購入意欲を高めることができて効果的です。

◆実装のメリット
・ユーザーにとって分かりやすい割引表示で、ショップの信頼度をアップ
・カート内商品数に応じた動的な表示で、購入意欲を高めます。

◆具体的な手順
・カートテンプレートに「カスタマイズされたLiquidセクション」を追加
・商品点数判定用のコードを挿入して完了

#Shopify #ShopifyTIPS

【Shopify TIPS】
商品レーダーチャートをテーマエディタからノーコードで設定できる実装方法

前回（https://x.com/sh_sakamoto/status/1856547541963420006）のバロメーターのような形で、chart.jsを用いたレーダーチャートを「テーマエディタ上でノーコードでブロック追加できる」ようにするためのカスタマイズ方法です。
chart.jsは様々なプロパティを設定でき、見た目を自由にカスタマイズできるので便利ですね。

◆実装のメリット
・テーマエディタ上で視覚的に設定可能
・商品ごとに表示項目のカスタマイズが容易
・コードを触らずに設定内容の変更が可能

◆具体的な手順
①メタフィールドの設定
・管理画面から必要な数のレーダーチャート項目の定義を追加
・各商品に対してレーダーチャート項目値を設定
②テーマのカスタマイズ
・商品テンプレートに「カスタムLiquidセクション」を追加してバロメーター表示用のコードを挿入

◆実装のポイント
・表示する項目によって最大値・最小値の表示内容を調整する必要あり

#Shopify #ShopifyTIPS