Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のコレクションページでページをロードせずに連続してページを読み込めるようにする設定例Shopifyのテーマ「Dawn」のコレクションページで、ページを切り替えることなく２ページ目以降を動的に読み込めるようにするための設定例です。スマホで一瞬チラついてしまうのですが、商品詳細から戻ってきた時や画面をリロードした際も、直前の読み込み状態を保持します。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPSスレッド
-
【Shopify TIPS】
Shopifyで「Shopify Bundles」アプリを使って個々のSKUを用意せずに販売単位の異なる商品で在庫を共有する方法Shopify Bundlesは本来はその名の通り複数の商品をバンドルし（まとめて）て商品が販売できるようになるアプリですが、異なる数量で商品を販売する際の簡単な在庫共有アプリとしても利用することができます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで特定の商品が含まれていたら送料を無料にする設定例Shopifyで特定の商品が含まれていたら送料を無料にしたいケースがあります。商品の「重量」情報を使っていないストアに限りますが、重量を条件に無料配送を設定し、対象商品にのみ重さを設定することで、その商品が含まれていた場合に送料を無料にすることができます。その設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」の商品詳細ページに追加可能な 「付属商品」ブロックを使って他の商品へのリンクを設定するShopifyのテーマ「Dawn」には動的に商品をサジェストしてくれる「関連商品」セクションがありますが、「付属商品」という似た機能を持つブロックがあります。こちらは表示する商品を意図的に指定できるので、コーディネート商品などを掲載するのがいいですね。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで商品一覧画面の画像を（一時的に）拡大表示する方法Shopifyの商品一覧画面で、商品のサムネイル表示をもう少し大きく表示したい時があります。そんな時はChromeのデベロッパーツールを開き、簡単なjavascriptを入力して拡大表示してたりします。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのアプリ「Search & Discovery」を使って英語タイトルの商品も意図した検索ワードでヒットするようにする設定例Shopifyのストア内検索でうまく商品がヒットしてくれない時は、Search & Discoveryの「検索」機能を使います。特定の検索ワードに対して意図した商品が表示されるように設定できるので便利ですね。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
Shopify新テーマ「Horizon」用に作っていた「カラム」ブロックに、列ごとに幅を%指定できるオプションを追加してみました。
均等分割だけでなく、分割する列の数に応じて1:2や1:3:1など様々な比率のレイアウトに対応。自由度の高い段組みをテーマだけで対応できそうです。
テーマブロックの再利用性を活かしつつ、メンテナンス性と柔軟性を両立する設計を引き続き探っています。
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のカート画面で１タップクリップボードコピーが可能な複数のクーポンコードを表示する設定例Shopifyで複数のクーポンが使えるようになりましたが、チェックアウト画面で一つひとつ入力してもらう必要があります。ストア内に掲載している複数のクーポンを掲載し、それらのコードを１タップでコピーできるようにすることで積極的な利用を促す設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで管理画面で変更をかけた注文にタグをつけて注意メッセージを表示する設定例Shopifyの公式回答にもあるように管理画面から編集した注文はアカウントの注文詳細に反映されません（追加はされるが削除されない）。お客様は変更内容が反映されないと心配されますので、注文タグを付けて注意メッセージを出すなどの対応をすると良いでしょう。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
時間を見つけては、Shopifyの新テーマ「Horizon」を試しています。
直感的に要素を横並びにレイアウトできるようにしたかったので、構造を探りつつオリジナルの「カラム」ブロックを作成しました。
テーマブロックとして定義したことで、さまざまなセクションで利用可能になり、ネストにも対応。組み合わせ次第でかなり自由なレイアウトが組めそうだという手応えを得られました。新テーマを使いこなすにあたっては、
「テーマブロックを活かしつつ、どこまでメンテナンスしやすい構造にできるか」
「できるだけコードカスタマイズをせずに柔軟な表現を実現できるか」
などを意識しながら取り組んでいます。テーマブロックのネストやAI生成ブロックを含む柔軟なレイアウトを、どう設計・制御するかが今後ますます重要だと実感しています。
社内用ドキュメントをまとめながら、新テーマを深く理解し、どう使いこなしていくかを検証中です。
#Shopify #Horizon #ShopifyTheme
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のスマートフォン閲覧時のカート画面で 合計金額と「ご購入手続きへ」ボタンをフッター固定にする設定例Shopifyのテーマ「Dawn」で、一度に購入する商品点数が多いストアでカート離脱をできるだけ防ぎたい際に、スマートフォンでの閲覧時にカート画面で合計金額と「ご購入手続きへ」ボタンをフッター固定にする設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで注文管理画面で発送が完了した商品に「発送完了日をタグ付け」する設定例Shopifyの注文管理一覧画面で、発送完了日も確認したいというリクエストをいただくことがあります。注文のフルフィルメント完了と同時に「発送完了_[注文日付]」というタグを付与するFlowを走らせるのが簡単ですね。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで商品詳細画面のメディア(画像)の元画像のURLを一気に取得する方法Shopifyで商品管理画面から商品画像を取得したい時があります。一つひとつ開いてダウンロードしても良いのですが、数が多いと手間なのでまとめて元画像のURLをクリップボードにコピーする方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyでアプリブロックの見た目を変えたい時はカスタムCSSよりもカスタマイズされたLiquidセクションがおすすめShopifyでは様々なアプリが実装可能ですが、ストアの体裁に合わせてアプリのスタイルに手を加える事もあります。そんな時は文字数制限のあるカスタムCSSではなく、カスタマイズされたLiquidコードセクションにCSSを書くと便利だったりします。（もちろん直接コード編集してもOKなのですが）
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで使用されたクーポンコードを利用回数もカウントして顧客情報のタグとして付与する設定例Shopifyで顧客が使用したクーポンを顧客タグとして記録する方法を拡張し、さらにクーポンの使用回数まで記録しておきたい場合の設定例です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで使用されたクーポンコードを顧客情報のタグとして付与する設定例Shopifyで顧客が使用したクーポンを顧客タグとして記録しておくための設定例です。「レポート」からクーポンごとの利用者を確認することができますが、顧客情報に直接記録しておくことですぐに確認することができます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」の注文詳細画面に「まとめてもう一度購入」ボタンを表示できるようにする設定例Shopifyの注文詳細画面の商品ごとに「再注文」ボタンを表示する設定例の派生で、注文商品をまとめてもう一度購入できるボタンの設定例です。一度に複数の商品を購入する頻度が高い商材の場合に有用です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Dawn」のヘッダー告知バーに「あといくらで送料無料」を表示する設定例Shopifyの「Dawn」テーマのヘッダー告知バーに「あといくらで送料無料」を表示するための設定例です。テーマエディタの告知バー設定で判定金額が設定できます。また、カートの商品情報をリアルタイムで検知して表示情報が切り替わります。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで注文状況ページ（注文完了ページ）をURLで直接表示した時はメールアドレスと注文番号で本人確認が入るShopifyの注文完了画面（Order Status Page）は、メールアドレスと注文番号などでの本人確認が必要です（管理画面から開く場合も同様）。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyで特定の商品を購入した顧客だけ使えるクーポンの設定例Shopifyで特定の商品購入者の方だけが使えるクーポンの設定例です。指定の顧客タグを持ったセグメントだけが使用できるクーポンを作成し、Flowを使って配送完了時に自動で顧客タグが付与されるようにしています。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド