Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
2024年12月の投稿 絞り込みを解除
-
【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ブロックでコードを追加してカスタマイズ
