Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
【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
スレッド
-
【Shopify TIPS】
Shopifyで独自タグを使って再入荷したバリエーションを商品詳細ページに表示する際に 再び売り切れた商品ではそれらを非表示にする方法https://store-dojo.com/products/2024-03-04の方法を使ってShopifyで再入荷したバリアントを商品詳細画面で案内する際、再び在庫切れとなってしまった場合は通知の対象からは外した方が良いでしょう。そこで「out of stock」のトリガーを使って対象のタグを自動で削除するFlowの設定方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopify Flowの「Product variant back in stock」を使って再入荷したバリエーションを商品詳細ページに表示する設定例Shopifyでは商品の在庫が復活した（Back in stock）際に、通知を送るように実装することがよくありますが、これを商品詳細画面でも通知する設定方法です。再入荷したバリアントを独自タグで付与することで、そのタグを判別して再入荷メッセージを表示します。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで商品情報のステータスを「下書き」から「公開中」にしたのに画面に表示されない時は「公開する」設定の販売チャネル状況を確認するShopifyで商品を「下書き」から「公開中」に変更したのに商品が表示されません、という問い合わせを受けることが結構あります。そんな時は「販売チャネル」の設定を確認すると良いですね。ここが外れていることが原因の時が多いです。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPShttps://store-dojo.com/products/2024-03-02
-
【Shopify TIPS】
Shopifyのアプリ「SA Variant Image Automator」を使えばバリエーションごとに複数の画像を切り替え可能バリエーションごとに画像をセットで切り替える機能を持ったアプリとしては「StarApps Variant Image」があります。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のヘッダーセクション「告知バー」の表示先を細かく指定できるようにする設定例前回の「Shopifyのテーマ「Dawn」の「告知バー」をホームページのみ表示するカスタマイズ」を拡張する形で、テンプレートごとに細かく表示制御できるようにした設定例です。商品やコレクションなど特定のテンプレートでは「非表示対象のhandleを指定」することも可能です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」でホームページにだけヘッダーの「告知バー」を表示しそれ以外のページでは非表示にする設定例Shopifyのテーマ「Dawn」はのヘッダーにある告知バーをホームページだけ表示するように設定するための設定例です。CSSでホームページ以外を非表示にする方法がシンプルですが、セクションに設定項目を設置する形で対応しています。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopify Flowを使って特定の商品の購入回数を顧客タグに記録する設定とセットでキャンセルされたらその分、顧客タグの購入数をマイナスする設定例前回の「Shopify Flowを使って特定の商品の購入回数を顧客タグに記録する設定」に関連して、対象の注文がキャンセルになった場合、タグの購入数も減数しておきたいので、そのためのShopify Flowです。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopify Flowを使って特定の商品の購入回数を顧客タグに記録する設定例Shopify FlowのAdd Tagアクションは直接的なタグ名だけでなく、Liquidコードを使った動的内容を設定することができます。そこで、特定商品の購入数を顧客ごとにカウントする顧客タグを付与する設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで注文完了後のディスカウント適用が便利Shopifyで注文完了後にクーポン適用できないのかどうかについては何度かお問い合わせを頂いた事があるのですが、「注文後のディスカウント適用」機能が実装されて対応できるようになったので助かりますね。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
かしこまりました。ご参考までにこちらが検証サンプルになります。
プロンプトはシンプルでそれぞれ以下の通りです。
「別の商品とバンドルさせてカート追加できるブロックを作成して」
「メタフィールド「product.metafields.custom.bundles」の中身を表示するブロックを作って」※メタフィールドはバンドル用商品を登録できる「単一（product.metafields.custom.bundle-item）」、「リスト（product.metafields.custom.bundles）」の２種類を作成しています。
-
すいません！
この件、改めて検証してみたのですが、大丈夫そうでした。先ほど参加されていた皆様には誤った情報をお伝えしてすいません。昨日、検証していた時点ではうまく動いてなかったのですが、今し方検証した内容ではどちらのパターンでもメタフィールドの値を参照できました。
・メタフィールドキー名を直接指定してバックエンドで読み込ませて表示させる
・商品を指定できるようにして動的リソースにメタフィールドを指定する
