Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
商品詳細画面で注文前の事前承認モーダルを表示する設定例
購入いただく前に何かしら承認を取っておきたい情報を掲載したい場合に、モーダルウィンドウを表示し、「承認」が取れたら以降は表示しないようにする方法です。cart attributesを使って承認状態を保持するので、注文情報に承認済みであることの証左を残すことができます。
間に１ステップ挟むことになるので、カート追加率は下がってしまいますが、それでも了承いただく必要がある時などに使うことが想定されます。◆実装のメリット
・了承されるまで何度も表示され、了承済みの場合は以降、別の商品でも表示されません。
・直接「カートに追加する」ボタンイベントを操作するわけではないので、購入アクションへの影響が最小限に◆具体的な手順
・商品テンプレートに「カスタマイズされたLiquidセクション」を追加
・承認チェック用のコードを挿入◆活用シーン
・数量限定商品の販売
・特定の条件下でのみ販売可能な商品
・在庫管理が厳密に必要な商品など
-
【Shopify TIPS】
Javascriptなしで実装できるモーダルウィンドウの設定方法年末年始のお知らせなど、一時的なモーダルウィンドウを追加したい際に、Javascriptを使わずにサクッとCSSだけで実装する方法です。
◆実装のメリット
・軽量な実装
・保守性の高いシンプルなコード◆具体的な実装手順
・表示したい箇所にカスタマイズされたLiquidセクションを追加し、用意したモーダル用コードを挿入
・CSSでスタイリングを適用◆注意ポイント
ただし、テーマ「Dawn/Rise」の商品情報など、親要素に「transform」プロパティが設定されている場合、画面全体のモーダル表示が正しく機能しません。
事前に親要素のスタイルを確認しておく必要があります。
-
【Shopify TIPS】
価格の異なるバリアントを持つ商品で価格テーブルを表示する設定例テーマ「Dawn/Rise」の標準仕様のため異なる価格のバリアントを持つ商品は、バリアントを選択して価格を確認する必要があります。
予めバリアントごとの価格表を表示しておけば、お客様がストレスなく商品を選ぶことができます。◆実装のメリット
・お客様が一目で全価格を確認可能
・バリアント切替の手間を削減
・購入までの導線がスムーズに◆具体的な手順（テーマ：Rise/Dawn）
商品テンプレートの商品情報セクションにカスタムLiquidブロックを追加してコードを挿入#Shopify #ShopifyTIPS #EC #ECTips
-
【Shopify TIPS】
バリアントピッカーにバッジを表示する設定例（その２）前回は商品バリアント名に直接バッジを記載する方法でしたが、商品管理や受発注への影響を避けるためバリアント名自体は変更せず、バリアントピッカーにバッジを表示する方法です。
運用難易度が少々上がってしまいますが、JSON形式の商品メタフィールドを使ってバッジを表示させたいバリアントを指定します。◆実装のメリット
・バリアント名そのものに影響を与えず、バッジの表示を追加可能
・バリアント名の変更による商品管理や受発注への影響を避けられる
・同様にSEOへの影響を避けられる◆具体的な実装手順
①JSON型の商品メタフィールドを作成し、対象の商品のバリアントに応じた内容を指定
②商品テンプレートにLiquidセクションを追加しコードを挿入
-
【Shopify TIPS】
バリアントピッカーにバッジを表示する設定例商品バリエーションが多いストアでは、顧客が選択に迷う可能性があります。バリアントにバッジを表示することで、商品選びの判断材料を提供できます。
◆実装のメリット
・顧客の商品選択をスムーズにサポート
・視覚的な情報で直感的に商品の特徴が伝わる
・迷いやすいポイントを解消し、離脱率の改善が期待できる◆具体的な実装手順
①商品バリアント名の設定
・管理画面で各バリアントに（）を使ってバッジ表示したい文言を追記
例：S（残りわずか）、M（おすすめ）、L（新色）②テーマファイルの編集
・Rise/Dawnテーマの場合は「snippets/product-variant-options.liquid」を開く
・バリアント名の（）内の文字を抽出してスタイル付きのspanタグで表示する処理を追加
-
【Shopify TIPS】
Rise/Dawnテーマ「折りたたみコンテンツ」の特定の行を最初から開いておく設定例Rise/Dawnテーマお商品ページに設定できる「折りたたみコンテンツ」で最初から開いておきたい行を自由に指定できるようにする方法です。
必ずしも最初の行だけを開いておきたくない場合もあるため、この設定を追加することで、ユーザーが最初に見るべき情報を指定できるようになります。◆実装のメリット
・重要な情報を最初から見せることで、ユーザーの理解度向上が期待できます。
・必要な情報への到達までのクリック数を減らすことができます。◆具体的な手順
①schemaファイルの編集
・「sections/collapsible-content.liquid」のスキーマに設定項目を追加
・「ja.schema.json」に日本語のラベルを追加
②テンプレートファイルの編集
・「sections/collapsible-content.liquid」に指定行を開くための処理を追加
-
【Shopify TIPS】
ページ遷移をスムーズに。ローディングバー実装の設定例ページ遷移時のユーザー体験を大きく改善できる、ローディングバーの実装方法です。
ストア内を回遊するリンクをクリックした際に、ヘッダー部分に擬似的なローディングバーを表示します。正確に遷移先のロードを行っているわけではないのですが、リンクに反応していることをフィードバックすることで、ページ読み込み中の進捗が視覚的に分かり、ユーザーのストレス軽減します。◆実装のメリット
・ページ読み込み中の進捗が視覚的に分かり、ユーザーのストレス軽減
・「サイトが固まっている」と誤解される事態を防止◆具体的な手順
・ヘッダーグループに「カスタマイズされたLiquidセクション」を追加
・ローディングバー用のコードを挿入
-
【Shopify TIPS】
配送日時指定不可の対象商品をカート画面で確認できるようにする設定例配送日時指定ができるアプリを使用する際に、配送日時を指定できない商品が含まれている場合に、どの商品がその対象なのかを表示する設定方法です。
◆具体的なメリット：
・どの商品が対象かすぐにわかることで購入時の商品調整が可能に
・問い合わせ対応の工数削減
・カート離脱率の改善が期待できる◆実装手順
①対象の配送日時指定不可商品にタグを設定
②Rise/DawnテーマのカートテンプレートにカスタムLiquidセクションを追加しコードを挿入さらにShopify Plusをお使いの場合、チェックアウト画面で配送日時指定を可能にするケースも多いかと思います。
この設定により、お客様は配送日時指定ができない商品をカート画面で確認できるようになるので、チェックアウト時に気づいたお客様の声にも対応できます。
-
【Shopify TIPS】
特集コレクションを日時指定で公開する方法（Rise/Dawn対応）商品の季節性やキャンペーンに合わせて特集コレクションを表示したい場合、アプリ「Matrixify」を使って実現する方法です。
事前に、コレクションが未公開の場合は「特集コレクション」セクションを非表示とするカスタマイズは行っておく必要があります。◆実装のメリット
・時間帯や季節に応じた商品訴求が可能
・手動での切り替え作業が不要◆具体的な手順
①テーマファイルの編集
「sections/featured-collection.liquid」にコレクションが設定されている場合のみ表示されるよう条件分岐を設定②対象コレクションの販売チャネルから「オンラインストア」をオフに
（これにより通常のコレクション一覧には表示されなくなります）③Matrixifyでインポート用ファイルを作成し公開したい日時を指定してインポートを実行
（設定した時間になるとインポートしたファイルの内容が反映され、自動でコレクションが表示されます）◆補足
・事前にテスト環境での動作確認をおすすめします。
・季節商品やタイムセール等と組み合わせると効果的です。
-
【Shopify TIPS】
カート内商品数に応じて割引メッセージを表示する方法「n個以上でx円オフ」の自動ディスカウントを使う時、Rise/Dawnテーマでカート内の商品点数によってメッセージを出し分ける設定例です。
自動ディスカウントはクーポンコードの入力を必要とせず自動で割引が適用される便利な機能ですが、ディスカウントが適用される前からその割引内容をユーザーに分かりやすく伝えておくと、購入意欲を高めることができて効果的です。◆実装のメリット
・ユーザーにとって分かりやすい割引表示で、ショップの信頼度をアップ
・カート内商品数に応じた動的な表示で、購入意欲を高めます。◆具体的な手順
・カートテンプレートに「カスタマイズされたLiquidセクション」を追加
・商品点数判定用のコードを挿入して完了
-
【Shopify TIPS】
商品レーダーチャートをテーマエディタからノーコードで設定できる実装方法前回（https://x.com/sh_sakamoto/status/1856547541963420006）のバロメーターのような形で、chart.jsを用いたレーダーチャートを「テーマエディタ上でノーコードでブロック追加できる」ようにするためのカスタマイズ方法です。
chart.jsは様々なプロパティを設定でき、見た目を自由にカスタマイズできるので便利ですね。◆実装のメリット
・テーマエディタ上で視覚的に設定可能
・商品ごとに表示項目のカスタマイズが容易
・コードを触らずに設定内容の変更が可能◆具体的な手順
①メタフィールドの設定
・管理画面から必要な数のレーダーチャート項目の定義を追加
・各商品に対してレーダーチャート項目値を設定
②テーマのカスタマイズ
・商品テンプレートに「カスタムLiquidセクション」を追加してバロメーター表示用のコードを挿入◆実装のポイント
・表示する項目によって最大値・最小値の表示内容を調整する必要あり
-
【Shopify TIPS】
絞り込み条件にタグを設定した際に、表示されるタグの指定・除外を行えるようにする設定例前回（https://x.com/sh_sakamoto/status/1867056786987217406）までの設定方法は除外するタグを指定するだけのものでしたが、タグのボリュームが増えてくると除外するよりも指定したタグのみを表示する方が利便性が高くなります。というわけで、テーマ「Rise/Dawn」のエディタ上で指定または除外したいタグを追加・削除・編集できるようにする方法です。（前回の画像に一部ミスがありましたので、その部分も修正しています）
◆設定のメリット
・テーマエディタ上で指定・除外タグの編集が可能。◆具体的な設定手順
①「sections/main-collection-product-grid.liquid」にschemeを「ja.schema.json」にラベルを追加
②「sections/main-collection-product-grid.liquid」に絞り込み設定snippetsに指定したタグリストを渡す引数を追加
③「snippets/facets.liquid」に除外するタグの読み込み、デスクトップ用・モバイルドロワー用のフィルタに除外処理を追加
-
【Shopify TIPS】
商品説明文が長い場合に自動開閉機能を実装する設定例商品説明が長文な商品の場合、その掲載位置によっては購入ボタンがかなり下の方に押し出されてしまい、カート追加しづらい状況が発生します。そこで、テーマ「Rise/Dawn」で説明文が一定の高さ以上になった場合に自動開閉機能を実装する方法です。
◆実装のメリット
・ページの見やすさが向上し、ユーザー体験が改善されます
・必要な情報に素早くアクセスできるようになります
・モバイル表示時の使いやすさが格段に向上します◆具体的な手順
・商品詳細ページのテンプレートで商品情報セクションの「カスタムLiquid」ブロックを追加
・開閉機能用のコードを挿入して設定を完了この設定により、一定量以上の商品説明文がある場合、自動で「続きを読む」ボタンが表示され、ユーザーが必要に応じて内容を確認できるようになります。
-
【Shopify TIPS】
アプリ「Matrixify」を使って「コンテンツ>メニュー」の一括変更が可能に過去にたびたびその利便性と用途を紹介してきたMatrixifyですが、数ヶ月前からメニューも一括編集できるようになりました。
膨大なメニュー数を持つ巨大なストアでは、ステージング用にストアを複製する際に非常に手間を要していたのですが、この機能のおかげで一括で対応できるので大変助かっています。
スレッド
Matrixify
https://apps.shopify.com/excel-export-import?locale=ja -
【Shopify TIPS】
商品の販売元（ブランド）別にコレクションを作成し、商品詳細ページからリンクする設定例商品詳細ページにブランド名を表示するケースは多いのですが、そのブランド名からブランド商品一覧ページにメタオブジェクトを使って自動でリンクするようにする方法です。
一度設定しておけば、新しいブランド名が追加されてもコレクションとメタオブジェクトを作成するだけでコードに手を入れる必要なく、自動でリンクされるようになります。◆実装のメリット
・ユーザーが気に入ったブランドの商品をすぐに探せるようになります
・ブランドごとの回遊性が向上し、購買機会の増加が期待できます
・一度設定すれば、新商品追加時も自動的にリンクされます◆具体的な設定手順（Dawn/Riseテーマ向け）
①ブランドコレクションの作成
・管理画面から「コレクション」→「コレクション作成」へ
・条件として「販売元」を選択し、各ブランド名で絞り込み設定
②メタオブジェクトでの紐付け
・メタオブジェクトの定義を新規追加
・必要なブランド名とコレクションURLを関連付け
③商品詳細ページへの実装
・商品情報セクションにカスタムLiquidブロックを追加
・商品の販売元（ブランド）名とメタオブジェクトと照合してリンク設定するコードを挿入
-
【Shopify TIPS】
絞り込み条件にタグを設定した際に不要なタグを非表示にする設定例【その２】前回（https://x.com/sh_sakamoto/status/1866332009657987153）の設定方法は直接コードに除外するタグを記述する方法でしたが、運用を開始するとコード編集はしたくないものですね。というわけで、テーマ「Rise/Dawn」のエディタ上で除外したいタグを随時追加・削除・編集できるようにする方法です。
◆設定のメリット
・テーマエディタ上でタグの編集が可能。◆具体的な設定手順
①「sections/main-collection-product-grid.liquid」にschemeを「ja.schema.json」にラベルを追加
②「sections/main-collection-product-grid.liquid」に絞り込み設定snippetsに指定したタグリストを渡す引数を追加
③「snippets/facets.liquid」に除外するタグの読み込み、デスクトップ用・モバイルドロワー用のフィルタに除外処理を追加
-
【Shopify TIPS】
商品ページに説明書PDFなどのファイルダウンロードリンクを設置する設定例商品の説明書など、商品に関連する資料をダウンロードできるようにする方法です。
商品ページにファイルダウンロードリンクを設置することで、顧客サポートの向上や商品の理解を深めることが期待できます。◆実装のメリット
・商品ページから直接説明書がダウンロード可能に
・商品ごとに異なる説明書の管理が容易◆具体的な設定手順
①メタフィールドの設定
・管理画面から商品メタフィールドに説明書用ファイルの定義を追加
・対象商品に説明書PDFファイルをアップロード
②テーマファイルの編集１（Rise/Dawn）
・「sections/main-product.liquid」にschemaの設定を追加
・「ja.schema.json」にラベルを追加
③テーマファイルの編集２（Rise/Dawn）
・「sections/main-product.liquid」にコードを追加
・コード編集後、テーマエディタ上で商品情報にこのブロックを追加
-
【Shopify TIPS】
Shopifyの絞り込み条件にタグを設定した際に不要なタグを非表示にする設定例ShopifyのSearch & Discoveryで絞り込み条件にタグを設定した際、スマートコレクションの条件などで使用しており、絞り込みとしては表示したくないタグを非表示にしたい場合があります。
テーマ「Rise/Dawn」で、予め指定したタグを非表示にする設定方法です。◆設定のメリット
・表示させたくないタグを非表示にすることで、ユーザーにとって不要な情報を省略し、スッキリとした表示を実現できます。◆具体的な設定手順
①liquidコード上に除外したいタグ名を設定
②「snippets/facets.liquid」ファイルのデスクトップ用フィルターコードを編集
③「snippets/facets.liquid」ファイルのモバイル用フィルターコードを編集
-
【Shopify TIPS】
Shopifyでピックアップ商品を自動で切り替える設定方法アプリMatrixifyを使ってコレクション情報をスケジュール更新する方法を以前ポストしましたが、今回は商品ごとにメタフィールドを使って表示期間を指定してピックアップ商品を自動で切り替える方法です。
◆設定のメリット
・担当者の作業負担減
・深夜や休日でも正確に切り替え可能◆具体的な設定手順
①メタフィールド定義の作成
・ピックアップ開始日時用のフィールド作成
・ピックアップ終了日時用のフィールド作成
②自動判別フローを作成
・日次スケジュールトリガーを設定
・最新100件の商品をチェック
・期間内の商品に自動で「pickup」タグ付け
③スマートコレクションを設定
・「pickup」タグ商品を表示するよう設定
・テーマに組み込んで完了
④商品のピックアップ開始・終了日時指定
・対象商品のメタフィールド値を設定◆実際の導入例：
・季節商品の展示切り替え
・限定商品の販売期間管理
・タイムセール商品の表示制御
など
-
【Shopify TIPS】
不要なテーマカラースキームの削除方法Shopifyのテーマ設定画面で任意に追加することができるカラースキームですが、誤って操作するなどして不要なカラーが増えてしまったときは、「テーマ編集」から「config/settings_data.json」を開き、該当の項目を削ることで削除できます。
