Xポストログ

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

  • Shopify Flowの条件設定で「英数字から始まる」「数字が含まれない」などのパターンを判別したいケースがあるのですが、その際に正規表現は使えないので全て設定しないといけないとのことでした。少々面倒ですね。
    #Shopify #Shopifyflow
    https://community.shopify.com/c/shopify-flow-app/missing-number-in-address/m-p/1859113#M1203

    Xで見る
  • Shopifyで、xmlとは別に画面表示用のサイトマップを表示するための設定例です。公開中の全URLを表示します。
    最近はサイトマップを掲載するサイトは少ないですし、自分達も普段は弊社が立ち上げたものではないストアの改修依頼を受けた際など、ストアの全体像を把握するために使っています。
    #Shopify

    Xで見る
  • 今年中にShopifyの1ページチェックアウト画面がリリースされるようです。
    送付先情報入力→配送料確認→決済情報入力の3ステップはやはり長すぎてCVRを下げる要因でしたので、リリースが待ち遠しいですね。
    #Shopify
    https://www.shopify.com/editions/winter2023#one-page-checkout

    Xで見る
  • Shopifyの「ファイル」機能、新メニュー「コンテンツ」に移ってアクセスしやすくなりましたね。
    ちなみに個人的にはこの画面で一つひとつファイルを確認するよりも、一括でダウンロードしたり別ウィンドウで開きたい事の方が多いので、独自Viewerのブックマークレットを作るなどしています。
    #Shopify

    Xで見る
  • @aile4624 そうですね。Dawnで設定された上でヘッダーのHTMLなど変更されてないようでしたら、ここを加えていただくと非表示にできます。

    Xで見る
  • ストア分析のためのヒートマップツールは色々とありますが、Shopifyで実際に使えるものとしてはこのようなものがあります。
    - Lucky Orange:https://apps.shopify.com/lucky-orange?locale=ja
    - Clality:https://clarity.microsoft.com/
    - hotjar:https://www.hotjar.com/
    #Shopify

    Xで見る
  • Shopifyには全商品表示用のコレクション「collections/all」が最初から用意されているんですが、文字通り全ての商品を自動で表示する上に管理画面からは操作することができません。
    そこでallコレクションを独自に作成することで、掲載対象商品や表示順をコントロールできるようになります。
    #shopify

    Xで見る
  • Shopifyのプレビュー機能で、下書き状態の商品やページ、ブログ記事を控えのテーマで確認する方法です。
    この方法がわからず、毎回一時的に公開していたのですがパートナーさんに教えて頂きました。ありがとうございます!下書き状態のまま確認できるのはありがたいですね。
    #Shopify

    Xで見る
  • Shopifyのブログ記事メタフィールドを使って商品ページとブログ記事に相互リンクを設定する方法です。テンプレートのカスタマイズが必要になりますがカスタムLiquidで埋め込むことができます。商品情報が下書きや削除で非掲載になるとリンクも消えるので、メンテナンスもしやすいです。
    #Shopify

    Xで見る
  • 先日ツイートした内容の補足です。テーマ「Dawn」に限った内容ですが、スマートフォンでもヘッダーのテキストメニューを表示可能にするCSSコードの改修例です。添付画像にも注記していますが他のテーマでは実装方法が異なりますのでご注意ください。
    https://x.com/sh_sakamoto/status/1619204287309180929
    #Shopify

    Xで見る
  • ShopifyのLiquidコードでURLパラメーターを取得する方法です。別の投稿でもチラッと触れましたが、page.urlではパラメータより前までしか取得できなかったので、この方法を参考にさせていただいて実装しています。
    https://fullmetalworkshop.com/developer-blog/get-the-shopify-url-parameters-in-liquid-code/
    #Shopify #liquid

    Xで見る
  • Shopifyで、商品の予約公開ではなく指定日まで購入できない形で事前公開したいリクエストを頂くことがあります。そのためのアプリもあるのですが、運用中に様々な事情で細かい対応が発生するケースが多いこともあり、前提条件付きですがメタフィールドを用いて独自に実装したりもします。
    #Shopify

    Xで見る
  • @ryu_techgeek あ、そうですね。複数のテンプレートを持つページタイプでは全てが対象にしてしまうので、おっしゃる通りです。
    正しく「テンプレートごとに」挙動を分けたい時は、templateオブジェクトで判別頂く方が良いですね。ありがとうございます。

    Xで見る
  • ShopifyではLiquidを使って特定のテンプレートごとに処理を振り分けたい時があります。そんな時は http://request.page_type タグを使って判別するのですが、判別可能なページ種別一覧がこちらになります。
    https://shopify.dev/api/liquid/objects/request?shpxid=0bd161f6-C14F-4F29-077F-2788E509F749#request-page_type
    #Shopify

    Xで見る
  • 来訪する見込み顧客の方が具体的に何を探しているかを知るためにもGoogle Analyticsを使ってShopifyのサイト内検索はトラッキングしておいた方が良いのですが、加えてその結果を元に検索結果0件時の離脱対策に活用するのも手ですね。
    #Shopify

    Xで見る
  • Shopifyのブログ記事は前後にリンクを設定してくれる形が標準なのですが、こちらのアプリで関連記事リンクが表示できるようになります。タグや作者、内容で動的に関連づけられますが、HTMLコードを生成してくれるのでSEO観点でも有用です。しかも無料。
    https://apps.shopify.com/related-blog-posts?locale=ja
    #Shopify

    Xで見る
  • Shopifyのカート画面でそこまで気になるわけでは無いのですが、小計のところの通貨表示が不要なので非表示にしたいというリクエストをいただくことがあります。
    LiquidのMoney filter を変更することで対応できます。
    #Shopify

    Xで見る
  • Shopifyのストアで提供されているテーマですが、PCで表示されるテキストメニューはスマホ画面ではほぼ全てドロワーメニューになります。
    そこで添付画像はテーマ「Dawn」の設定例ですが、ストア内の回遊性を高めるために常時テキストメニューが表示されるよう設定しておくのもオススメです。
    #Shopify

    補足)
    実装コード例
    https://x.com/sh_sakamoto/status/1621727783440498694

    Xで見る
  • 便利なアプリが揃っているShopifyですがアプリの併用時は注意が必要です。添付画像は割引アプリが注文時のオプション機能を阻害してしまうケースですが、想定外の挙動を引き起こす可能性があります。インストールして動いたからOKではなくしっかりと動作検証することをオススメします。
    #Shopify

    Xで見る
  • Shopifyで「購入時の会員登録を必須」とした場合、未ログイン時はカート画面から先に遷移しようとするとログイン画面に飛ばされるようになります。
    突発的なログイン画面はカゴ落ち率を高めてしまうCV阻害要因なので、カート経由時には案内表示するなどの対策は取っておきたいところです。
    #Shopify

    Xで見る