Xポストログ

2023年4月30日

ShopifyのテーマはPCとスマホの両方に最適化されています。ただ、スマホ用の画面ではタイトルや画像の位置を入れ替えたいというリクエストは結構頂きます。通常弊社では他のテーマで対応していますが、デフォルトでは画像位置を変更できないDawnの場合、このような実装方法が考えられます。
#Shopify

2023年4月29日

Shopifyのテーマ「Dawn」に標準で実装されているお問合せフォームですが、少し手を加えて顧客UXを向上させるのもオススメです。
送信前に確認メッセージを表示し、送信完了後に別ページで受付完了の案内を行うことで、顧客に対して適切な対応が行われていることを印象付けることができます。
#Shopify

2023年4月28日

前回の「メニューからパンくずリストを作成する方法」とは別に、コレクションメタフィールドを使った設定例です。こちらは、ある程度の規模を持ち、事前に商品カテゴリの階層構造設計をしっかりと行ったストアで有効な方法です。
#Shopify
https://x.com/sh_sakamoto/status/1651513521950314496

2023年4月27日

Shopifyのメインメニューから自動でパンくずリストを生成するコード例です。メニューに設定されたページ限定で生成するだけなので本格的なSEO対策には向きませんが、自動で階層構造を読み取って生成するので使い勝手は良いです。（コードの解説文はGPT4。ちゃんと読み取ってくれますね）
#Shopify

2023年4月26日

前回のtweetに関連して、Shopifyのテーマ「Dawn」のブログ一覧画面にタグの絞り込み機能（タグメニュー）を表示する設定例です。ブログ記事同様、表示させたくないタグの除外指定もできます。（ブログ記事とブログ一覧、それぞれのテンプレートで設定が必要です）
#Shopify
https://x.com/sh_sakamoto/status/1650780733412343811

2023年4月25日

Shopifyのテーマ「Dawn」のブログにはタグの絞り込み機能がついていません。そこで、ブログ記事にリンク付きのタグリストを表示する設定例です。表示させたくないタグの除外指定もできます。
これを応用して、次回はブログ記事一覧（トップ含む）にタグメニューを表示する方法の紹介です。
#Shopify

2023年4月24日

Shopifyの商品ページにお問い合わせフォーム導線を設置しておき、そこを経由した際は問い合わせ項目に商品情報を自動で入力しておく方法です。
最近はチャット導線がホットですが、購入意欲が高いもののお時間が無い、もしくはチャットが苦手な顧客に対して有効な窓口として活用できます。
#Shopify

申し訳ありません。紹介したコードの訂正になります。
①問い合わせ対象商品を切り替えてフォームに遷移した際に商品名が切り替わらないバグを修正
②バリエーションピッカーがドロップダウンの時の取得方法を変更
動作検証不足で失礼しました。改めて公開前のテストをしっかり行います。

2023年4月23日

Shopifyのコレクションページに商品タグを表示したくなるケースも結構あります。使用するテーマによって設定方法は様々なのですが、こちらは「Dawn」を使った設定例です。アプリが自動でタグ付けすることがあるので、表示対象除外設定も合わせて実装しておくことをオススメしています。
#Shopify

2023年4月22日

Shopifyの登録フォームは要素を追加すれば独自の顧客タグを設定できます。これを応用して、例えば店舗や同封物にパラメータを含んだURLのQRコードを設置するなどして登録経由をタグ付けすることが可能です。その設定例です。登録完了メールでタグ判別して店舗別クーポン配布など出来ますね。#Shopify

2023年4月21日

Shopifyで特定の商品をコレクションや検索結果ページに表示させたくない場合があります。その際は検索エンジンからも見えない方が良いので、その両方に対応した設定方法です。（といいつつ、高度な閲覧制御を行いたい時はLocksmithアプリがオススメです）
#Shopify
https://apps.shopify.com/locksmith?locale=ja

スレッド

公式にて、より簡単な実装方法が提供されておりました。調査不足で失礼いたしました。
https://shopify.dev/docs/apps/marketing/seo#step-2-hide-a-resource-from-search-engines-and-sitemaps
メタフィールド「seo.hidden」を作成し対象の商品やブログ記事に値を設定するだけで、サイト内検索からは除外され、ページにはnoindexタグが付与、sitemap.xmlからも削除されます。

2023年4月20日

Shopifyのサイト内検索ですが、予測変換機能はついてるものの何かしら文字を入れないと候補が表示されません。そこで検索ボックスを開いた際に最初からトレンドや人気の検索ワードを出しておくのもおすすめです。
運用しやすいようテーマエディタで編集可能にしておくための設定例です。
#Shopify

2023年4月19日

Shopifyの商品詳細画面で商品ごとに特定の関連商品を表示したいケースがあります。（デフォルトの「関連商品」セクションはユーザーの行動に紐づく動的レコメンデーションなのでコントロールできません）
そこでメタフィールドを使って商品ごとに任意のコレクションを表示させる方法です。
#Shopify

2023年4月18日

Shopifyのスマートフォン向けハンバーガーメニューはシンプルなので、要素を追加したりカスタマイズしたくなります。ただ、そのためにはコードの編集が必要です。さまざまな機能を追加できますが、こちらは「Dawn」テーマにサブメニューやお知らせリンクを表示させる設定例です。
#Shopify

2023年4月17日

Shopifyのメタフィールドを使ってコレクションごとに背景画像を変更する方法です。コレクションとしていますが商品詳細やブログなど他のテンプレートにも応用できます。CSSを変更する予定がない場合は直接コードを編集しても問題ありませんが、こちらはテーマエディタを使った設定例です。
#Shopify

2023年4月17日

@nonakakikaku お役に立てたようで何よりです。方法を共有しておきながらなんですが、メタフィールドは作りすぎてしまうと管理が煩雑になってしまうので、お気をつけください。（メタフィールドの説明欄には機能概要を記載しておくと良いですね）

2023年4月16日

Shopifyの商品詳細で商品タイトルを改行したい場合があります。ただ、商品タイトルは様々な画面やデータで参照されており、タイトル入力欄での改行は避けたい所です。また、テーマDawnでは<br>タグを使用しても改行されません。そこで表示用のメタフィールドを使う方法をお勧めしています。
#Shopify