Xポストログ

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

  • 少々マニアックなカスタマイズ事例です。アンバサダー施策などで特定の流入経路からの購入であることがわかるように、パラメータ名とその値を注文データに引き継ぐための設定例です。ストアアクセス時に指定されたパラメータが付与されていればcart attributesに値を渡します。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」ではカートに入っている商品の削除ボタンを押すと、確認メッセージなど表示されず即座にアイテムが取り除かれます。そこで誤って削除されないようにするためダイアログを表示する方法です。(cart.jsを修正するのでテーマバックアップを行なってから実装して下さい)
    #Shopify

    Xで見る
  • Shopifyで、「ドロワーメニューボタン」など画面遷移を伴わないクリックのイベントをGA4で計測したいケースがあります。gtagを使ったイベント計測用タグをテーマエディタから定義できるようにする設定例です。(カスタムイベントなので必ずしも計測できない事があるのでご注意ください)
    #Shopify


    スレッド

    4枚目の画像がおかしかったのであげ直します。

    Xで見る
  • Shopifyのチェックアウト画面はPlusを契約しないとカスタマイズできないことがほとんどですが、入力フォームのプレースホルダーは変更ができます。詳細住所の入力不備で配達不能な注文を削減するためにも、入力例などを追記しておくと良いですね。
    #Shopify

    Xで見る
  • Shopifyでストアデフォルトのヘッダー・フッターを持たないページを作成したくなる時があります。その手軽さや利便性の高さから通常はページビルダーアプリを使うことをオススメすることが多いのですが、テーマファイルのカスタマイズで実装することも可能です。その設定例です。
    #Shopify

    Xで見る
  • Shopifyのアカウントは(Shopifyに依頼して設定変更しない限り)メールアドレスの受信確認なしで登録可能です。そのためアドレスを間違えて登録された場合、再ログインできない可能性があります。そこで確認用のフォームを設置して入力間違いを防ぐための設定例です。
    https://colossal-vanadium-63c.notion.site/Dawn-1b908f218b8d4444ba90bcd97ced9e52?pvs=4
    #Shopify

    Xで見る
  • 本来の使い方ではないのですが、マーチャントさんと相談の上、メタオブジェクトを使って作業実績を保管している事例です。作業スケジュールなど別途管理することがほとんどですが、これをやっておくとShopify単体で状況把握できるので引き継ぎもしやすいです。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」のスライドショーセクションですが、リンク先を指定する際はリンクボタンとして画像の上に表示されます。これはこれで導線としてわかりやすくて良いのですが、場合によってはボタンは表示せずに画像全体にリンク先を指定したい時があります。その設定例です。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」のお問い合わせフォームですが、デフォルトでは送信が成功するとその場でメッセージを表示して完了となります。ただ、計測のためだったり別途フォームの無いメッセージを表示したいなどの目的から、別のページ(URL)に飛ばしたい時があります。その設定例です。
    #Shopify

    Xで見る
  • 加藤さんがポストしていたShopify Flowのログの件ですが、とても便利ですね。Flow作成の際に変数の中身やステップの進み具合の確認など、大いに活用させてもらってます。
    https://x.com/jazzyslide/status/1704645082383859912
    #Shopify

    Xで見る
  • ShopifyのテーマDawnのコレクションページに表示される商品写真は、商品情報に登録した1枚目(マウスオーバー時は2枚目)の画像に固定されていますが、これを任意の画像を指定できるようにする設定方法です。メタフィールドに入力欄を設けているので、商品ごとに指定が可能です。
    #shopify

    Xで見る
  • Shopifyで購入後に送られる「注文の確認」メールにも注文時に指定された配送希望日時を掲載しておきたいというご要望をいただくことがあります。配送希望日時を指定するアプリによって項目名は異なりますが、注文詳細画面に表示される項目名を使って掲載可能です。
    #Shopify

    Xで見る
  • Shopifyで特定のパラメータを持ったURLの時だけ表示するセクションの設定例です。SEO影響を抑えるためコンテンツを動的に表示しており、そのため初回表示時のみ直前にリロードが走るなど少し癖のある動きをします。そのような前提条件にご了承を頂けるときに限りですが、実装しています。
    #Shopify

    Xで見る
  • Shopifyの管理画面で、購入者宛に送信されたメールを自分自身(管理者)宛にも送れるようになったのはありがたいですね。マーチャント様が、購入者の方からお問い合わせを受けた際に、送信されたメールの中身を確認したいというご要望が多かったので助かります。
    #Shopify

    Xで見る
  • Shopifyで購入後に送られる「注文の確認」メールですが、LIQUIDやHTML、CSSを使って内容を編集することができます。例えば、特定のタグを持つ商品が購入された際に、そのタグを持つ商品に関する特定のメッセージを表示させるための設定例です。
    #Shopify

    Xで見る
  • Shopifyのアカウント登録画面は、デフォルトではメールアドレスとパスワードだけあれば登録できてしまいます。とはいえ氏名の入力率は低くないので必須にする必要はないかも知れませんが、「どうしても必須にしたい」という場合の設定方法です。
    #Shopify

    Xで見る
  • テーマ「Dawn」のブログページには各記事カードに「もっと見る」リンクがありません。とあるストアではヒートマップツールによる分析結果から、ユーザーが記事カードを全くクリックしていない事がありました。そこで明示的にリンクテキストを表示する対策を取りましたが、その設定方法です。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」のフッターに表示されているSNSアイコンですが、TwitterをそろそろXに変えたいという話も出てきています。X公式のSVGを使った設定例です。
    #Shopify

    Xで見る
  • ShopifyのLiquidでは基本的に動的に型を解釈して比較を行ってくれるのですが、明示的に型変換した方が良いときがあります。文字列と数字の値比較などですね。
    #Shopify

    Xで見る
  • Shopify Flowには在庫が基準値を下回ったら通知してくれる便利なフローがあらかじめテンプレートとして提供されているのですが、商品によっては通知したいタイミングが異なるケースもあります。そこで、少し手を加えてタグで通知基準を指定できるようにしておくと使い勝手が良いです。
    #Shopify

    Xで見る