Xポストログ

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

  • Shopifyの商品詳細画面で商品情報に設定されたタグを表示する方法はカスタムLiquidを使うなど色々ありますが、表示させたいタグをテーマエディタ側で指定できるようにした独自ブロックの設定例です。表示させるタグを敢えて指定する方式なので、不要なタグが表示されないよう制御できます。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」の商品詳細画面にあるShareボタンは、タップすると商品のURLが表示されるだけになっています。そこで、よくあるSNSアイコン付きのリンクの設定例です。足りないアイコン画像を追加し、各リンクルールに基づきシェア用URLを設定しています。
    #Shopify

    Xで見る
  • Shopifyのすべてのストアで適用されるようになった「1ページチェックアウト」ですが、Shopify Plus以外のストアはテーマ設定から「1ページ / 3ページ」の切り替えができます。お手軽ですが、テーマ切り替え時にチェックアウトレイアウトまで切り替わってしまわないよう注意が必要です。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」には他のテーマで見かけるような商品画像の読み込み中に表示されるLoading処理が付いていません。そこで、Javascriptによってcssアニメーションによるloaderを動的に追加するための設定例です。(DOMの指定方法が異なるためテーマ「Dawn」でのみ使用可能です)
    #Shopify

    Xで見る
  • Shopifyで「お客様アカウント」を有効化するとヘッダーにアカウントアイコンが表示されるようになりますが、このアカウントをログイン状態の有無に応じて切り替える方法です。アイコンを表示するスニペットファイルの中で、ログイン判定するコードを使って実装できます。
    #Shopify

    Xで見る
  • ShopifyのアプリMatrixifyのスケジュール機能を使えば、簡単にタイムセールを実行することもできます。商品の価格などを一時的に変更するCSVと元に戻すCSVの2つを用意しておき、それぞれスケジュールを設定しておくだけです。それなりの数の商品を一括で処理したいときなど重宝します。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」の検索ボックスにPC版Amazonのような、カテゴリの絞り込み機能を持たせる設定例です。コレクションページに設定できる絞り込みフィルターを使うことで、指定範囲内でのキーワード検索が実行できるようになります。
    #Shopify

    Xで見る
  • Shopifyのコレクション絞り込みフィルターは全てのページで共通です。掲載商品に該当項目がなければ自動でその項目は非表示になるので十分便利なのですが、それでもコレクションごとに特定のフィルターを敢えて非表示にしたいことがあります。メタフィールドを使った設定方法の実装例です。
    #Shopify

    Xで見る
  • Shopifyのコレクションページは、絞り込みフィルターパラメータがついていても基本的にはcanonicalでパラメータ無しURLに正規化されてしまいます。パンくずやメニューにパラメータ付きページを指定する場合、検索エンジンにindexされるようにするには少し工夫が必要です。その設定例です。
    #Shopify

    Xで見る
  • Shopifyで、商品を事前公開しつつ特定の日時になったら購入可能にするには専用アプリやメタフィールドを使うなどいくつか手段がありますが、Matrixifyのスケジュール機能を使って商品情報を直接更新するという方法もあります。その設定例です。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」のコレクションページでは、全てのバリアントが売り切れている時に「売り切れ」と表示されますが、いくつかのバリアントが在庫切れになってしまっている場合にも「一部売り切れ」として表示したいときがあります。その設定例です。
    #Shopify

    Xで見る
  • Shopifyのカート画面で購入時アンケートを取れるようにした後は、その内容をメールで通知したりスプレッドシートに自動集計することで運用時の利便性を高めることができます。その設定例です。
    https://x.com/sh_sakamoto/status/1730798450877579268
    #Shopify

    Xで見る
  • Shopifyのカート画面に設置するアンケートセクションです。注文詳細で回答内容を確認できます。(内容が内容なのでコード量が結構あります。すいません)
    ちなみにStoreHeroにはさらに高機能なアンケートアプリがありまして、より高度なアンケートを実施可能です。別途ご相談お待ちしてます。 #Shopify

    Xで見る
  • メルカリの「¥マークを小さくしたら購入率が大きく改善された」施策が注目されましたが、Shopifyで実際に通貨シンボルを価格と異なるサイズで表記したい場合の設定例です。価格は通常シンボルとセットで出力されるので、replaceを使って置き換えています。
    https://markelabo.com/n/ne9bed1488bda
    #Shopify


    スレッド

    画像に誤字がありました。失礼しました。「通過」→「通貨」です。

    Xで見る
  • Shopifyのテーマ「Dawn」はデフォルトで商品価格の表示が「¥3,000 JPY」となっているため、この「JPY」の部分は非表示にしたいというお話はよく聞きます。テーマ設定に項目があるので、そちらのチェックを外してもらえばOKです。
    #Shopify

    Xで見る
  • StoreHeroにjoinしてからの2年と5ヶ月、Shopifyを触り続けてきましたが、ECサイトをグロースさせることにおいてそのポテンシャルの高さを日々感じています。ベーシックな内容ですがグロースを意識したストア構築について量も多いので今回はBlogにまとめてみました。
    #Shopify
    https://storehero.io/ja/shopify/shopify-store-structure/

    Xで見る
  • Shopifyのテーマエディタで「カートに追加する」ボタンを非表示にした商品テンプレートを複製することで、購入開始前の事前公開状態を作成することができます。ただし、その際に、商品購入できないはずがShopifyに詳しいユーザーであれば購入できてしまう可能性があるため、注意が必要です。

    Xで見る
  • あまり使うことはありませんが、Shopifyの管理画面では商品情報と同様にコレクション数もURLにcount.jsonを付けることで確認できます。(ただし商品情報とは異なり、絞り込みまれた件数は表示されないようです)
    https://x.com/sh_sakamoto/status/1673536587806969856
    #Shopify


    スレッド

    画像貼り付け忘れました。

    Xで見る
  • Shopifyのカートメモですが、メモのタイトルは「デフォルトテーマのコンテンツを編集する」から変更できるものの、何かしらのコメントなどを追加することはできません。そこでテーマ「Dawn」に、カスタムLiquidで編集可能なカートメモの補足事項を掲載できるようにするための設定方法です。
    #Shopify

    Xで見る
  • Shopifyではストア上で顧客がログインしているかどうかで表示内容を変えるカスタマイズを行うことがありますが、購入後に送られる「注文の確認」メールでもそれに近しいことが実装できます。顧客のログイン用アカウント有無を判別して、メール本文の内容を出し分ける設定例です。
    #Shopify

    Xで見る