Xポストログ

2024年12月7日

【Shopify TIPS】
テーマ「Dawn/Rise」の在庫ステータスを在庫数で表示・非表示切り替えする設定例

Shopifyのテーマ「Dawn/Rise」の商品テンプレート：商品情報セクションには、在庫数を表示したり一定の数量で表示が切り替わる在庫ステータスブロックがありますが、在庫数に応じて表示自体をさせないようにしてほしいというご要望をいただくことがあります。

◆実装のメリット
・在庫状況に応じた適切な情報提供が可能
・一定在庫数を下回ったときだけ表示することで、在庫僅少状態を強調することができる

◆具体的な設定手順
①「sections/main-product.liquid」にschemeを追加し「ja.schema.json」に必要なラベルを設定
②「sections/main-collection-product-grid.liquid」にコードを実装
③商品テンプレートの商品情報セクションに在庫ステータスを追加し、表示・非表示を切り替えるスイッチをONにして基準値を指定

#Shopify #ShopifyTIPS

2024年12月6日

【Shopify TIPS】
商品ページで意図的に絞り込んだ関連商品を表示するメリット

Shopifyのテーマに標準で実装されている「おすすめ」商品セクションも効果的なのですが、あえて手動で同じカテゴリや価格帯の商品を表示することでよりスムーズな購買体験を提供することもできます。

◆設定のメリット
・同じカテゴリや価格帯の商品を意図的に表示することで、購買意欲を高められます。
・自動表示される関連商品だけでは逃していた商品との出会いを創出できます。
・商品ジャンルや価格帯ごとのクロスセル効果が期待できます。

◆具体的な実装手順
①商品メタフィールドに表示させたいコレクションタイプを追加し、各商品のメタフィールドにコレクションを指定
②商品テンプレートに「特集コレクション」セクションを追加し、参照先のコレクションに各メタフィールドを指定

#Shopify #ShopifyTIPS

2024年12月5日

【Shopify TIPS】
コレクションページで商品リスト中にバナー画像を差し込む設定例

Shopifyのテーマ「Dawn/Rise」のコレクションページで、プロモーション用のバナー画像を商品と商品の間に埋め込んで表示するための方法です。

◆実装手順（Rise/Dawn テーマの場合）
・コレクションテンプレートの商品グリッドセクションにブロック要素を新規追加
・新規追加したブロック用を差し込むコードを設定

◆バナー設定手順
・テーマエディターの「コレクション」テンプレートを開く
・「商品グリッド」セクションの「プロモーションバナー」ブロックを追加し、画像やリンク先などを設定
・バランスと考慮しつつ、バナー画像の表示位置を調整

◆補足
・表示設定数とは別にバナー画像を差し込むため１ページあたりの商品表示数にズレが生じます。末端を揃えるには表示するバナー数と表示列数による調整が必要になります。

#Shopify #ShopiryTIPS

2024年12月4日

【Shopify TIPS】
商品詳細ページで商品説明枠にバナー画像を表示できるようにする設定例

カスタムLiquidでコードを書いても良いのですが、バナーを掲載する頻度が高い運用が想定される時は、ブロックコンテンツとして設定してしまうのがオススメです。

商品説明枠にバナーを入れることで、購入検討中のユーザーの目に確実に入る可能性が高まります。

◆実装のメリット
・商品詳細を読むユーザーの視線上にバナーを配置
・商品情報と関連する告知を自然な流れで見せられる
・既存レイアウトを活かしたスマートな実装

◆具体的な設定手順
【テーマDawn/Riseの場合】
①sections/main-product.liquidにschemeを、ja.schema.jsonにラベルを追加
②sections/main-product.liquidにコードを追加
③商品詳細テンプレートの商品情報セクションでブロックを追加し、バナー画像をアップロードしてリンク先URLを設定

#Shopify #ShopifyTIPS

2024年12月3日

【Shopify TIPS】
商品詳細サムネイルを円形デザインにする設定例

and ST (アンドエスティ)さんのストアで見かけるような円形サムネイルを、Shopifyのテーマ「Dawn/Rise」で実装したい場合の設定方法です。

◆具体的な手順（Rise/Dawn テーマの場合）
・商品テンプレートの商品情報セクションを開く
・カスタムCSSセクションにスタイルを追加

#Shopify #ShopiryTIPS

2024年12月2日

【Shopify TIPS】
最新ブログ記事をリストテキスト型で表示する設定例

見た目がリッチなブログ記事セクションではなく、シンプルなリスト表示で掲載したいことがあります。
特にお知らせなどは、余計な装飾のないリスト表示の方が読みやすく効果的です。

◆実装のメリット
・シンプルで読みやすい記事一覧を実現できます
・ページの表示速度改善が期待できます

◆具体的な手順
・Dawn/Riseテーマのトップページテンプレートに「カスタムLiquidセクション」を追加

◆補足
コードの内容を調整することで記事タイトルやリンクのスタイル調整、表示件数の設定など、必要に応じてカスタマイズが可能です。

