Xポストログ

2025年1月16日

【Shopify TIPS】
テーマ「Dawn」で同一階層を移動できるメニューをメインメニューから自動で生成する方法

Shopifyのグローバルメニューを第２、３階層目まで設定した場合、同じ階層の移動であっても毎回メニューを開く必要があるので少々面倒です。そこでテーマDawnで、メニューの構造に合わせて、自動で同一階層間を遷移しやすくするサブメニューを表示する方法です。

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

スレッド

https://store-dojo.com/products/2023-06-01

2025年1月15日

【Shopify TIPS】
商品詳細のYou may also like（関連商品）に表示される商品について確認する方法

たまにお問合せを受けますが、Shopifyの商品詳細画面に表示される関連商品は、管理画面でその内容を確認することができます。また、自動生成されるロジックについては、こちらのページで解説されています。

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

スレッド

https://store-dojo.com/products/2023-05-31

2025年1月15日

【Shopify TIPS】
テーマ「Dawn」でドロワーメニューを開いた時に現在表示しているページの階層に予めセットしておく方法

Shopifyではスマホ用メニューは毎回上からたどる必要があり、階層が深いと行き来するのが少々面倒です。そこで、メニューを開いた直後からその階層を表示させておけば遷移がかなりスムーズになります。他テーマでは方法が異なりますが、テーマDawnでの実装例です。

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

スレッド

https://store-dojo.com/products/2023-05-30

2025年1月15日

【Shopify TIPS】
商品詳細にその商品が属するコレクションの一覧リンクを表示する方法

Shopifyの商品情報画面で、その商品が含まれるコレクションをリスト表示する方法です。関連商品リンクと同様、類似商品を探している訪問者の回遊性を高める効果が期待できます。以前共有させて頂いた商品タグのリンク一覧と併用しても良いですね。

#Shopify #ShopifyTIPS

スレッド

https://store-dojo.com/products/2023-05-28

2025年1月14日

【Shopify TIPS】
テーマ「Dawn」のカートページにコンテンツ（セクション）を追加した際にカートが空の時のみ表示し、商品がある場合は表示させない方法

そこまで効果があるわけでは無いのですが、Allbirdsのように中身が空のカートページに商品やコレクションへの導線を表示しておくのも良いですね。中身に応じて表示・非表示されるようにしつつ、空にした瞬間も画面を更新せずに表示されるようにした設定例です。

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

スレッド

https://store-dojo.com/products/2023-05-26

2025年1月14日

【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

2025年1月14日

【Shopify TIPS】
メタフィールドもCSVで編集可能「Matrixify」

ShopifyでメタフィールドもCSVを使って編集したいことがあると思います。デフォルトのエクスポート機能だとカラムが無いので操作できないのですが、そんな時もMatrixifyが便利です。フィルタをかけられるので、特定のフィールド値だけ編集することも可能です。

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

スレッド

https://store-dojo.com/products/2023-05-23

2025年1月13日

テーマ「Dawn」の商品詳細ページでページのスクロール位置に応じて固定表示されるカート追加ボタンを表示する方法
https://store-dojo.com/products/2023-05-21

Shopifyのテーマ「Dawn」では商品詳細ページが長い場合、スクロールしてくと「カートに追加」ボタンが見えなくなってしまうので少々不便です。そこでStickyボタンの設定例です。（売り切れ時のボタンラベルまで反映していますが、「追加」固定でも良いかと思います）

#Shopify #ShopifyTIPS

スレッド

デフォルトの「検索モーダル」は表示させずに様々な切り口の導線を設置した検索ページに直接遷移させる
https://store-dojo.com/products/2023-05-22

Shopifyのテーマの多くは検索アイコンをタップするとその場でワード入力を促されます。ですが、訪問者がより簡単に目的の商品にたどり着けるようにするために、直感的なナビゲーションを提供する検索ページに直接遷移させる方法も有用です。

2025年1月13日

【Shopify TIPS】
Shopify TIPSに本日4つの新しい情報を追加しました。
---------------------
・テーマ「Dawn」のスライドショーに設定できる最大枚数を変更する方法（最大50件まで）
・テーマ「Dawn」のコレクションページに商品バリエーションを表示する
・テーマ「Dawn」の商品詳細ページでページのスクロール位置に応じて固定表示されるカート追加ボタンを表示する方法
・デフォルトの「検索モーダル」は表示させずに様々な切り口の導線を設置した検索ページに直接遷移させる
※各コンテンツへのリンクはスレッドに掲載しています。

#Shopify #ShopifyTIPS

2025年1月12日

テーマ「Dawn」でコレクションページの途中にコンテンツを表示する方法
https://store-dojo.com/products/2023-05-17

Shopifyのコレクション（商品一覧）ページですが、ヘッダーとは別に途中でバナーなどのコンテンツを差し込み表示したいというリクエストを頂くことがあります。そこで、テーマ「Dawn」を使った設定例です。

#Shopify #ShopifyTIPS

スレッド

コレクションや検索結果ページで「セール(割引価格を設定した)商品」を絞り込めるようにする方法
https://store-dojo.com/products/2023-05-18

Shopifyのコレクションや検索結果ページで「割引（セール）商品」を絞り込めるようにする方法です。割引価格の有無そのものを絞り込み条件として設定することはできないので、通常は「タグ」を使っています。アプリを使えば、割引価格を設定するだけで自動でタグの付与・解除もできます。

2025年1月12日

【Shopify TIPS】
本日の新規追加のTIPS４件です。
---------------------
・URL Filtersの「within」フィルタを使う際はSEOの観点で注意が必要
・Shopify Flowはスプレッドシートにも連携できて便利
・テーマ「Dawn」でコレクションページの途中にコンテンツを表示する方法
・コレクションや検索結果ページで「セール(割引価格を設定した)商品」を絞り込めるようにする方法
※各コンテンツへのリンクはスレッドに掲載しています。

#Shopify #ShopifyTIPS

2025年1月11日

テーマ「Dawn」でバリアントごとに設定したコメント(HTMLタグもOK)を表示する方法
https://store-dojo.com/products/2023-05-13

Shopifyの商品情報について、バリエーションごとに商品情報も一部切り替えて表示したいというリクエストを頂くことがあります。色々と方法は考えられますが、バリエーションメタフィールドを使った実装例です。

#Shopify #ShopifyTIPS

スレッド

ShopifyからエクスポートしたCSVが文字化けしてしまう時の対処方法
https://store-dojo.com/products/2023-05-14

Shopifyからエクスポートした注文情報などのCSVファイルですが、そのままWindowsのExcelで読み込むと日本語部分が文字化けしてしまいます。基本的にはスプレッドシートでの作業をオススメしていますが、文字コードをShift JIS形式に変換すればExcelでも正しく読み込めるようになります。

2025年1月11日

【Shopify TIPS】
本日の新規追加のTIPS４件です。
---------------------
・テーマ「Dawn」でコレクション検索を実装する方法
・テーマ「Dawn」でバリエーションピッカーがボタンタイプの時に「選択中バリアントを明示」する設定例
・テーマ「Dawn」でバリアントごとに設定したコメント(HTMLタグもOK)を表示する方法
・ShopifyからエクスポートしたCSVが文字化けしてしまう時の対処方法
※各コンテンツへのリンクはスレッドに掲載しています。

#Shopify #ShopifyTIPS

2025年1月10日

テーマ「Dawn」で「商品カード（デフォルトコレクション、特集コレクション）」に商品公開後の一定期間、自動で「新着アイコン」を表示する設定例
https://store-dojo.com/products/2023-05-07

Shopifyの商品一覧に「新着」アイコンを表示させたい場合、「商品タグ」を使って管理する事が多いのですが、取扱点数が多いストアでは商品の公開日を使って自動で制御するケースもあります。その際、直接コードにロジックを書いても良いのですが、テーマ設定で管理する場合の設定例です。

スレッド

テーマ「Dawn」の商品詳細に商品公開後の一定期間、自動で「新着アイコン」を表示する設定例
https://store-dojo.com/products/2023-05-09

Shopifyのコレクションページに商品登録後の一定期間、自動で「新着」アイコンを表示する方法を紹介しましたが、あちらに連動して商品詳細ページにも同様の機能を持たせたい場合の設定方法です。

2025年1月10日

【Shopify TIPS】
本日の新規追加のTIPS４件です。
---------------------
・カート画面にFAQを表示し、ユーザーの購入時の疑問や不安を解消
・　テーマ「Dawn」でテーマエディタから「買い物を続ける」ボタンのリンク先を変更できるようにする方法
・　テーマ「Dawn」で「商品カード（デフォルトコレクション、特集コレクション）」に商品公開後の一定期間、自動で「新着アイコン」を表示する設定例
・　テーマ「Dawn」の商品詳細に商品公開後の一定期間、自動で「新着アイコン」を表示する設定例
※各コンテンツへのリンクはスレッドに掲載しています。

#Shopify #ShopifyTIPS

2025年1月9日

会員登録＆ログインフォームでSubmit後の遷移先を指定する方法
https://store-dojo.com/products/2023-05-03

Shopifyの会員登録とログインフォームは、通常submitした後はマイページに遷移するだけですが、それぞれ任意の遷移先に変更することができます。フォームタグの直後にhidden項目で遷移先のURLを指定するだけで実装できます。新規会員登録直後の案内ページを充実しておくのも良いですね。

スレッド

Liquidの {% %} と {%- -%} の違い
https://store-dojo.com/products/2023-05-04

Shopifyのテーマを編集していると、liquidコードのデリミタが{% %}と{%- -%}のどちらでも動くことに気づくかと思います。両者の違いはコードの前後の空白を削除するかどうか、にあります。

2025年1月9日

【Shopify TIPS】
（新規TIPSもまだまだありますが、当面の間、STORE DOJOに過去の投稿を掲載することに注力することにいたしました。）

今回新たに追加したのはこちらの４件になります。
---------------------
・テーマ「Dawn」で、メタフィールドを使ってブログのページ内リンクを設定する方法
・フッターに「ページのトップに戻る」ボタンを追加する方法
・会員登録＆ログインフォームでSubmit後の遷移先を指定する方法
・Liquidの {% %} と {%- -%} の違い
※各コンテンツへのリンクはスレッドに掲載しています。

#Shopify #ShopifyTIPS

スレッド

テーマ「Dawn」で、メタフィールドを使ってブログのページ内リンクを設定する方法
https://store-dojo.com/products/2023-05-01

Shopifyのメタフィールドを使って、ブログ記事にページ内リンクを設置する方法です。 HTML編集モードで本文中に直接コードを書いても良いのですが、レイアウトが崩れたりなど何気に運用負荷が高いので、別手順化しておくと更新が楽です。

2025年1月8日

【Shopify TIPS】
商品名の改行位置を画面ごとに最適化する方法

ページのレイアウトの違いもありコレクションページと商品詳細ページでは、商品名の改行位置をそれぞれ指定したいケースがあります。
コレクションページと商品詳細ページで商品名の改行位置をそれぞれメタフィールドで指定できるようにする方法です。

◆実装のメリット
・商品名の視認性が向上
・ページごとのデザインの一貫性を保てる
・商品情報をより見やすく表示できる

◆具体的な手順
①メタフィールドの設定
・コレクションページ用と商品詳細ページ用、それぞれに商品名表示用のメタフィールドを作成。
②テンプレートファイルの編集
・「snippets/card-product.liquid」を編集してコレクションページの表示を設定
・「sections/main-product.liquid」で商品詳細ページの表示を設定

#Shopify #ShopifyTIPS

2025年1月7日

【Shopify TIPS】
カート内商品の問い合わせをスムーズに

カートページの商品ごとに、フォームへ商品名が自動入力される問い合わせリンクを設置する設定例です。
コンバージョンまでの導線はシンプルに保つことが理想的ですが、高額商品や専門性の高い商品の場合、お問い合わせステップを設けることで、かえって顧客の安心感を高め、購入の決断を後押しすることがあります。
顧客の手間を最小限に抑えながら、スムーズなコミュニケーションを実現するために、カート内商品の問い合わせをスムーズにする方法です。

◆実装のメリット
・お客様の問い合わせ作業が簡略化され、離脱率の低下が期待できます。
・ストア側も商品の特定がしやすく、スムーズな対応が可能です。

◆具体的な実装手順
メインカートページの設定
・「sections/main-cart-items.liquid」にコードを挿入
・商品情報を自動取得する処理を追加
問い合わせページの設定
・お問い合わせページテンプレートに専用のカスタムLiquidセクションを追加
・自動入力用のパラメータ処理コードを実装

◆実装時のポイント
商品のURLも自動挿入しておくことで、より正確な商品の特定が可能になり、スムーズなカスタマーサポートを実現できます。

#Shopify #ShopifyTIPS

2025年1月6日

【お知らせ】
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