Xポストログ

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

  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」の商品ページでバリアントピッカーがボタンタイプの場合にバッジを表示する設定例

    商品バリエーションが多いストアでは、顧客が選択に迷う可能性があります。バリアントにバッジを表示することで、商品選びの判断材料を提供できます。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-23

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」の商品ページ「折りたたみ可能なコンテンツ」で「最初から開いておく行」を「任意の行」を指定できるようにする設定例

    Rise/Dawnテーマお商品ページに設定できる「折りたたみコンテンツ」で最初から開いておきたい行を自由に指定できるようにする方法です。必ずしも最初の行だけを開いておきたくない場合もあるため、この設定を追加することで、ユーザーが最初に見るべき情報を指定できるようになります。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-22

    Xで見る
  • 【Shopify TIPS】
    Shopifyでページ遷移時にローディングバーを表示する設定例

    ページ遷移時のユーザー体験を大きく改善できる、ローディングバーの実装方法です。ストア内を回遊するリンクをクリックした際に、ヘッダー部分に擬似的なローディングバーを表示します。正確に遷移先のロードを行っているわけではないのですが、リンクに反応していることをフィードバックすることで、ページ読み込み中の進捗が視覚的に分かり、ユーザーのストレス軽減します。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-21

    Xで見る
  • マニュアル用の画像を修正したいとき、これまでは画面をキャプチャしなおしてたのですが、Nano Bananaで該当箇所を書き換えてもらうだけでいいですね。簡単。

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」のカートページで配送日時指定不可の対象商品をカート画面で確認できるようにする設定例

    配送日時指定ができるアプリを使用する際に、配送日時を指定できない商品が含まれている場合に、どの商品がその対象なのかを表示する設定方法です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-20

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」の「特集コレクション」セクションをアプリ「Matrixify」を使ってスケジュール公開する設定例

    商品の季節性やキャンペーンに合わせて特集コレクションを表示したい場合、アプリ「Matrixify」を使って実現する方法です。事前に、コレクションが未公開の場合は「特集コレクション」セクションを非表示とするカスタマイズは行っておく必要があります。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-19

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」のカートページで「n個以上でx円オフ」の自動ディスカウントを設定した際にカート内の商品点数に応じてメッセージを出し分ける設定例

    「n個以上でx円オフ」の自動ディスカウントを使う時、Rise/Dawnテーマでカート内の商品点数によってメッセージを出し分ける設定例です。自動ディスカウントはクーポンコードの入力を必要とせず自動で割引が適用される便利な機能ですが、ディスカウントが適用される前からその割引内容をユーザーに分かりやすく伝えておくと、購入意欲を高めることができて効果的です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-18

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」で商品のメタフィールドを使ってchart.jsによる「商品レーダーチャート」を表示する設定例

    chart.jsを用いたレーダーチャートを「テーマエディタ上でノーコードでブロック追加できる」ようにするためのカスタマイズ方法です。chart.jsは様々なプロパティを設定でき、見た目を自由にカスタマイズできるので便利ですね。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-17

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


    スレッド

    https://store-dojo.com/products/2024-12-16

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」の商品詳細ページで商品説明欄の高さが一定以上の場合に自動で開閉処理を追加しておく設定例

    商品説明が長文な商品の場合、その掲載位置によっては購入ボタンがかなり下の方に押し出されてしまい、カート追加しづらい状況が発生します。そこで、テーマ「Rise/Dawn」で説明文が一定の高さ以上になった場合に自動開閉機能を実装する方法です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-15

    Xで見る
  • 【Shopify TIPS】
    Shopifyでアプリ「Matrixify」を使って「コンテンツ>メニュー」の一括変更が可能に

    Matrixifyを使えばメニューも一括編集できます。膨大なメニュー数を持つ巨大なストアでは、ステージング用にストアを複製する際に非常に手間を要しますが、この機能のおかげで一括で対応できるので大変助かっています。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-14

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Dawn/Rise」でメタオブジェクトを使って販売元(ブランド)コレクションへのリンクを表示する設定例

    商品詳細ページにブランド名を表示するケースは多いのですが、そのブランド名からブランド商品一覧ページにメタオブジェクトを使って自動でリンクするようにする方法です。一度設定しておけば、新しいブランド名が追加されてもコレクションとメタオブジェクトを作成するだけでコードに手を入れる必要なく、自動でリンクされるようになります。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-13

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」のコレクションページで「タグによる絞り込み(詳細な絞り込み)」で不要なタグを非表示にする設定例:その2

    こちら(https://store-dojo.com/products/2024-12-10)の設定方法は直接コードに除外するタグを記述する方法でしたが、運用を開始するとコード編集はしたくないものですね。というわけで、テーマ「Rise/Dawn」のエディタ上で除外したいタグを随時追加・削除・編集できるようにする方法です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-12

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」の商品ページに説明書などのPDFファイルダウンロードリンクを設置する設定例

    商品の説明書など、商品に関連する資料をダウンロードできるようにする方法です。商品ページにファイルダウンロードリンクを設置することで、顧客サポートの向上や商品の理解を深めることが期待できます。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-11

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Rise/Dawn」のコレクションページで「タグによる絞り込み(詳細な絞り込み)」で不要なタグを非表示にする設定例

    ShopifyのSearch & Discoveryで絞り込み条件にタグを設定した際、スマートコレクションの条件などで使用しており、絞り込みとしては表示したくないタグを非表示にしたい場合があります。テーマ「Rise/Dawn」で、予め指定したタグを非表示にする設定方法です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-10

    Xで見る
  • 【Shopify TIPS】
    Shopifyでメタフィールドにピックアップ期間を指定して自動でピックアップされる商品を切り替える設定例

    アプリMatrixifyを使って商品ごとにメタフィールドを使って表示期間を指定することでピックアップ商品を自動で切り替える方法です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-09

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマの色(カラースキーム)で不要なスキームを削除する方法

    Shopifyのテーマ設定画面で任意に追加することができるカラースキームですが、誤って操作するなどして不要なカラーが増えてしまったときは、「テーマ編集」から「config/settings_data.json」を開き、該当の項目を削ることで削除できます。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-08

    Xで見る
  • 【Shopify TIPS】
    Shopifyのテーマ「Dawn/Rise」の商品詳細ページに表示される在庫ステータスを基準値以下で表示変更するのではなく、非表示にする設定例

    Shopifyのテーマ「Dawn/Rise」の商品テンプレート:商品情報セクションには、在庫数を表示したり一定の数量で表示が切り替わる在庫ステータスブロックがありますが、在庫数に応じて表示自体をさせないようにしてほしいというご要望をいただくことがあります。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-07

    Xで見る
  • 「Google Antigravity」でShopifyの購入テスト作成を自動化してみました。

    Shopify運用においてSidekickの活用が不可欠となってきましたが、その性能が及ばない管理画面外の周辺業務をどう効率化するかも重要です。
    特に大規模改修時の「購入パターンテスト」は、重要なんですがテストスクリプト作成が手間で、これまで結局手動でこなしがちでした。

    そこで今回、Cursorではなく、Geminiが(だけでなくClaudeも)使える自律型AIエージェントIDEのGoogle Antigravityを使ってみましたところ、Playwrightの複雑なコードを書くハードルを、AIとの対話で一気に解消できました。

    助かりポイント:
    ✅ 複雑なテストパターンの一括自動生成
    ✅ AIが自律的にブラウザを立ち上げ、ストア独自の情報を取得してテストデータ作成(何も言わなくても /collections/all を見に行ってくれる!)
    ✅ そのままPlaywrightのスクリプト調整まで完結

    今までは「手動の方が早い…」と諦めていましたが、この連携で実務導入が現実的に。
    他にも色々応用できそうです。

    #Shopify #Playwright #GoogleAntigravity

    Xで見る
  • 【Shopify TIPS】
    Shopifyで商品ページに「同じカテゴリ商品」や「同じ価格帯」など自動で設定される関連商品以外に意図的なコレクションを表示する設定例

    Shopifyのテーマに標準で実装されている「おすすめ」商品セクションも効果的なのですが、あえて手動で同じカテゴリや価格帯の商品を表示することでよりスムーズな購買体験を提供することもできます。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2024-12-06

    Xで見る