Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
2026年2月の投稿 絞り込みを解除
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」のコレクションページや特集セクションで商品ごとに指定した商品サムネイルを表示できるようにする設定例商品画面のトップ画像と、一覧画面で表示する画像を意図的に変えておきたいというリクエストをいただくことがあります。そこで、「コレクション」や「特集コレクション」などの商品一覧画面で、トップ画像以外に指定したサムネイル画像を商品ごとに表示する方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」で設置した特集コレクションで表示する商品のサムネイル表示順番号を指定できるようにする設定例トップページなどで一定数の商品をリスト表示するために使用する特集コレクションセクションで、最初の商品画像ではなく、指定した番号の商品画像を表示させる方法です。<br>一定の順番ルールで商品カラーバリエーション画像などを登録しているストアで、特定のカラーに絞って表示させる際に使用したりすることができます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」でバリアントを持たない商品が売り切れ時に「今すぐ購入」ボタンが購入できそうに見えてしまっている状態を修正する設定例テーマ「Dawn/Rise」の商品詳細ページで、バリアントが１つだけの商品が売り切れている場合、「今すぐ購入」ボタンが購入可能な状態に見えてしまっているので、これを修正する設定例です。いずれ、この不具合が解消されるかもしれないため、商品の売り切れ状態を判別しJavascriptを使って「今すぐ購入」ボタンに状態を変更しています。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の特集コレクションに「商品をまとめてカートに追加する」ボタンを追加する設定例すでにアプリで一括購入できる機能は多々提供されていますが、テーマ「Dawn/Rise」の特集コレクションを活かして、そのセクションにまとめ買いボタンを設置する方法です。おすすめされている商品をまとめて購入したいユーザーにとって、購入ステップを簡略化することができるため、コンバージョン率向上が期待できます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の特集コレクションをカルーセルスタイルで表示する際にデスクトップ画面での左右送りボタンをクリックしやすいように調整する設定例Rise/Dawnテーマで非常に使う機会の多い特集コレクションですが、「デスクトップでカルーセルを有効にする」を有効にした際に表示される、カルーセルの左右送りボタンが少々小さいため、大きく表示させたいというリクエストをいただくことがあります。そこで、デスクトップ画面でストレスなく商品を閲覧できるように、クリッカブルエリアを大きくしつつ、左右に動かせることがすぐにわかるように左右送りボタンを商品リスト上に配置する設定方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyでコレクションの絞り込みにアプリ「Search&Discovery」を使っている場合に絞り込み条件の値に「任意のラベル」を設定する方法Search & Discoveryアプリを使っている場合に、絞り込み値の表示名をより直感的なラベルに変更する方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」のヘッダーの見た目を周囲にシャドウを落としたフローティングスタイルに変更する設定例Rise/DawnテーマのヘッダーにカスタムCSSを追加するだけの手軽な設定で、印象を変えられるカスタマイズ方法です。シャドウ効果でモダンな浮遊感を演出します。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品ページ「折りたたみ可能なコンテンツ」で「最初から開いておく行」に「任意の行」を指定できるようにする設定例（その２）こちらの設定方法（https://store-dojo.com/products/2024-12-22）は、最初に開いておきたい行を”１つだけ”指定できるようにするものでしたが、今回はコンテンツ行を複数指定できるようにする設定方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品詳細画面で注文前の事前承認モーダルを表示する設定例購入いただく前に何かしら承認を取っておきたい情報を掲載したい場合に、モーダルウィンドウを表示し、「承認」が取れたら以降は表示しないようにする方法です。cart attributesを使って承認状態を保持するので、注文情報に承認済みであることの証左を残すことができます。間に１ステップ挟むことになるので、カート追加率は下がってしまいますが、それでも了承いただく必要がある時などに使うことが想定されます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
Claude Codeを使い、空いた時間でShopify アプリをゼロから本番デプロイまで作り切ってみました。今回試しに作成してみたのは「お気に入り（ウィッシュリスト）」アプリなのですが、作業を始めてからおよそ１日ほどで仕上がりました。
個人的にの「どこまで出来るかやってみた企画」のつもりだったんですが、かなりの頻度でAIと壁打ちを繰り返した結果、普通にリリースできるレベルのものが完成してしまって驚いています。
作ったのは、商品だけでなくブログ記事や固定ページもお気に入り登録できるアプリ。ゲスト状態での登録やログイン後の自動マージにも対応し、管理画面では顧客別・アイテム別の統計やタグ付けまで一通り実装しました。
技術スタックは React Router v7 + React 18、Prisma + PostgreSQL。ホスティングは http://Fly.io を使い、アクセスがない時はマシンを自動停止させて無料枠に収まるようにしています。通知システムも作成し、Webhookで在庫や価格の変動を検知して「在庫少アラート」「再入荷通知」「値下げ」をメールやShopify Flowで飛ばせるようにしています。
ただ、やってみて痛感したのは「AIはコードを爆速で書いてくれるが、プラットフォームの仕様（ドメイン知識）は人間がカバーしないと詰む」ということでした。
実際、開発中はShopify特有の罠にかなりハマりました…。
・Flowトリガーを拡張で作ったものの、カスタムアプリだと「Shopify Plus限定」で動かないことに後から気づく
・GraphQLでCustomerデータを取るには「Protected Customer Data」の申請が別途必要
・shopify app dev を実行するとアプリURLがCloudflareトンネルに書き換わり、本番URLに戻すには再インストールが必要になる（開発ストアのみの話ですが焦りました）
・i18n対応で、ストアフロント用（.json）とテーマエディタUI用（.schema.json）の仕様の違いで翻訳が反映されない
・React Router v7のflatRoutesで、ドット区切りだと詳細ページが表示されずアンダースコアでのネスト解除が必要だったまだ「AIに全部おまかせ」では完成させることができませんが、Shopifyの仕様のクセさえなどを理解し、適切に人間がディレクションしてあげれば、個人開発でも相当にリッチなアーキテクチャがたった1日で組めてしまう、正直、とんでもない時代になったと実感しました。
今回の泥臭い試行錯誤の記録は全てドキュメントに残したので、次のアプリ開発の効率はさらに上がりそうです。
#Shopify #ShpoifyApp #ClaudeCode
-
【Shopify TIPS】
ShopifyでJavascriptを使わずにCSSだけでモーダルウィンドウを実装する設定例年末年始のお知らせなど、一時的なモーダルウィンドウを追加したい際に、Javascriptを使わずにサクッとCSSだけで実装する方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品ページでバリアントごとに価格が異なる商品に対して、価格表を掲載する設定例テーマ「Dawn/Rise」の標準仕様のため異なる価格のバリアントを持つ商品は、バリアントを選択して価格を確認する必要があります。<br>予めバリアントごとの価格表を表示しておけば、お客様がストレスなく商品を選ぶことができます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
@ecom_panda Well, there are some tips for product info on Shopify store like these: https://store-dojo.com/en-us/search?q=product+info&options%5Bprefix%5D=last
Although not all of them are ways to keep product information clean. -
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品ページでバリアントピッカーがボタンタイプの場合にバッジを表示する設定例：その２こちらの方法（https://store-dojo.com/products/2024-12-23）は商品バリアント名に直接バッジを記載する方法でしたが、商品管理や受発注への影響を避けるためバリアント名自体は変更せず、バリアントピッカーにバッジを表示する方法です。運用難易度が少々上がってしまいますが、JSON形式の商品メタフィールドを使ってバッジを表示させたいバリアントを指定します。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品ページでバリアントピッカーがボタンタイプの場合にバッジを表示する設定例商品バリエーションが多いストアでは、顧客が選択に迷う可能性があります。バリアントにバッジを表示することで、商品選びの判断材料を提供できます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品ページ「折りたたみ可能なコンテンツ」で「最初から開いておく行」を「任意の行」を指定できるようにする設定例Rise/Dawnテーマお商品ページに設定できる「折りたたみコンテンツ」で最初から開いておきたい行を自由に指定できるようにする方法です。必ずしも最初の行だけを開いておきたくない場合もあるため、この設定を追加することで、ユーザーが最初に見るべき情報を指定できるようになります。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyでページ遷移時にローディングバーを表示する設定例ページ遷移時のユーザー体験を大きく改善できる、ローディングバーの実装方法です。ストア内を回遊するリンクをクリックした際に、ヘッダー部分に擬似的なローディングバーを表示します。正確に遷移先のロードを行っているわけではないのですが、リンクに反応していることをフィードバックすることで、ページ読み込み中の進捗が視覚的に分かり、ユーザーのストレス軽減します。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPSスレッド
-
マニュアル用の画像を修正したいとき、これまでは画面をキャプチャしなおしてたのですが、Nano Bananaで該当箇所を書き換えてもらうだけでいいですね。簡単。
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」のカートページで配送日時指定不可の対象商品をカート画面で確認できるようにする設定例配送日時指定ができるアプリを使用する際に、配送日時を指定できない商品が含まれている場合に、どの商品がその対象なのかを表示する設定方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
