Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
2025年1月の投稿 絞り込みを解除
-
【Shopify TIPS】
テーマ「Dawn」のカートページにコンテンツ（セクション）を追加した際にカートが空の時のみ表示し、商品がある場合は表示させない方法そこまで効果があるわけでは無いのですが、Allbirdsのように中身が空のカートページに商品やコレクションへの導線を表示しておくのも良いですね。 中身に応じて表示・非表示されるようにしつつ、空にした瞬間も画面を更新せずに表示されるようにした設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPSスレッド
https://store-dojo.com/products/2023-05-26
-
【Shopify TIPS】
Shopifyのドメインが「〜.myshopify.com」の場合、Google Search Consoleでsitemap.xmlを送信しても取得してもらえないようです。（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPSスレッド
Shopifyのドメインが「〜.myshopify.com」の場合、Google Search Consoleでsitemap.xmlを送信しても取得してもらえない
https://store-dojo.com/products/2023-05-25 -
【Shopify TIPS】
メタフィールドもCSVで編集可能「Matrixify」ShopifyでメタフィールドもCSVを使って編集したいことがあると思います。デフォルトのエクスポート機能だとカラムが無いので操作できないのですが、そんな時もMatrixifyが便利です。フィルタをかけられるので、特定のフィールド値だけ編集することも可能です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
テーマ「Dawn」の商品詳細ページでページのスクロール位置に応じて固定表示されるカート追加ボタンを表示する方法
https://store-dojo.com/products/2023-05-21Shopifyのテーマ「Dawn」では商品詳細ページが長い場合、スクロールしてくと「カートに追加」ボタンが見えなくなってしまうので少々不便です。そこでStickyボタンの設定例です。（売り切れ時のボタンラベルまで反映していますが、「追加」固定でも良いかと思います）
スレッド
デフォルトの「検索モーダル」は表示させずに様々な切り口の導線を設置した検索ページに直接遷移させる
https://store-dojo.com/products/2023-05-22Shopifyのテーマの多くは検索アイコンをタップするとその場でワード入力を促されます。 ですが、訪問者がより簡単に目的の商品にたどり着けるようにするために、直感的なナビゲーションを提供する検索ページに直接遷移させる方法も有用です。
-
【Shopify TIPS】
Shopify TIPSに本日4つの新しい情報を追加しました。
---------------------
・テーマ「Dawn」のスライドショーに設定できる最大枚数を変更する方法（最大50件まで）
・テーマ「Dawn」のコレクションページに商品バリエーションを表示する
・テーマ「Dawn」の商品詳細ページでページのスクロール位置に応じて固定表示されるカート追加ボタンを表示する方法
・デフォルトの「検索モーダル」は表示させずに様々な切り口の導線を設置した検索ページに直接遷移させる
※各コンテンツへのリンクはスレッドに掲載しています。
-
テーマ「Dawn」でコレクションページの途中にコンテンツを表示する方法
https://store-dojo.com/products/2023-05-17Shopifyのコレクション（商品一覧）ページですが、ヘッダーとは別に途中でバナーなどのコンテンツを差し込み表示したいというリクエストを頂くことがあります。そこで、テーマ「Dawn」を使った設定例です。
スレッド
コレクションや検索結果ページで「セール(割引価格を設定した)商品」を絞り込めるようにする方法
https://store-dojo.com/products/2023-05-18Shopifyのコレクションや検索結果ページで「割引（セール）商品」を絞り込めるようにする方法です。割引価格の有無そのものを絞り込み条件として設定することはできないので、通常は「タグ」を使っています。アプリを使えば、割引価格を設定するだけで自動でタグの付与・解除もできます。
-
【Shopify TIPS】
本日の新規追加のTIPS４件です。
---------------------
・URL Filtersの「within」フィルタを使う際はSEOの観点で注意が必要
・Shopify Flowはスプレッドシートにも連携できて便利
・テーマ「Dawn」でコレクションページの途中にコンテンツを表示する方法
・コレクションや検索結果ページで「セール(割引価格を設定した)商品」を絞り込めるようにする方法
※各コンテンツへのリンクはスレッドに掲載しています。
-
テーマ「Dawn」でバリアントごとに設定したコメント(HTMLタグもOK)を表示する方法
https://store-dojo.com/products/2023-05-13Shopifyの商品情報について、バリエーションごとに商品情報も一部切り替えて表示したいというリクエストを頂くことがあります。色々と方法は考えられますが、バリエーションメタフィールドを使った実装例です。
スレッド
ShopifyからエクスポートしたCSVが文字化けしてしまう時の対処方法
https://store-dojo.com/products/2023-05-14Shopifyからエクスポートした注文情報などのCSVファイルですが、そのままWindowsのExcelで読み込むと日本語部分が文字化けしてしまいます。基本的にはスプレッドシートでの作業をオススメしていますが、文字コードをShift JIS形式に変換すればExcelでも正しく読み込めるようになります。
-
【Shopify TIPS】
本日の新規追加のTIPS４件です。
---------------------
・テーマ「Dawn」でコレクション検索を実装する方法
・テーマ「Dawn」でバリエーションピッカーがボタンタイプの時に「選択中バリアントを明示」する設定例
・テーマ「Dawn」でバリアントごとに設定したコメント(HTMLタグもOK)を表示する方法
・ShopifyからエクスポートしたCSVが文字化けしてしまう時の対処方法
※各コンテンツへのリンクはスレッドに掲載しています。
-
テーマ「Dawn」で「商品カード（デフォルトコレクション、特集コレクション）」に商品公開後の一定期間、自動で「新着アイコン」を表示する設定例
https://store-dojo.com/products/2023-05-07Shopifyの商品一覧に「新着」アイコンを表示させたい場合、「商品タグ」を使って管理する事が多いのですが、取扱点数が多いストアでは商品の公開日を使って自動で制御するケースもあります。その際、直接コードにロジックを書いても良いのですが、テーマ設定で管理する場合の設定例です。
スレッド
テーマ「Dawn」の商品詳細に商品公開後の一定期間、自動で「新着アイコン」を表示する設定例
https://store-dojo.com/products/2023-05-09Shopifyのコレクションページに商品登録後の一定期間、自動で「新着」アイコンを表示する方法を紹介しましたが、あちらに連動して商品詳細ページにも同様の機能を持たせたい場合の設定方法です。
-
【Shopify TIPS】
本日の新規追加のTIPS４件です。
---------------------
・カート画面にFAQを表示し、ユーザーの購入時の疑問や不安を解消
・ テーマ「Dawn」でテーマエディタから「買い物を続ける」ボタンのリンク先を変更できるようにする方法
・ テーマ「Dawn」で「商品カード（デフォルトコレクション、特集コレクション）」に商品公開後の一定期間、自動で「新着アイコン」を表示する設定例
・ テーマ「Dawn」の商品詳細に商品公開後の一定期間、自動で「新着アイコン」を表示する設定例
※各コンテンツへのリンクはスレッドに掲載しています。
-
会員登録＆ログインフォームでSubmit後の遷移先を指定する方法
https://store-dojo.com/products/2023-05-03Shopifyの会員登録とログインフォームは、通常submitした後はマイページに遷移するだけですが、それぞれ任意の遷移先に変更することができます。 フォームタグの直後にhidden項目で遷移先のURLを指定するだけで実装できます。新規会員登録直後の案内ページを充実しておくのも良いですね。
スレッド
Liquidの {% %} と {%- -%} の違い
https://store-dojo.com/products/2023-05-04Shopifyのテーマを編集していると、liquidコードのデリミタが{% %}と{%- -%}のどちらでも動くことに気づくかと思います。両者の違いはコードの前後の空白を削除するかどうか、にあります。
-
【Shopify TIPS】
（新規TIPSもまだまだありますが、当面の間、STORE DOJOに過去の投稿を掲載することに注力することにいたしました。）今回新たに追加したのはこちらの４件になります。
---------------------
・テーマ「Dawn」で、メタフィールドを使ってブログのページ内リンクを設定する方法
・フッターに「ページのトップに戻る」ボタンを追加する方法
・会員登録＆ログインフォームでSubmit後の遷移先を指定する方法
・Liquidの {% %} と {%- -%} の違い
※各コンテンツへのリンクはスレッドに掲載しています。
スレッド
テーマ「Dawn」で、メタフィールドを使ってブログのページ内リンクを設定する方法
https://store-dojo.com/products/2023-05-01Shopifyのメタフィールドを使って、ブログ記事にページ内リンクを設置する方法です。 HTML編集モードで本文中に直接コードを書いても良いのですが、レイアウトが崩れたりなど何気に運用負荷が高いので、別手順化しておくと更新が楽です。
-
【Shopify TIPS】
商品名の改行位置を画面ごとに最適化する方法ページのレイアウトの違いもありコレクションページと商品詳細ページでは、商品名の改行位置をそれぞれ指定したいケースがあります。
コレクションページと商品詳細ページで商品名の改行位置をそれぞれメタフィールドで指定できるようにする方法です。◆実装のメリット
・商品名の視認性が向上
・ページごとのデザインの一貫性を保てる
・商品情報をより見やすく表示できる◆具体的な手順
①メタフィールドの設定
・コレクションページ用と商品詳細ページ用、それぞれに商品名表示用のメタフィールドを作成。
②テンプレートファイルの編集
・「snippets/card-product.liquid」を編集してコレクションページの表示を設定
・「sections/main-product.liquid」で商品詳細ページの表示を設定
-
【Shopify TIPS】
カート内商品の問い合わせをスムーズにカートページの商品ごとに、フォームへ商品名が自動入力される問い合わせリンクを設置する設定例です。
コンバージョンまでの導線はシンプルに保つことが理想的ですが、高額商品や専門性の高い商品の場合、お問い合わせステップを設けることで、かえって顧客の安心感を高め、購入の決断を後押しすることがあります。
顧客の手間を最小限に抑えながら、スムーズなコミュニケーションを実現するために、カート内商品の問い合わせをスムーズにする方法です。◆実装のメリット
・お客様の問い合わせ作業が簡略化され、離脱率の低下が期待できます。
・ストア側も商品の特定がしやすく、スムーズな対応が可能です。◆具体的な実装手順
メインカートページの設定
・「sections/main-cart-items.liquid」にコードを挿入
・商品情報を自動取得する処理を追加
問い合わせページの設定
・お問い合わせページテンプレートに専用のカスタムLiquidセクションを追加
・自動入力用のパラメータ処理コードを実装◆実装時のポイント
商品のURLも自動挿入しておくことで、より正確な商品の特定が可能になり、スムーズなカスタマーサポートを実現できます。
-
【お知らせ】
Shopify開発TIPSサイト「STORE DOJO」をオープンしました。仕事始めにあたり、あらためましてあけましておめでとうございます。本年もよろしくお願いいたします。
2022年9月より、Shopifyに関するTIPSをX（旧Twitter）で日々投稿してきましたが、昨年9月23日のポストにて「内容を整理して別の形でまとめ直す」という方針をお伝えしていました。
私自身、業務において過去の投稿を読み返すことが多かったこともあり、検索しやすいように、かつ個人的な“修行の場”としても機能するよう、Shopifyを使ってサイトを構築することにいたしました。昨年末の12月30日に構築を始めまして、年明けに外枠が完成、その後、お正月休み中に少しずつ過去の投稿を整理・移行し、本日サイトをオープンいたしました。
ただ、ご覧いただくとわかるのですが現時点では2023年4月分までしか移行が完了していません。Shopifyのアップデートや環境変化に伴い不要になったTIPSを除きながら、この後まだ残っている7～800件ほどを今後も順次追加していく予定です。なお、前述の通りこのサイトはShopifyそのもので構築していまして、いくつかの機能を活用しています。
たとえば、サンプルコード付きのカスタマイズTIPSはすべて“0円の商品”として掲載しており、購入手続きを完了していただくと記事本文を閲覧できる仕組みです。
個人的な技術検証の場としても活用しつつ、より幅広いShopifyユーザーの皆様にご覧頂けるようノウハウを読みやすい形でまとめ直していきたいと思います。また、日常の投稿を通じて、SNS投稿とブログなどサイトの記事との連携においてベストな運用方法がどんなものか、なども探り続ける予定です。（外国の方からも英語で公開してほしいとリクエストを頂くことがありますので、そのための場でもあります）ストア構築や運用のヒント、liquid・Shopify Flowといった実装テクニックなど、これまでの内容を引き続き公開していきます。少しずつ情報を充実させてまいりますので、今後ともどうぞよろしくお願いいたします。
なお、サイトのURLは Elon Musk が推奨する通り、スレッドに掲載しておりますので、ぜひそちらをご覧ください。
#Shopify #ShopifyTips #StoreDojo
スレッド
サイトURLはこちらになります。
https://store-dojo.com/ -
【Shopify TIPS】
未発送注文を見落とさないよう自動で通知するShopify Flowの設定例出荷遅延はお客様の信頼を失ってしまうリスクがあります。Shopify Flowを使うことで、毎日（または数時間）に１回のペースで、未発送の注文状況を指定したメールアドレスに通知するためのFlow設定方法です。
◆実装のメリット
・未発送注文の把握が確実になり、出荷遅延のリスクを大幅に削減
・定期的な自動通知で、担当者の確認漏れを防止
・お客様満足度の向上につながる、スムーズな出荷対応が可能に◆設定手順（Shopify Flow）
・トリガーに「スケジュール」を選択し、通知頻度を設定
・未発送注文のデータを取得するアクションを追加
・メール通知アクションを使って、指定メールアドレスに未発送状況を通知するアクションを追加#Shopify #ShopifyTIPS #ShopifyFlow
-
【Shopify TIPS】
テーマ「Dawn/Rise」で、商品ごとに指定した商品サムネイルを表示できるようにする設定例商品画面のトップ画像と、一覧画面で表示する画像を意図的に変えておきたいというリクエストをいただくことがあります。そこで、「コレクション」や「特集コレクション」などの商品一覧画面で、トップ画像以外に指定したサムネイル画像を商品ごとに表示する方法です。（前回（https://x.com/sh_sakamoto/status/1875029322005614965）とは別に、今回は商品ごとに指定する形です）
◆実装のメリット
・一覧画面に表示する商品画像を個別に指定できるため、柔軟な商品訴求が可能です。
・商品メタフィールドを使って簡単に設定できるので、運用コストを低く抑えることができます。◆具体的な手順
①表示するサムネイルを指定するための商品メタフィールドを作成
②snippets/card-product.liquidに商品画像を指定されたものに切り替える処理を追加
-
【Shopify TIPS】
テーマ「Dawn/Rise」の特集コレクションセクションで指定した番号の商品サムネイルを表示できるようにする設定例トップページなどで一定数の商品をリスト表示するために使用する特集コレクションセクションで、最初の商品画像ではなく、指定した番号の商品画像を表示させる方法です。
一定の順番ルールで商品カラーバリエーション画像などを登録しているストアで、特定のカラーに絞って表示させる際に使用したりすることができます。◆実装のメリット
・同じ商品を扱いつつ、複数の特集コレクションごとに異なる画像を指定できるため、柔軟な商品訴求が可能です。
・テーマエディタから簡単に設定できるので、運用コストを低く抑えることができます。◆具体的な手順
①sections/featured-collection.liquidにschemaを、ja.schema.jsonにラベル追加し、snippets/card-product.liquidを参照する際に表示番号用の引数を追加
②snippets/card-product.liquidに商品画像を指定されたものに切り替える処理を追加
③テーマエディタで特集コレクションセクションを追加し、表示させたいサムネイル番号を指定
-
【Shopify TIPS】
テーマ「Dawn/Rise」の商品詳細ページで、バリアントが１つだけの商品が売り切れている場合、「今すぐ購入」ボタンが購入可能な状態に見えてしまっているので、これを修正する設定例です。いずれ、この不具合が解消されるかもしれないため、商品の売り切れ状態を判別しJavascriptを使って「今すぐ購入」ボタンに状態を変更しています。
◆実装のメリット
・数行のコードで実装可能◆具体的な手順
・商品テンプレートの商品情報セクションにカスタマイズされたLiquidブロックを追加しコードを挿入
