Xポストログ

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

  • 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で見る
  • Shopifyの標準機能では商品の公開日を即時公開もしくはスケジュール指定した日時のみ設定でき、過去の日付に変更する事はできません。前回紹介した新着アイコン表示機能を有効活用するには公開日を任意で指定したい所ですが、そんな時はMatrixifyがオススメです。
    https://x.com/sh_sakamoto/status/1655088807207907328
    #Shopify


    スレッド

    すいません。画像の赤枠の位置がズレてました。再アップします。
    ちなみに、Matrixifyの良いところは、標準のCSVと異なり、商品またはバリアントIDをキーにして編集したいカラムだけを差分更新できるところですね。先祖返りなどデータ破損を引き起こさなくてすみます。

    Xで見る
  • Shopifyの商品一覧に「新着」アイコンを表示させたい場合、「商品タグ」を使って管理する事が多いのですが、取扱点数が多いストアでは商品の公開日を使って自動で制御するケースもあります。その際、直接コードにロジックを書いても良いのですが、テーマ設定で管理する場合の設定例です。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」のカート画面にある「買い物を続ける」ボタンのリンク先ですが、デフォルトでは商品一覧に固定されています。一度指定してまえばほぼ変更する事も無いので直接Liquidを編集して良いのですが、テーマエディタを利用して簡単に変更できるようにした場合の設定例です。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」は「ページ」そのものをページ内セクションとして表示させることができます。そこで、フッターに設置されることが多いFAQをカートページにも組み込んでおくことで、購入前のユーザーの疑問や不安を取り除いて決済手続きへと促す効果が期待できます。
    #Shopify

    Xで見る
  • Liquidに関するマニアックな話を一つ。Shopifyのテーマを編集していると、liquidコードのデリミタが{% %}と{%- -%}のどちらでも動くことに気づくかと思います。両者の違いはコードの前後の空白を削除するかどうか、にあります。
    Shopify

    Xで見る
  • Shopifyの会員登録とログインフォームは、通常submitした後はマイページに遷移するだけですが、それぞれ任意の遷移先に変更することができます。
    フォームタグの直後にhidden項目で遷移先のURLを指定するだけで実装できます。新規会員登録直後の案内ページを充実しておくのも良いですね。
    #Shopify

    Xで見る
  • Shopifyのテーマでヘッダーやフッターにセクションが追加できるようになりましたが、「ページのトップに戻る」ボタンを追加するのも良いですね。(チャットやメルマガフォームなど、他にもモーダルが表示される場合は、位置設定に気をつける必要があります)
    #Shopify

    Xで見る
  • Shopifyのメタフィールドを使って、ブログ記事にページ内リンクを設置する方法です。
    HTML編集モードで本文中に直接コードを書いても良いのですが、レイアウトが崩れたりなど何気に運用負荷が高いので、別手順化しておくと更新が楽です。(コードサンプル付)
    #Shopify
    https://colossal-vanadium-63c.notion.site/Dawn-9a5600e6fee04af586d3e6ba0007d39e


    スレッド

    スマホだとnotionの内容が見づらかったので、先ほどの投稿にはり忘れていた画像をこちらにアップしておきます。

    Xで見る