#Shopify #ShopifyTIPS

2024年12月1日

【Shopify TIPS】
テーマ「Dawn/Rise」のカートポップアップ通知にもおすすめ商品を表示する設定例

Search&Discoveryを使えば、あらかじめ指定したおすすめ商品（関連商品）を商品詳細ページに表示できますが、ページの下部に設置されていると見逃されてしまうことがあります。そこで、これをカート追加後のポップアップ通知にも表示することで、より顧客の目に入りやすくなり、アップセル機会の最大化が期待できます。

◆実装のメリット
・カート追加直後の高い購買意欲を活かせる
・自然な形でクロスセル提案が可能
・購入単価の向上が期待できる

◆設定方法（Rise/Dawn対応）
①Search & Discoveryで商品別に付属商品を設定
②商品情報セクションに「付属商品」ブロックを追加
③カスタムLiquidブロックでコードを追加してカスタマイズ

#Shopify #ShopiryTIPS

2024年11月30日

【Shopify TIPS】
セグメントに追加された顧客へ自動クーポン配布する設定例

Shopify Flowのセグメント追加や離脱のトリガーは本当に便利ですね。
例えば、5回以上購入してくれたお客様に特別なクーポンをストア上で表示したりメールで通知するなど、特定条件を満たしたお得意様へのサービスの自動化の幅が広がりました。

◆具体的な設定手順
①セグメントの作成
・顧客 > セグメントから新規作成
・条件設定：「注文回数が5回以上」など
・セグメント名を分かりやすく設定（例：VIP顧客）
②自動タグ付けFlowの作成
・トリガー：[お客様がセグメントに追加されたとき]を選択
・アクション：顧客タグの追加（例：5回以上購入）
③クーポン表示の実装
・テーマカスタマイズカスタムLiquidの追加
・条件分岐で条件達成したVIP顧客にのみクーポンを表示

◆実装のメリット
・顧客ロイヤリティの向上
・自動化による運用負荷の軽減
・購入頻度の向上が期待できる

#Shopify #ShopifyTIPS

2024年11月29日

【Shopify TIPS】
Dawn/Riseテーマのブログページを、デスクトップ3カラム＆モバイル2カラムで表示する設定例

テーマエディタ上で、ブログテンプレートのブログ記事セクションにカスタムCSSを設定するだけで、デスクトップで3カラム、モバイルでは2カラムのレイアウトに変更することが可能です。

◆実装のメリット
・記事一覧がコンパクトにまとまり、ユーザーの回遊性が向上
・デバイスごとに最適な表示で、読みやすさが格段にアップ

◆具体的な手順
・コレクションテンプレートのブログ記事セクションを選択
・カスタムCSSセクションにレイアウト調整用のスタイルを追加

#Shopify #ShopifyTIPS

2024年11月28日

【Shopify TIPS】
商品詳細ページの画像をまとめてダウンロードしたい時の方法

商品詳細ページを表示した状態で、URLに「.json」を追加することで商品データをJSON形式で表示することができます。
この時、商品データのimagesプロパティには画像のURLも含まれているので、右クリックして画像をダウンロードすることができます。

#Shopify #ShopifyTIPS

2024年11月27日

【Shopify TIPS】
テーマ「Dawn/Rise」のコレクションページで、特定の行の商品サイズを変更する設定例

商品数が多いコレクションページでは、メリハリをつけた表示も効果的です。
特定の行の商品サイズを変えることで、視覚的な興味を引き出し、ストアの魅力を高めることができます。

◆実装のメリット
・商品の見せ方にメリハリが生まれ、ユーザーの興味を引きやすくなります。

◆具体的な手順
・コレクションテンプレートの商品グリッドセクションを開く
・カスタムCSSの項目に必要なスタイルを追加

#Shopify #ShopifyTIPS

2024年11月26日

【Shopify TIPS】
商品詳細ページに「追加した決済アイコン」を表示する設定例

商品詳細ページに利用可能な決済手段を明示することで、商品への興味が最も高いタイミングで、お客様の『欲しい』という気持ちを逃すことなく購入を促す効果が期待できます。

◆設定方法
・商品情報にカスタマイズされたLiquidブロックを追加しコードを挿入

◆補足事項
・決済アイコン参照先URL（Github）から表示したいアイコン名を探すことができます。

#Shopify #ShopifyTIPS

2024年11月25日

【Shopify TIPS】
決済アイコンリストに「追加した決済」を表示する設定例

テーマ設定からフッターに表示可能な決済アイコンリストですが、追加した決済方法の中には自動で表示されないものもあります。
それらを追加表示するための設定方法です。
ユーザーが利用可能な決済オプションを視覚的に理解できるため、安心感を高める効果があります。

◆設定方法
・“footer.liquid”の決済アイコンを表示している該当箇所に追加コードを挿入

◆補足事項
・決済アイコン参照先URL（Github）から表示したいアイコン名を探すことができます。

#Shopify #ShopifyTIPS

2024年11月24日

【Shopify TIPS】
テーマ「Dawn/Rise」商品詳細のモバイルレイアウトの「サムネイル」で「グリッド（格子状）」も表示できるようにする設定例

モバイル画面で表示されるサムネイル画像のレイアウトを「カルーセル」ではなく、すべてグリッドに並べた状態で表示できるようにする設定例です。
商品説明や購入ボタンは画面の下の方に押し下げられてしまいますが、なるべく多くの商品画像を一気に見てもらいたい場合などに有効です。

◆実装のメリット
・商品画像を一覧で確認しやすい
・ユーザーが画像を比較しやすい
・スワイプ操作が不要になり操作性向上

◆具体的な手順
設定方法①
「sections/main-product.liquid」にschemaを追加。
「locales/ja.schema.json」にラベルを追加。

設定方法②
「sections/main-product.liquid」「snippets/product-media-gallery.liquid」にカスタムコードを追加。

運用方法
モバイルのレイアウトで「サムネイルをグリッド表示する」を選択。

#Shopify #ShopifyTIPS

2024年11月23日

【Shopify TIPS】
テーマ「Dawn/Rise」商品詳細のデスクトップ画面で「サムネイル画像の表示列数」を指定できるようにする設定例

デスクトップ画面で表示されるサムネイル画像の列数を、4列以外にも任意の数に変更できる設定方法です。
デフォルトでは４列で固定ですが、１列当たりなるべく多く（またはその逆に少なく）表示したい場合がありますが、取扱商品に応じて変更できるようになります。

◆実装のメリット
・画面サイズに合わせた最適な表示が可能
・ブランドイメージに合わせたデザイン調整が容易に

◆具体的な手順
設定方法①
「sections/main-product.liquid」にschemaを追加。
「locales/ja.schema.json」にラベルを追加。

設定方法②
「sections/main-product.liquid」にカスタムコードを追加

運用方法
デスクトップのレイアウトが「サムネイル」または「サムネイルカルーセル」のとき、設定した列数に応じてサムネイルの表示を調整可能。

#Shopify #ShopifyTIPS

2024年11月22日

【Shopify TIPS】
Rise/Dawn テーマで女性向け・男性向け切り替えボタンを設置してコンテンツの表示を切り替える設定例です。

切り替えた後、ストア内のページを回遊して戻ってきても選択状態が維持されます。

また、SEOに配慮して、CSS/jsを使って表示・非表示を切り替えるのではなく、liquidコード上で選択状態を判別してソースコードごと非表示にします。（デフォルトでは女性向けを表示）

◆実装のメリット
・ユーザーの属性に合わせた商品提案が可能
・不要なコンテンツを完全に非表示にすることでページ表示速度も改善
・検索エンジンへの重複コンテンツ配信を防止

◆具体的な手順
①出し分けを行いたいコンテンツ（セクション）に対して、出し分け設定が行えるように項目と出し分け処理を追加
②出し分けを行い、その状態を保持する切り替えボタンを設置
③テーマエディタ上で出し分けコンテンツを作成

#Shopify #ShopifyTIPS

2024年11月22日

昨日ポストしたAmazon Payの利用率を調査する方法ですが、わざわざタグ付けして確認する必要はありませんでした。過剰な作業でした。申し訳ありません。
ストア分析のレポート「タイプ別の決済」から確認できますので、そのまま眺めてみるか、エクスポートして決済数を集計して全体の利用率を見ることができます。

https://x.com/sh_sakamoto/status/1859424139880313137
#Shopify

2024年11月21日

@takagisa800 そうですね。１人１回の制限をつけるには、どうしてもクーポンコードによる回数制限機能に頼らざるを得ません。
（ログインされずに購入される方が多いので、チェックアウト画面で、過去の使用履歴を判定できるのはクーポンコードだけになります）

お役に立てましたら幸いです。

2024年11月21日

【Shopify TIPS】
最後に閲覧した商品の関連コレクションを動的に表示する設定例

テーマ「Dawn/Rise」で、最後に閲覧した商品の関連コレクションをトップページなどで自動で切り替えて表示できるようにする方法です。
商品閲覧履歴とは異なり、商品に関連するコレクションを表示することで、ユーザーの関心を惹きつける可能性が高まります。

◆実装のメリット
・関連コレクションを表示することで購買意欲を刺激
・ユーザーの回遊性が向上し、購入率アップが期待できる
・商品のクロスセル効果で売上増加のチャンス

◆具体的な3ステップ
①メタフィールドの設定
・関連コレクション用のメタフィールド定義を作成
・対象商品に表示したいコレクションを紐付け
②コードの修正
・「sections/featured-collection.liquid」を編集
・動的表示のための設定を追加
③最終調整
・「sections/main-product.liquid」にコードを追加
・テーマエディタで「特集コレクション」をONに

#Shopify #ShopifyTIPS