Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
2024年11月の投稿 絞り込みを解除
-
【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」にコードを追加◆実装のポイント
・コレクションの数によっては差し込まれるグリッド数が膨大になってしまう可能性があるので、別途最大表示件数を指定するなどする必要あり
-
@rossi_kitayama いちど、有無しでABテストしてみたいですね。Shopifyアプリで提供されているものとは別に、テンプレートの切り替え無しで同時並行でABテスト出来るカスタムセクションを開発済みなので、ご興味がありましたら、お試しください。
-
【Shopify TIPS】
休眠顧客を掘り起こすFlow活用の自動メール設定例最終購入日から一定期間経過したお客様に自動でメールを送り、再購入を促すFlowの設定方法です。
◆実装のメリット
・休眠顧客の自動検知と再アプローチ
・購入サイクルに合わせた最適なタイミング配信
・手動作業なしの完全自動化を実現◆具体的な実装手順
①顧客セグメントの作成
・Customers > Segmentsから新規作成
・「Last order date」条件を設定
・30日/60日/90日など期間別にセグメント作成②自動メール配信Flowの設定
・トリガー：「Customer joined segment」を選択
・メール内容：特典付きの再来店促進メッセージを作成◆運用のポイント
・セグメント期間は商品特性に応じて調整する
・配信結果を分析して継続的に改善
-
【Shopify TIPS】
ブログ記事を簡単に複製する方法Shopifyにはブログ記事の複製機能がありませんが、Matrixifyアプリを使えば簡単に実現できます。 テンプレート記事の使い回しや、季節商品の記事更新に便利です。
◆複製のメリット
・記事作成時間の大幅短縮
・フォーマットの統一が容易に
・過去記事の再利用が可能◆具体的な手順
①Matrixifyアプリをインストール
②MatrixifyのExport から複製対象の記事をエクスポート
③Excelやスプレッドシートで記事を複製＆編集
④MatrixifyのImport で新規記事として取り込み※無料プランでも利用可能です
※画像も自動的に複製されます
-
【Shopify TIPS】
コレクションページに在庫数を表示する設定例Rise/Dawnテーマのコレクションページに商品の総在庫数を表示します。（バリアントがある商品は合計在庫数を表示）
Liquidコードの編集を行い、コレクションテンプレートの設定項目でON/OFFできます。--------
◆実装のメリット
・在庫状況の可視化による購買意欲促進
・コレクション単位での表示/非表示切り替え◆具体的な実装手順
①商品グリッドセクションの設定追加
・schema設定に在庫表示用のチェックボックスを追加
・バリアント在庫の合計計算ロジックを実装
・表示用のHTML/Liquid追加②コレクションテンプレートの作成
・既存テンプレートを複製
・在庫表示設定をONに変更
・対象コレクションに新テンプレートを適用
-
@Tjena_allihopa ありがとうございます！ちなみに記載を省きましたが、設定した後で、メタフィールドの登録日を変更すれば、セグメントが切り替わるテストもして頂けます。
-
【Shopify TIPS】
会員登録周年の自動クーポン配布設定◆今回のポイント
会員登録期間に応じた顧客セグメント分け（https://x.com/sh_sakamoto/status/1853270947069104511）を使って、会員登録から1周年を迎えた顧客に自動でクーポンを配布自動化します。◆具体的な実装手順
①顧客セグメントの作成
・会員登録1周年セグメントを作成②ディスカウトの作成
・特定セグメント限定クーポン作成
・使用条件：1周年セグメントに属する顧客のみ
・割引率や有効期限を設定
・一度きりの使用制限を設定③自動配信Flowの作成
・トリガー：Customer joined segment
・条件：1周年セグメントへの加入
・アクション：マーケティングメール送信
・クーポンコードを本文に挿入◆実装のメリット
・周年キャンペーンの完全自動化
・顧客エンゲージメントの向上
・手動作業の削減◆よくあるつまずきポイント
・セグメント条件の日付設定ミス
・クーポンの使用制限漏れ
・メール配信設定の確認不足◆実装後の動作確認すべきポイント
□ セグメント加入条件の正確性
□ クーポンコードの利用制限
-
【Shopify TIPS】
会員登録期間に応じた顧客セグメント分け◆今回のポイント
会員登録からの経過期間（1年、2年など）で顧客をセグメント分けし、より細やかなマーケティング施策を実現できます。メタフィールドとFlowを組み合わせることで、自動的に顧客セグメントを更新できます。◆具体的な実装手順
①顧客メタフィールド作成
・管理画面から顧客用メタフィールドを新規作成
・日付タイプで「アカウント作成日」を設定
②Flowの作成
・トリガー：顧客アカウント作成時
・アクション：メタフィールドに作成日を自動設定
③顧客セグメントの作成
・メタフィールド値との比較で自動判定
・1年経過、2年経過など各セグメントごとにMECEに条件を設定◆実装のメリット
・会員期間に応じたセグメント分けを自動化
・顧客の会員期間別マーケティングの実現◆よくあるつまずきポイント
・メタフィールド作成時の型指定を間違えない
・日付計算の仕様確認◆実装後の動作確認すべきポイント
□ 新規会員登録時の動作確認
□ セグメント条件の正確性
□ 既存顧客の振り分け
□ 日付またぎ時の更新確認
-
【Shopify TIPS】
10分程度の修正で、ヘッダーアカウントアイコンにログイン後ユーザー名を表示可能◆今回のカスタマイズのポイント
WEGOさんのストアのようにShopifyのテーマ「Dawn/Rise」で、ヘッダーのアカウントアイコンの横に、ログイン後ユーザー名を表示させたい場合の設定例です。◆具体的な実装手順
①まずはファイルの場所を確認
・sections/header.liquid
・sections/header-drawer.liquid②コードを追加
・「http://customer.name」を使用すると、日本語名は姓名が逆転してしまうため「customer.last_name」「customer.first_name」に分解して記述
・ヘッダーでアカウント名が改行されないようにスタイリングを追加◆実装のメリット
・ログイン状態が即座に判別可能
・ユーザーの帰属意識向上◆よくあるつまずきポイント
・デスクトップとモバイルで掲載箇所が異なるので、それぞれに実装すること◆実装後の動作確認すべきポイント
□ PC表示での見た目
□ スマホでの表示確認
□ ログイン/ログアウト切り替え
□ 長いユーザー名での表示崩れ--------------
ここまでお読みいただき、ありがとうございます。
ECサイト構築やShopifyカスタマイズについて、定期的に情報発信しています。
セミナーではプロジェクトマネジメントや納品物としてのドキュメント作成方法など、より本格的な構築ノウハウなどを提供しています。
-
Shopifyのテーマ「Dawn/Rise」のスライドショーセクションでボタンリンクを設定した際に、ボタンを非表示にしつつ画像全体をクリッカブルにする設定例です。前回の方法に少し手を加えるだけで実装できます。
https://x.com/sh_sakamoto/status/1851836499362300085
#Shopify
-
Shopifyで商品IDを指定して商品情報を取得する方法です。
通常、Shopifyで特定の商品情報を取得する場合は「all_products["handle"]」タグを使いますが、handle名ではなくIDで指定したいケースもあります。
大量の商品を扱うストアでは、paginateとforループを使って商品IDを探す方法は処理速度の低下を招きやすいため、あまり避けたいところです。
そこで、より効率的な方法として、collections.all（全商品が格納される特殊なコレクション）に対してwhereフィルタでIDを指定することで、目的の商品を素早く取得することができます。
