Xポストログ

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

  • ShopifyでメタフィールドもCSVを使って編集したいことがあると思います。デフォルトのエクスポート機能だとカラムが無いので操作できないのですが、そんな時もMatrixifyが便利です。フィルタをかけられるので、特定のフィールド値だけ編集することも可能です。
    https://apps.shopify.com/excel-export-import?locale=ja
    #Shopify

    Xで見る
  • Shopifyのテーマの多くは検索アイコンをタップするとその場でワード入力を促されます。
    ですが、訪問者がより簡単に目的の商品にたどり着けるようにするために、直感的なナビゲーションを提供する検索ページに直接遷移させる方法も有用です。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」では商品詳細ページが長い場合、スクロールしてくと「カートに追加」ボタンが見えなくなってしまうので少々不便です。そこでStickyボタンの設定例です。(売り切れ時のボタンラベルまで反映していますが、「追加」固定でも良いかと思います)
    https://colossal-vanadium-63c.notion.site/Dawn-f124087ea0044ec19a22d48bea7d526a
    #Shopify

    Xで見る
  • Shopifyの一覧画面で商品のバリエーション表示する設定例です。一覧画面にもバリエーション情報を表示しておくことで、訪問者が商品選択しやすくなり購入体験の向上を図ることができます。バリエーションが豊富な商品を扱うストアで効果的です。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」のスライドショーは登録件数が最大5件になっていますが、数を増やしたいケースもあるかと思います。slideshow.liquid内のschemaを修正すれば拡張できます。画像はLazy load対応されていますが、要素の増やし過ぎは画面全体が重くなりますのでご注意下さい。
    #Shopify

    Xで見る
  • Shopifyのコレクションや検索結果ページで「割引(セール)商品」を絞り込めるようにする方法です。割引価格の有無そのものを絞り込み条件として設定することはできないので、通常は「タグ」を使っています。アプリを使えば、割引価格を設定するだけで自動でタグの付与・解除もできます。
    #Shopify

    Xで見る
  • Shopifyのコレクション(商品一覧)ページですが、ヘッダーとは別に途中でバナーなどのコンテンツを差し込み表示したいというリクエストを頂くことがあります。そこで、テーマ「Dawn」を使った設定例です。
    #Shopify

    Xで見る
  • Shopify Flowはスプレッドシートにも連携できて便利ですね。
    売上確定のために発送完了日起算で集計する場合など、タグで対応するケースがあるのですが、並行してスプレッドシートに発送完了済みの注文データを送るようにしておけば、CSV加工も必要ないので集計の手間が削減できますね。
    #Shopify

    Xで見る
  • Shopifyのテーマには遷移元のコレクションに合わせて商品ページのパンくずリストを動的に設定してくれるものがあります。withinフィルタの効果なのですが、公式リファレンスにはSEOに関する注記があります。弊社もSEO対策にはこれを使わず別の方法を実装しています。
    https://shopify.dev/docs/api/liquid/filters#within
    #Shopify

    Xで見る
  • Shopifyからエクスポートした注文情報などのCSVファイルですが、そのままWindowsのExcelで読み込むと日本語部分が文字化けしてしまいます。基本的にはスプレッドシートでの作業をオススメしていますが、文字コードをShift JIS形式に変換すればExcelでも正しく読み込めるようになります。
    #Shopify

    Xで見る
  • @cuebko 早速のコメントありがとうございます!
    そうですよね。使用するアプリの要件や運用開始後の拡張性の担保を考えると、商品情報の設計に大きく関わってくる部分なので、慎重に実装したいところです。
    実際の案件ではこんな感じで翻訳したフィールドを用意して、表示を振り分けるなどしています。

    Xで見る
  • Shopifyの商品情報について、バリエーションごとに商品情報も一部切り替えて表示したいというリクエストを頂くことがあります。色々と方法は考えられますが、バリエーションメタフィールドを使った実装例です。
    https://colossal-vanadium-63c.notion.site/Dawn-HTML-OK-6affff6dad584643abdbebd028053b74
    #Shopify

    Xで見る
  • Shopifyのテーマによっては、どのバリアントを選択しているのかユーザーが把握しづらい時があります。実際は別のテーマでの実装でしたが、デフォルトテーマ「Dawn」での、選択中バリアント名を表示するための設定方法です。
    #Shopify

    Xで見る
  • Shopifyにはデフォルトでコレクションそのものを検索する機能は提供されていません。高度な検索機能が必要な場合はやはりアプリの使用がオススメですが、そこまでの機能を求めていない場合は、カスタマイズによってタイトルやハンドルを検索出来るようにすることも可能です。その設定例です。
    #Shopify

    Xで見る
  • Shopifyのサイト内検索は商品以外にブログやページも一緒に検索できますが、ブログ記事だけを検索することもできます。そこで、ブログトップに記事検索を実装した設定例です。
    (リンク先は、以前紹介した通常の検索機能からブログやページを除外する設定方法です)
    https://x.com/sh_sakamoto/status/1638752115127623685
    #Shopify


    スレッド

    すいません。設定例です、と言いつつ画像を添付し忘れてました。

    Xで見る
  • @_wolye こちらこそご質問いただきましてありがとうございました。私の方も登録時の日時は更新不可であることを見落としておりましたので良い機会になりました。
    そうですね。既存商品の入れ替えは影響も大きいので、今後追加頂く商品について、意図通りの順序になるようご登録頂くのが良いかと思います。

    Xで見る
  • @_wolye こちら調べてみましたところ、私も勘違いしておりました。失礼しました。今回シェアした「新着アイコン」の表示・非表示のためにpublished_atの日付変更は有効なのですが、新着順のソート順には無効でした。
    新着順にはcreated_atが関係しており、なおかつこのデータはread onlyのため更新不可でした。


    スレッド

    @_wolye そして、正しく新着順を反映させるためには、既存の商品情報を一旦削除し、再度登録し直していただく必要があります。(商品情報を削除してしまうと画像データも消失してしまうので、別の場所にアップしておいてCSV登録時にそちらを参照するなどしてください)

    Xで見る
  • @_wolye こちら、言葉の違いがわかりにくいですよね。日付カラムにはcreated_atとpublished_atの2種類があるんです。created_atは商品の登録日、published_atは公開日(このtweetで紹介していたのはこちら)になります。published_atの日付を書き換えてみていただけますか。

    Xで見る
  • Shopifyのコレクションページに商品登録後の一定期間、自動で「新着」アイコンを表示する方法を紹介しましたが、あちらに連動して商品詳細ページにも同様の機能を持たせたい場合の設定方法です。
    https://x.com/sh_sakamoto/status/1655088807207907328
    #Shopify

    Xで見る
  • ECのチャネルとして重要なとても重要なInstagramですが、自社の運用体制や提供できるコンテンツを鑑みて、適切に顧客とのエンゲージメントを育てていく必要があります。StoreHeroで提供させていただいている運用設計方法についての解説記事です。
    https://storehero.io/ja/shopify/instagram-operation/
    #Instagram

    Xで見る