Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
【Shopify TIPS】
Shopifyでバリアントメタフィールドに設定された値をバリアント選択に応じて表示切替するための設定例Shopifyの商品詳細ページで、バリアントメタフィールドを使って商品バリエーションごとに掲載情報を切り替えたい場合がありますが、javascriptとliquidを組み合わせた設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
ShopifyでShopify UI Elements Generatorで生成したLine item propertyをカスタマイズされたLiquidで設置した際、カートに情報が入らない場合の対応方法Shopifyテーマカスタマイズの三種の神器として紹介されているLine Item Propertyですが、専用のジェネレーターで生成したコードがそのまま使えない時があります。その対応方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
ShopifyでShopify Flowを使って対象商品の購入数と同じ数だけ追加で商品を付与する設定例Shopifyで特定の商品が購入された際に、その対象商品の購入点数と同じ数分だけ商品を追加する処理をFlowで実装する場合の設定例です。商品追加アクションのQuantitiyに設定するliquidは空白を挟むとエラーになるのでコードを連続で記述する必要があります。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」の関連商品に特定の商品が表示されないようにする設定例（掲載除外対象品はコレクションで指定可能）Shopifyの商品詳細にデフォルトで表示されている「関連商品」セクションですが、ショッパー（紙袋）などレコメンドしたくない商品も掲載されてしまうことがあります。対象の商品をまとめて除外対象に指定できるようにする設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」の注文詳細画面に注文した商品のサムネイルを表示する設定例Shopifyの注文詳細画面で、購入商品ごとに商品画像のサムネイルを表示する設定例です。現在は販売を終了してしまっている商品の画像も表示されます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」の注文詳細画面に「再注文」ボタンを表示する設定例Shopifyの注文詳細画面の商品ごとに「再注文」ボタンを表示する設定例です。商品詳細画面に遷移しなくても直接カートに追加できるようになるので、購入頻度の高い商材を扱っているストアほど利便性を高めることができます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyでアプリ「Matrixify」を使ってスケジュールした日に商品を非公開化する設定例Shopifyの商品情報は管理画面で公開予定日を設定して所定の日時になったら表示することができますが、取り下げの日時を設定することはできません。そんな時はMatrixifyを使って商品を下書き状態にする日時をスケジュール設定しておくと簡単に設定できて良いですね。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のハンバーガー（ドロワー）メニュー内のメニュー前後にカスタムLiquidブロックとしてコンテンツを挿入できるようにする設定例Shopifyのテーマ「Dawn」のモバイル用ハンバーガーメニューのメニューリスト前後に任意のHTMLを表示できるようにするにあたって、ブロック要素としてより管理しやすくした場合の設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のヘッダーにカスタマイズされたLiquidセクションを追加して モバイル用ハンバーガーメニューにメニューリスト以外の項目を表示する設定例Shopifyのテーマ「Dawn」のモバイル用ハンバーガーメニューで、メニューリストの前後に任意のHTMLを表示できるようにした際の具体的な表示内容の設定例です。ログインボタンやサブメニューなどが一般的です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のモバイル用ハンバーガーメニューで メニューリスト下のスペースに任意のHTMLを表示する設定例Shopifyのテーマ「Dawn」のモバイル用ハンバーガーメニューですが、メニューリスト下のスペースに何かしら表示しようと思っても追加可能なブロック要素などがありません。そこで、カスタマイズされたLiquidセクションとJavascriptを使って任意のHTMLを表示するための設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
「GTM入ってるのにプレビューに出てこない…？？？」
2025年8月28日までに対応が必要な、Shopifyのサンキューページおよび注文状況ページの仕様変更。それに向けてカスタムピクセルへの移行を進めていたところ、思わぬ落とし穴にハマりました。Shopifyのカスタムピクセルは、sandbox化されたiframe内で実行される仕組み。そのため、window.dataLayerは親ページとは別スコープで管理され、完全に別物として扱われるようです。そのためピクセル内でgtm.jsを読み込んでも、それはストア本体で読み込まれるGTMとは繋がっておらず、GTMのプレビューモードではイベントの発火を検知できないようでして（検知できるようにしてもらえるとありがたいのですが）。
仕方なく、GTM側のタグにデバッグ用のconsole.logを仕込んで、ひとつずつ動作を確認するという地道な作業をしています…。#Shopify #ShopifyTips #GTM #カスタムピクセル
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のコレクションページから商品ページに遷移した際 元のコレクション内での位置に基づいて前後の商品リンクを表示する設定例Shopifyのテーマ「Dawn」のコレクションページから商品詳細ページに移動した際、その表示順に合わせて前後の商品リンクを設置する設定例です。都度コレクションに戻らなくても連続して閲覧してもらうことができます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のカート画面で「ご購入手続きへ」のボタンの直前に項目開閉型のFAQ項を表示する設定例Shopifyのテーマ「Dawn」で、カート画面の「ご購入手続きへ」ボタンの前に「よくある質問」のリストを表示したい場合の設定例です。しっかりと購入を促せるように、購入直前の迷いを解消できるような内容を掲載します。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」で告知バーをヘッダーと一緒に固定表示する設定例Shopifyのテーマ「Dawn」でヘッダーを固定表示する場合、メニューやロゴ、カートなどが含まれる部分だけが固定されます。とはいえ可能であれば告知バーも常に表示されるようにしたいところです。直接コード編集せず、テーマエディタでJavaScriptを使った簡易な設定方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のコレクションページでメイン以外の商品写真をサムネイル表示する設定例Shopifyのテーマ「Dawn」のコレクションページで、メインの写真以外に登録されている商品写真から２〜5件の写真をサムネイルとして一緒に表示することができる設定例です。コレクションページ上で商品を選びやすくなる効果が期待できます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のキーワード検索ウィンドウに 検索フォーム以外のコンテンツを表示する設定例Shopifyのテーマ「Dawn」のヘッダーから呼び出す検索ウィンドウですが、検索フォーム以外のコンテンツも表示させたいケースがあります。直接コード編集はせずにテーマエディタのカスタムLiquidを使って簡易カスタマイズする場合の設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyの商品管理画面で既存のフィルターでは絞り込めないときは絞り込みたい条件で自動コレクションを作成し、そのコレクションで絞り込む商品管理画面だけではうまく絞り込めないときは、自動コレクションに条件を設定してフィルターの代わりに使うのも一つの方法です。管理用にだけ使うなら、非公開設定にしておくとsitemap.xmlに載らず安心です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
Shopifyの新テーマ「Horizon」を使って、「Block生成AI」と「Cursor + Claude」の開発体験を比較してみています。
Block AIは、UI付きのコードが瞬時に生成されるという驚きの手軽さ。
一方で、Cursor + Claudeは生成後も対話しながら調整できるため、細かな仕様や挙動の詰めにも柔軟に対応できる印象です。（テーマ全体の構造をAIが把握できているので、既存機能を踏襲するような指示ができるのも大きなメリットです）まだ一概にどちらが優れているとは言えませんが、少なくとも「Block生成AI」もテーマ構造を把握した上でコード生成してくれるようになるまでは、最終的にストア運用まで責任を持つ立場としては、具体的な指示を重ねながら挙動をしっかりFIXしていけるCursor + Claudeのような環境で開発することになりそうです。
#Shopify #BlockAI #Cursor #Claude #AI開発
-
【Shopify TIPS】
Shopifyでリスト型のメタフィールドの配列数は.sizeではなく、.countで取得するShopifyのリスト型メタフィールドを扱う際、Liquidコードでその格納数を都度取得したいことがあります。その際、通常の配列型オブジェクトで有効な「.size」プロパティではなく「.count」プロパティを使います。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで独自タグを使って商品の再入荷情報を管理する際に「再入荷」商品だけを集めたコレクションを設定する方法https://store-dojo.com/products/2024-03-04のShopifyの再入荷通知を商品詳細画面に掲載する方法を設定した際に、それらの商品を集めたコレクションを用意しておくのも良いですね。Flowの一部を修正して、再入荷タグを持つ商品を表示するコレクションを作成すれば対応可能です。また、https://store-dojo.com/products/2024-03-05の再入荷通知を解除する設定を併用することで、再入荷した商品が再び売り切れになった場合はコレクションからも自動的に削除されます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド