Xポストログ

Xで投稿したShopify関連の内容をそのまま記録しています。

  • 【Shopify TIPS】
    検索結果にコレクションリンクを表示する設定例

    商品やブログ、ページとは別に、検索ワードを含むコレクションページへのリンクも検索結果に表示させるカスタマイズです。

    ◆実装のメリット
    ・検索商品が含まれるコレクションを見たい顧客ニーズに対応

    ◆具体的な実装手順
    ①検索テンプレートに「カスタマイズされたLiquid」セクションを追加
    ②Liquidコードの実装

    ◆実装のポイント
    ・デザインはストアの雰囲気に合わせて要調整
    ・コレクションの数によっては一部非表示にするなどアコーディオン処理を加える必要あり

    #Shopify

    Xで見る
  • @rossi_kitayama いちど、有無しでABテストしてみたいですね。Shopifyアプリで提供されているものとは別に、テンプレートの切り替え無しで同時並行でABテスト出来るカスタムセクションを開発済みなので、ご興味がありましたら、お試しください。

    Xで見る
  • 【Shopify TIPS】
    休眠顧客を掘り起こすFlow活用の自動メール設定例

    最終購入日から一定期間経過したお客様に自動でメールを送り、再購入を促すFlowの設定方法です。

    ◆実装のメリット
    ・休眠顧客の自動検知と再アプローチ
    ・購入サイクルに合わせた最適なタイミング配信
    ・手動作業なしの完全自動化を実現

    ◆具体的な実装手順
    ①顧客セグメントの作成
    ・Customers > Segmentsから新規作成
    ・「Last order date」条件を設定
    ・30日/60日/90日など期間別にセグメント作成

    ②自動メール配信Flowの設定
    ・トリガー:「Customer joined segment」を選択
    ・メール内容:特典付きの再来店促進メッセージを作成

    ◆運用のポイント
    ・セグメント期間は商品特性に応じて調整する
    ・配信結果を分析して継続的に改善

    #Shopify

    Xで見る
  • 【Shopify TIPS】
    コレクションページにプルダウン式のページャーを実装する設定例

    商品手数の多いストアでは、価格でソートしている時などある程度めぼしをつけたページに直接遷移しやすいなど、プルダウン式ページャーの方が便利な時があります。
    ちなみにページがリロードされないフィルター適用時も、遷移できるページ数が自動で更新されるようにしています。

    ◆実装のメリット
    ・ページ遷移がスムーズになることでユーザーの回遊性向上が期待できます。

    ◆具体的な手順
    ・コレクションテンプレートに「カスタムLiquidセクション」を追加し、ページャーのコードを挿入

    #Shopify

    Xで見る
  • 【Shopify TIPS】
    ブログ記事を簡単に複製する方法

    Shopifyにはブログ記事の複製機能がありませんが、Matrixifyアプリを使えば簡単に実現できます。 テンプレート記事の使い回しや、季節商品の記事更新に便利です。

    ◆複製のメリット
    ・記事作成時間の大幅短縮
    ・フォーマットの統一が容易に
    ・過去記事の再利用が可能

    ◆具体的な手順
    ①Matrixifyアプリをインストール
    ②MatrixifyのExport から複製対象の記事をエクスポート
    ③Excelやスプレッドシートで記事を複製&編集
    ④MatrixifyのImport で新規記事として取り込み

    ※無料プランでも利用可能です
    ※画像も自動的に複製されます

    #Shopify

    Xで見る
  • 【Shopify TIPS】
    コレクションページに在庫数を表示する設定例

    Rise/Dawnテーマのコレクションページに商品の総在庫数を表示します。(バリアントがある商品は合計在庫数を表示)
    Liquidコードの編集を行い、コレクションテンプレートの設定項目でON/OFFできます。

    --------

    ◆実装のメリット
    ・在庫状況の可視化による購買意欲促進
    ・コレクション単位での表示/非表示切り替え

    ◆具体的な実装手順
    ①商品グリッドセクションの設定追加
    ・schema設定に在庫表示用のチェックボックスを追加
    ・バリアント在庫の合計計算ロジックを実装
    ・表示用のHTML/Liquid追加

    ②コレクションテンプレートの作成
    ・既存テンプレートを複製
    ・在庫表示設定をONに変更
    ・対象コレクションに新テンプレートを適用

    #Shopify

    Xで見る
  • @Tjena_allihopa ありがとうございます!ちなみに記載を省きましたが、設定した後で、メタフィールドの登録日を変更すれば、セグメントが切り替わるテストもして頂けます。

    Xで見る
  • 【Shopify TIPS】
    会員登録周年の自動クーポン配布設定

    ◆今回のポイント
    会員登録期間に応じた顧客セグメント分け(https://x.com/sh_sakamoto/status/1853270947069104511)を使って、会員登録から1周年を迎えた顧客に自動でクーポンを配布自動化します。

    ◆具体的な実装手順
    ①顧客セグメントの作成
    ・会員登録1周年セグメントを作成

    ②ディスカウトの作成
    ・特定セグメント限定クーポン作成
    ・使用条件:1周年セグメントに属する顧客のみ
    ・割引率や有効期限を設定
    ・一度きりの使用制限を設定

    ③自動配信Flowの作成
    ・トリガー:Customer joined segment
    ・条件:1周年セグメントへの加入
    ・アクション:マーケティングメール送信
    ・クーポンコードを本文に挿入

    ◆実装のメリット
    ・周年キャンペーンの完全自動化
    ・顧客エンゲージメントの向上
    ・手動作業の削減

    ◆よくあるつまずきポイント
    ・セグメント条件の日付設定ミス
    ・クーポンの使用制限漏れ
    ・メール配信設定の確認不足

    ◆実装後の動作確認すべきポイント
    □ セグメント加入条件の正確性
    □ クーポンコードの利用制限

    #Shopify

    Xで見る
  • 【Shopify TIPS】
    会員登録期間に応じた顧客セグメント分け

    ◆今回のポイント
    会員登録からの経過期間(1年、2年など)で顧客をセグメント分けし、より細やかなマーケティング施策を実現できます。メタフィールドとFlowを組み合わせることで、自動的に顧客セグメントを更新できます。

    ◆具体的な実装手順
    ①顧客メタフィールド作成
    ・管理画面から顧客用メタフィールドを新規作成
    ・日付タイプで「アカウント作成日」を設定
    ②Flowの作成
    ・トリガー:顧客アカウント作成時
    ・アクション:メタフィールドに作成日を自動設定
    ③顧客セグメントの作成
    ・メタフィールド値との比較で自動判定
    ・1年経過、2年経過など各セグメントごとにMECEに条件を設定

    ◆実装のメリット
    ・会員期間に応じたセグメント分けを自動化
    ・顧客の会員期間別マーケティングの実現

    ◆よくあるつまずきポイント
    ・メタフィールド作成時の型指定を間違えない
    ・日付計算の仕様確認

    ◆実装後の動作確認すべきポイント
    □ 新規会員登録時の動作確認
    □ セグメント条件の正確性
    □ 既存顧客の振り分け
    □ 日付またぎ時の更新確認

    #Shopify

    Xで見る
  • 【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カスタマイズについて、定期的に情報発信しています。
    セミナーではプロジェクトマネジメントや納品物としてのドキュメント作成方法など、より本格的な構築ノウハウなどを提供しています。

    Xで見る
  • Shopifyのテーマ「Dawn/Rise」のスライドショーセクションでボタンリンクを設定した際に、ボタンを非表示にしつつ画像全体をクリッカブルにする設定例です。前回の方法に少し手を加えるだけで実装できます。
    https://x.com/sh_sakamoto/status/1851836499362300085
    #Shopify

    Xで見る
  • Shopifyで商品IDを指定して商品情報を取得する方法です。

    通常、Shopifyで特定の商品情報を取得する場合は「all_products["handle"]」タグを使いますが、handle名ではなくIDで指定したいケースもあります。

    大量の商品を扱うストアでは、paginateとforループを使って商品IDを探す方法は処理速度の低下を招きやすいため、あまり避けたいところです。

    そこで、より効率的な方法として、collections.all(全商品が格納される特殊なコレクション)に対してwhereフィルタでIDを指定することで、目的の商品を素早く取得することができます。

    Xで見る
  • Shopifyのテーマ「Dawn/Rise」のスライドショーセクションですが、ボタン部分以外の画像全体にもリンクを指定したいケースがあります。その設定例です。 ボタンを有効にしているスライドに適用されます。
    #Shopify

    Xで見る
  • @MakiNumano そうですね。Matrixifyを使ったやり方としましてはこのような感じになります。

    Xで見る
  • Shopifyのテーマ「Dawn/Rise」のメニューに親子構造を持たせると、親メニューをクリックした際はその下の子・孫メニューを開くだけでその画面には遷移できなくなってしまいます。なので親メニューにも遷移させたい場合、「○○○すべて」等のメニューも設置してもらうようにしています。
    #Shopify

    Xで見る
  • 以前紹介したMatrixifyを用いた方法とは別に、Shopify Flowを用いて割引セールを自動的にスケジュールする設定方法です。Flowアクションで割引価格を設定することができないので、同じSKUを持つ2つの商品を用意して表示を切り替えることで対応しています。
    https://x.com/sh_sakamoto/status/1733335663578345820
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn/Rise」のコレクションページでデスクトップ用画面の絞り込みフィルターを左サイド表示している際に、最初から全て展開しておきたい場合の設定例です。ユーザーテストするとわかりますが、見えないものは意外と気づかれないので、最初から開いておくのも良いですね。
    #Shopify

    Xで見る
  • Shopifyの商品詳細ページで、タブ切り替えの商品説明を掲載したい場合の設定例です。テーマ編集で商品情報セクションの中にタブ切り替えを行うJavascriptとcssを設定した上で、商品情報の「商品説明」内に対応フォーマットに沿ってHTMLタグを設定します。特にテーマの制限はありません。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn/Rise」の商品画面で数量を指定してカート追加する際、通常は在庫数以上に指定することが可能になっていますが、在庫上限までしか指定できないようにしたい場合の設定例です。増分ボタン、数値入力ともに上限値までしか入力できないようになります。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn/Rise」の商品ページで、数量セレクターを「+/-」ボタン(または直接数値入力)ではなく、プルダウン式に変えたい場合の設定例です。ボタンをタップせずに即座に希望数量を選択できるため、商材によっては利便性が高まります。
    #Shopify

    Xで見る