Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
【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セクションを追加
・専用コードを挿入
-
【Shopify TIPS】
商品バロメーターをテーマエディタからノーコードで設定できる実装方法前回（https://x.com/sh_sakamoto/status/1856547541963420006）の「カスタムLiquidにコードを挿入する」方法から「テーマエディタ上でノーコードでブロック追加できる」ようにするためのカスタマイズ方法を紹介。
バロメーターの追加が容易になり、運用がさらに便利になります。◆実装のメリット
・テーマエディタ上で視覚的に設定可能
・商品ごとに表示項目のカスタマイズが容易
・コードを触らずに設定内容の変更が可能◆具体的な手順
①商品情報ブロックの作成
・sections/main-product.liquidにschemeを追加
・ja.schema.jsonにラベルを追加
②バロメーターブロックの実装
・main-product.liquidを編集して商品情報セクションにブロックを定義
③表示設定
・商品メタフィールドでバロメーターを定義
・テーマエディタでブロックを追加
・各項目の表示設定をカスタマイズ◆実装のポイント
・バロメーターの定義は商品ごとに必要
・ブロックの並び順で表示順をコントロール可能
・プレビューモードで表示確認しながら設定可能
スレッド
2枚目と3枚目の画像が滲んでしまっておりましたので再アップします。
-
【Shopify TIPS】
商品の特徴が一目で分かる。バロメーター機能の実装方法Rise/Dawnテーマで商品の特徴を視覚的に表現できる「商品バロメーター」の設定例です。商品のメタフィールドを活用することで、商品の特徴を5段階で分かりやすく表示できます。
◆実装のメリット
・商品の特徴を視覚的に表現可能
・直感的な商品比較が可能なので購買判断の助けになる
・カスタマイズ性が高く様々な商品カテゴリーに対応可能◆具体的な手順
①メタフィールドの設定
・管理画面から必要な数のバロメーター定義を追加
・各商品に対してバロメーターの値を設定
②テーマのカスタマイズ
・商品テンプレートに「カスタムLiquidセクション」を追加してバロメーター表示用のコードを挿入◆実装のポイント
・表示する項目によって最大値・最小値の表示内容を調整する必要あり
・見た目はCSSを直接修正
スレッド
３つ目の画像、キャプチャ画像がテンプレート画面になってしまっておりました。正しくは商品ページテンプレートになります。
-
ストア内検索で検索結果グリッドにコレクションリンクを表示する設定例
前回（https://x.com/sh_sakamoto/status/1855460376659505204）とは別の形で、検索ワードを含むコレクションページへのリンクを検索結果のグリッドに表示させるカスタマイズです。
◆実装のメリット
・検索商品が含まれるコレクションを見たい顧客ニーズに対応◆具体的な実装手順
・テーマの「コード編集」から「sections/main-search.liquid」にコードを追加◆実装のポイント
・コレクションの数によっては差し込まれるグリッド数が膨大になってしまう可能性があるので、別途最大表示件数を指定するなどする必要あり
