Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
2024年11月の投稿 絞り込みを解除
-
【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の項目に必要なスタイルを追加
-
【Shopify TIPS】
商品詳細ページに「追加した決済アイコン」を表示する設定例商品詳細ページに利用可能な決済手段を明示することで、商品への興味が最も高いタイミングで、お客様の『欲しい』という気持ちを逃すことなく購入を促す効果が期待できます。
◆設定方法
・商品情報にカスタマイズされたLiquidブロックを追加しコードを挿入◆補足事項
・決済アイコン参照先URL（Github）から表示したいアイコン名を探すことができます。
-
【Shopify TIPS】
決済アイコンリストに「追加した決済」を表示する設定例テーマ設定からフッターに表示可能な決済アイコンリストですが、追加した決済方法の中には自動で表示されないものもあります。
それらを追加表示するための設定方法です。
ユーザーが利用可能な決済オプションを視覚的に理解できるため、安心感を高める効果があります。◆設定方法
・“footer.liquid”の決済アイコンを表示している該当箇所に追加コードを挿入◆補足事項
・決済アイコン参照先URL（Github）から表示したいアイコン名を探すことができます。
-
【Shopify TIPS】
テーマ「Dawn/Rise」商品詳細のモバイルレイアウトの「サムネイル」で「グリッド（格子状）」も表示できるようにする設定例モバイル画面で表示されるサムネイル画像のレイアウトを「カルーセル」ではなく、すべてグリッドに並べた状態で表示できるようにする設定例です。
商品説明や購入ボタンは画面の下の方に押し下げられてしまいますが、なるべく多くの商品画像を一気に見てもらいたい場合などに有効です。◆実装のメリット
・商品画像を一覧で確認しやすい
・ユーザーが画像を比較しやすい
・スワイプ操作が不要になり操作性向上◆具体的な手順
設定方法①
「sections/main-product.liquid」にschemaを追加。
「locales/ja.schema.json」にラベルを追加。設定方法②
「sections/main-product.liquid」「snippets/product-media-gallery.liquid」にカスタムコードを追加。運用方法
モバイルのレイアウトで「サムネイルをグリッド表示する」を選択。
-
【Shopify TIPS】
テーマ「Dawn/Rise」商品詳細のデスクトップ画面で「サムネイル画像の表示列数」を指定できるようにする設定例デスクトップ画面で表示されるサムネイル画像の列数を、4列以外にも任意の数に変更できる設定方法です。
デフォルトでは４列で固定ですが、１列当たりなるべく多く（またはその逆に少なく）表示したい場合がありますが、取扱商品に応じて変更できるようになります。◆実装のメリット
・画面サイズに合わせた最適な表示が可能
・ブランドイメージに合わせたデザイン調整が容易に◆具体的な手順
設定方法①
「sections/main-product.liquid」にschemaを追加。
「locales/ja.schema.json」にラベルを追加。設定方法②
「sections/main-product.liquid」にカスタムコードを追加運用方法
デスクトップのレイアウトが「サムネイル」または「サムネイルカルーセル」のとき、設定した列数に応じてサムネイルの表示を調整可能。
-
【Shopify TIPS】
Rise/Dawn テーマで女性向け・男性向け切り替えボタンを設置してコンテンツの表示を切り替える設定例です。切り替えた後、ストア内のページを回遊して戻ってきても選択状態が維持されます。
また、SEOに配慮して、CSS/jsを使って表示・非表示を切り替えるのではなく、liquidコード上で選択状態を判別してソースコードごと非表示にします。（デフォルトでは女性向けを表示）
◆実装のメリット
・ユーザーの属性に合わせた商品提案が可能
・不要なコンテンツを完全に非表示にすることでページ表示速度も改善
・検索エンジンへの重複コンテンツ配信を防止◆具体的な手順
①出し分けを行いたいコンテンツ（セクション）に対して、出し分け設定が行えるように項目と出し分け処理を追加
②出し分けを行い、その状態を保持する切り替えボタンを設置
③テーマエディタ上で出し分けコンテンツを作成
-
昨日ポストしたAmazon Payの利用率を調査する方法ですが、わざわざタグ付けして確認する必要はありませんでした。過剰な作業でした。申し訳ありません。
ストア分析のレポート「タイプ別の決済」から確認できますので、そのまま眺めてみるか、エクスポートして決済数を集計して全体の利用率を見ることができます。https://x.com/sh_sakamoto/status/1859424139880313137
#Shopify
-
@takagisa800 そうですね。１人１回の制限をつけるには、どうしてもクーポンコードによる回数制限機能に頼らざるを得ません。
（ログインされずに購入される方が多いので、チェックアウト画面で、過去の使用履歴を判定できるのはクーポンコードだけになります）お役に立てましたら幸いです。
-
【Shopify TIPS】
最後に閲覧した商品の関連コレクションを動的に表示する設定例テーマ「Dawn/Rise」で、最後に閲覧した商品の関連コレクションをトップページなどで自動で切り替えて表示できるようにする方法です。
商品閲覧履歴とは異なり、商品に関連するコレクションを表示することで、ユーザーの関心を惹きつける可能性が高まります。◆実装のメリット
・関連コレクションを表示することで購買意欲を刺激
・ユーザーの回遊性が向上し、購入率アップが期待できる
・商品のクロスセル効果で売上増加のチャンス◆具体的な3ステップ
①メタフィールドの設定
・関連コレクション用のメタフィールド定義を作成
・対象商品に表示したいコレクションを紐付け
②コードの修正
・「sections/featured-collection.liquid」を編集
・動的表示のための設定を追加
③最終調整
・「sections/main-product.liquid」にコードを追加
・テーマエディタで「特集コレクション」をONに
-
Shopify で Amazon Payが使えなくなってしまうということで、売り上げ影響にどれぐらい影響がありそうか、過去の利用率を調べておくと良さそうです。
Shopifyの注文情報にShopify Payments以外の決済手段をタグ付けする方法
https://x.com/sh_sakamoto/status/1822120688955818334過去の注文情報にも決済手段をタグ付けする方法タグ付けしたい場合
https://x.com/sh_sakamoto/status/1822483077630775720 -
【Shopify TIPS】
メタフィールド活用の落とし穴：ストア内検索にヒットしない問題についてメタフィールドは便利な機能なのですが、メタフィールドに入力した内容はストア内検索の対象にはならない点に気を付ける必要があります。
なので、ストア内検索にヒットさせたいときは、Rise/Dawnテーマの「折りたたみ行」ブロックをメタフィールドに連携させずに、直接商品説明内にHTMLコードごと記載した方が良いケースがあります。◆設定方法
商品説明欄に情報を直接記載
→検索対象となるため、ストア内検索にヒットするようになります。
HTMLコードをそのまま活用
→「折りたたみ可能な行」のコードをそのまま流用すれば、見た目も崩れずに掲載可能。◆実装のメリット
・閲覧者が商品説明を見る際に、折りたたみ行で情報を見やすくまとめることができつつ、商品発見率の向上が期待できる。
-
【Shopify TIPS】
商品一覧に関連Instagramリンクを表示する設定例前回（https://x.com/sh_sakamoto/status/1858359476979470837）の商品詳細にInstagramコンテンツリンクを表示できるようにする方法に関連して、商品一覧にもコンテンツが連携していることを示すためのアイコンを表示させたい場合の方法です。
◆具体的な設定手順
①メタフィールド作成
InstagramのURL登録欄を設定②商品カードliquid「card-product.liquid」と「base.css」の改修
アイコンを表示するコードの設定
そのアイコン表示を調整するCSSを追加③Instagram連携
対象商品のメタフィールドにInstagramのURLを入力
-
そうですね。「自動ディスカウント」は顧客条件を指定することができないため「初回のみ送料無料」を自動で行うことができません。
ですので、通常の送料無料クーポンコードのディスカウントを作成し、「お客様1人につき1回のみの使用とする」制限を付けてご利用いただく形を取っています。その際、クーポンを見落とされないようカート画面に案内を出すなどしつつ、そのクーポンコードを一度でもお使い頂いた方にはご購入時にタグをつけることで、次回以降カート画面にその案内が表示されないようにする、などの処理を加えるなどしています。
-
【Shopify TIPS】
商品詳細に関連Instagramリンクを表示する設定例商品とInstagramコンテンツを連携させることで、商品の魅力をよりリアルに伝えられるようになります。アプリを使って埋め込めれば一番良いのですが、簡易的にリンクだけでも表示させたい場合の方法です。
◆実装のメリット
・ビジュアル重視の購入検討者の満足度向上
・SNSとECの相乗効果で購買を促進◆具体的な設定手順
①メタフィールド作成
InstagramのURL登録欄を設定②商品情報セクションにカスタムLiquidブロックを追加
Instagramアイコンリンクを表示するためのコードを挿入③Instagram連携
対象商品のメタフィールドにInstagramのURLを入力
-
【Shopify Flow TIPS】
Shopify Flowで注文メモを操作する際に気をつけておきたい点Shopify Flowを使って注文生成時に注文メモに追記したい場合、そのまま注文メモの内容を記入してしまうと、顧客の記入した内容を書き換えてしまうので注意が必要です。
◆書き換えないようにする方法
・Order.noteを設定する際、既存メモ + 新規メモの形で記述します。
-
【Shopify運営必見】
商品の登録画像数で絞り込みできるようにする設定例商品画像は購買意欲を左右する重要な要素ですが、商品数が多くなってくると画像数の少ない商品を探すのは意外と手間です。
そこで、商品管理画面上で商品の画像点数で絞り込みできるようにする設定例です。◆この設定で解決できること
・画像数の少ない商品を一発で特定
・商品管理の効率アップ◆実装手順
①商品メタフィールドの設定
・「商品画像数」を新規作成
②Flowの作成
・トリガー：「Product status updated」を選択
・アクション：商品画像数の自動カウント設定◆使い方のコツ
大賞の商品を「下書き→公開」状態にして意図的にFlowを動かす。
その後、フィルターで画像数による絞り込みが可能になります。
-
【Shopify TIPS】
Dawn/Riseテーマで商品画像を一覧表示して、クイックアクセスできるようにする設定例です。実は、前回ポストした内容（https://x.com/sh_sakamoto/status/1661306221029396481）ですが、Dawn9.0.0までしか使えず、10.0.0以降は新たに追加されたCSSプロパティによってモーダルがうまく表示されなくなってしまっておりました。
今回、その修正を行うと同時に、新たにデスクトップでも表示できるように機能を追加しています。
◆実装のメリット
・ユーザーの商品理解度アップで購買率向上
（大量の商品画像が存在する場合など、ユーザーが見たい画像に素早くアクセスできるようになります）
・Dawn 10.0.0以降の不具合を解消◆設定手順
①商品テンプレートの設定
・デスクトップ＆モバイルをサムネイル表示に変更
②商品テンプレートにカスタムLiquidセクションを追加
・専用コードを挿入
