Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
【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
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の「特集コレクション」セクションをアプリ「Matrixify」を使ってスケジュール公開する設定例商品の季節性やキャンペーンに合わせて特集コレクションを表示したい場合、アプリ「Matrixify」を使って実現する方法です。事前に、コレクションが未公開の場合は「特集コレクション」セクションを非表示とするカスタマイズは行っておく必要があります。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」のカートページで「n個以上でx円オフ」の自動ディスカウントを設定した際にカート内の商品点数に応じてメッセージを出し分ける設定例「n個以上でx円オフ」の自動ディスカウントを使う時、Rise/Dawnテーマでカート内の商品点数によってメッセージを出し分ける設定例です。自動ディスカウントはクーポンコードの入力を必要とせず自動で割引が適用される便利な機能ですが、ディスカウントが適用される前からその割引内容をユーザーに分かりやすく伝えておくと、購入意欲を高めることができて効果的です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」で商品のメタフィールドを使ってchart.jsによる「商品レーダーチャート」を表示する設定例chart.jsを用いたレーダーチャートを「テーマエディタ上でノーコードでブロック追加できる」ようにするためのカスタマイズ方法です。chart.jsは様々なプロパティを設定でき、見た目を自由にカスタマイズできるので便利ですね。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」のコレクションページフィルター「タグによる絞り込み」でタグの指定・除外が行えるようにする設定例こちら（https://store-dojo.com/products/2024-12-10）とこちら（https://store-dojo.com/products/2024-12-12）の設定方法は除外するタグを指定するだけのものでしたが、タグのボリュームが増えてくると除外するよりも指定したタグのみを表示する方が利便性が高くなります。というわけで、テーマ「Rise/Dawn」のエディタ上で指定または除外したいタグを追加・削除・編集できるようにする方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品詳細ページで商品説明欄の高さが一定以上の場合に自動で開閉処理を追加しておく設定例商品説明が長文な商品の場合、その掲載位置によっては購入ボタンがかなり下の方に押し出されてしまい、カート追加しづらい状況が発生します。そこで、テーマ「Rise/Dawn」で説明文が一定の高さ以上になった場合に自動開閉機能を実装する方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyでアプリ「Matrixify」を使って「コンテンツ>メニュー」の一括変更が可能にMatrixifyを使えばメニューも一括編集できます。膨大なメニュー数を持つ巨大なストアでは、ステージング用にストアを複製する際に非常に手間を要しますが、この機能のおかげで一括で対応できるので大変助かっています。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn/Rise」でメタオブジェクトを使って販売元（ブランド）コレクションへのリンクを表示する設定例商品詳細ページにブランド名を表示するケースは多いのですが、そのブランド名からブランド商品一覧ページにメタオブジェクトを使って自動でリンクするようにする方法です。一度設定しておけば、新しいブランド名が追加されてもコレクションとメタオブジェクトを作成するだけでコードに手を入れる必要なく、自動でリンクされるようになります。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド