Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
【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」を開き、該当の項目を削ることで削除できます。
-
【Shopify TIPS】
テーマ「Dawn/Rise」の在庫ステータスを在庫数で表示・非表示切り替えする設定例Shopifyのテーマ「Dawn/Rise」の商品テンプレート：商品情報セクションには、在庫数を表示したり一定の数量で表示が切り替わる在庫ステータスブロックがありますが、在庫数に応じて表示自体をさせないようにしてほしいというご要望をいただくことがあります。
◆実装のメリット
・在庫状況に応じた適切な情報提供が可能
・一定在庫数を下回ったときだけ表示することで、在庫僅少状態を強調することができる◆具体的な設定手順
①「sections/main-product.liquid」にschemeを追加し「ja.schema.json」に必要なラベルを設定
②「sections/main-collection-product-grid.liquid」にコードを実装
③商品テンプレートの商品情報セクションに在庫ステータスを追加し、表示・非表示を切り替えるスイッチをONにして基準値を指定
-
【Shopify TIPS】
商品ページで意図的に絞り込んだ関連商品を表示するメリットShopifyのテーマに標準で実装されている「おすすめ」商品セクションも効果的なのですが、あえて手動で同じカテゴリや価格帯の商品を表示することでよりスムーズな購買体験を提供することもできます。
◆設定のメリット
・同じカテゴリや価格帯の商品を意図的に表示することで、購買意欲を高められます。
・自動表示される関連商品だけでは逃していた商品との出会いを創出できます。
・商品ジャンルや価格帯ごとのクロスセル効果が期待できます。◆具体的な実装手順
①商品メタフィールドに表示させたいコレクションタイプを追加し、各商品のメタフィールドにコレクションを指定
②商品テンプレートに「特集コレクション」セクションを追加し、参照先のコレクションに各メタフィールドを指定
-
【Shopify TIPS】
コレクションページで商品リスト中にバナー画像を差し込む設定例Shopifyのテーマ「Dawn/Rise」のコレクションページで、プロモーション用のバナー画像を商品と商品の間に埋め込んで表示するための方法です。
◆実装手順（Rise/Dawn テーマの場合）
・コレクションテンプレートの商品グリッドセクションにブロック要素を新規追加
・新規追加したブロック用を差し込むコードを設定◆バナー設定手順
・テーマエディターの「コレクション」テンプレートを開く
・「商品グリッド」セクションの「プロモーションバナー」ブロックを追加し、画像やリンク先などを設定
・バランスと考慮しつつ、バナー画像の表示位置を調整◆補足
・表示設定数とは別にバナー画像を差し込むため１ページあたりの商品表示数にズレが生じます。末端を揃えるには表示するバナー数と表示列数による調整が必要になります。
-
【Shopify TIPS】
商品詳細ページで商品説明枠にバナー画像を表示できるようにする設定例カスタムLiquidでコードを書いても良いのですが、バナーを掲載する頻度が高い運用が想定される時は、ブロックコンテンツとして設定してしまうのがオススメです。
商品説明枠にバナーを入れることで、購入検討中のユーザーの目に確実に入る可能性が高まります。
◆実装のメリット
・商品詳細を読むユーザーの視線上にバナーを配置
・商品情報と関連する告知を自然な流れで見せられる
・既存レイアウトを活かしたスマートな実装◆具体的な設定手順
【テーマDawn/Riseの場合】
①sections/main-product.liquidにschemeを、ja.schema.jsonにラベルを追加
②sections/main-product.liquidにコードを追加
③商品詳細テンプレートの商品情報セクションでブロックを追加し、バナー画像をアップロードしてリンク先URLを設定
-
【Shopify TIPS】
商品詳細サムネイルを円形デザインにする設定例and ST (アンドエスティ)さんのストアで見かけるような円形サムネイルを、Shopifyのテーマ「Dawn/Rise」で実装したい場合の設定方法です。
◆具体的な手順（Rise/Dawn テーマの場合）
・商品テンプレートの商品情報セクションを開く
・カスタムCSSセクションにスタイルを追加
-
【Shopify TIPS】
最新ブログ記事をリストテキスト型で表示する設定例見た目がリッチなブログ記事セクションではなく、シンプルなリスト表示で掲載したいことがあります。
特にお知らせなどは、余計な装飾のないリスト表示の方が読みやすく効果的です。◆実装のメリット
・シンプルで読みやすい記事一覧を実現できます
・ページの表示速度改善が期待できます◆具体的な手順
・Dawn/Riseテーマのトップページテンプレートに「カスタムLiquidセクション」を追加◆補足
コードの内容を調整することで記事タイトルやリンクのスタイル調整、表示件数の設定など、必要に応じてカスタマイズが可能です。
-
【Shopify TIPS】
テーマ「Dawn/Rise」のカートポップアップ通知にもおすすめ商品を表示する設定例Search&Discoveryを使えば、あらかじめ指定したおすすめ商品（関連商品）を商品詳細ページに表示できますが、ページの下部に設置されていると見逃されてしまうことがあります。そこで、これをカート追加後のポップアップ通知にも表示することで、より顧客の目に入りやすくなり、アップセル機会の最大化が期待できます。
◆実装のメリット
・カート追加直後の高い購買意欲を活かせる
・自然な形でクロスセル提案が可能
・購入単価の向上が期待できる◆設定方法（Rise/Dawn対応）
①Search & Discoveryで商品別に付属商品を設定
②商品情報セクションに「付属商品」ブロックを追加
③カスタムLiquidブロックでコードを追加してカスタマイズ
-
【Shopify TIPS】
セグメントに追加された顧客へ自動クーポン配布する設定例Shopify Flowのセグメント追加や離脱のトリガーは本当に便利ですね。
例えば、5回以上購入してくれたお客様に特別なクーポンをストア上で表示したりメールで通知するなど、特定条件を満たしたお得意様へのサービスの自動化の幅が広がりました。◆具体的な設定手順
①セグメントの作成
・顧客 > セグメント から新規作成
・条件設定：「注文回数が5回以上」など
・セグメント名を分かりやすく設定（例：VIP顧客）
②自動タグ付けFlowの作成
・トリガー：[お客様がセグメントに追加されたとき]を選択
・アクション：顧客タグの追加（例：5回以上購入）
③クーポン表示の実装
・テーマカスタマイズ カスタムLiquidの追加
・条件分岐で条件達成したVIP顧客にのみクーポンを表示◆実装のメリット
・顧客ロイヤリティの向上
・自動化による運用負荷の軽減
・購入頻度の向上が期待できる
-
【Shopify TIPS】
Dawn/Riseテーマのブログページを、デスクトップ3カラム＆モバイル2カラムで表示する設定例テーマエディタ上で、ブログテンプレートのブログ記事セクションにカスタムCSSを設定するだけで、デスクトップで3カラム、モバイルでは2カラムのレイアウトに変更することが可能です。
◆実装のメリット
・記事一覧がコンパクトにまとまり、ユーザーの回遊性が向上
・デバイスごとに最適な表示で、読みやすさが格段にアップ◆具体的な手順
・コレクションテンプレートのブログ記事セクションを選択
・カスタムCSSセクションにレイアウト調整用のスタイルを追加
-
【Shopify TIPS】
商品詳細ページの画像をまとめてダウンロードしたい時の方法商品詳細ページを表示した状態で、URLに「.json」を追加することで商品データをJSON形式で表示することができます。
この時、商品データのimagesプロパティには画像のURLも含まれているので、右クリックして画像をダウンロードすることができます。
-
【Shopify TIPS】
テーマ「Dawn/Rise」のコレクションページで、特定の行の商品サイズを変更する設定例商品数が多いコレクションページでは、メリハリをつけた表示も効果的です。
特定の行の商品サイズを変えることで、視覚的な興味を引き出し、ストアの魅力を高めることができます。◆実装のメリット
・商品の見せ方にメリハリが生まれ、ユーザーの興味を引きやすくなります。◆具体的な手順
・コレクションテンプレートの商品グリッドセクションを開く
・カスタムCSSの項目に必要なスタイルを追加
