Xポストログ

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

  • Shopifyで現在表示中のページURL(pathname)をJavascriptではなくLiquidで取得する方法を探していたところ、簡潔な方法を紹介している方がいらっしゃいました。実際に検証してみたところ問題なく取得できてました。便利ですね。
    #Shopify
    https://joepichardo.com/blogs/shopify/get-current-url-of-any-page

    Xで見る
  • Shopifyテーマは購入せずにお試しできますが、一つひとつ設定するのは少々手間です。
    そこで独自デザインを行わない予定のマーチャント様には予めFigma上に候補テーマを用意しておき、掲載予定の商品やイメージ写真を一括で差し替えて実機プレビューして頂くなどしています。
    #Shopify #Figma

    Xで見る
  • Shopifyのテーマには各ページに掲載できるセクションやブロック要素に上限がありますよね。添付はPrestigeテーマのFAQページ例ですが、過去の事例では結構な頻度で上限値に引っかかるケースが多かったので、最近は最初からHTMLブロックを追加して拡張性を担保するようにしています。
    #shopify

    Xで見る
  • Shopifyで配送先住所の変更など顧客側で行えるようにするためのアプリ「Orderify」ですが、「注文の編集」=「キャンセルして同じ内容で再注文」という仕組みのため、クーポンが自動で再適用されなかったりするので注意して運用する必要があります。
    #Shopify
    https://apps.shopify.com/orderify?locale=ja

    Xで見る
  • 管理画面の「オンラインストア>各種設定」で設定できる「ホームページタイトル」ですが、トップページ用の項目です。
    テーマの構造にもよりますが、例えば「Dawn」で他のページにもトップと同じ名前を付記したい場合「設定>ストアの詳細」から「ストア名」を編集する必要があります。
    #Shopify

    Xで見る
  • Shopifyのテーマで複数の画面から呼び出されるスニペットファイルなんですが、どの画面に影響があるか把握しやすいよう、初めて修正かける際はVSCodeで呼び出し元を検索した結果をそのままコードの冒頭に貼り付けたりしています。
    #Shopify

    Xで見る
  • Shopifyには非常に多くのアプリがありますが、実装・運用実績や動作検証したものを中心にNotionで独自のデータベースを作ってリスト化しています。そして、ストア構築時には要件定義した内容に基づいて採用可否判断を行い、その場で月額費用などが見積もれるようにしています。
    #Shopify #Notion

    Xで見る
  • Shopify Flowの条件指定に正規表現が使えないという件で実例を一つ。
    例えば注文データの不備は注文直後に検知できた方が注文者に連絡が取りやすく助かります。そこで「住所に番地等が無い」といった際、自動でタグ付けorメール通知されるよう設定しておくと便利ですが、その設定例です。
    #Shopify

    Xで見る
  • 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で見る