Xポストログ

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

  • ShopifyのテーマエディタでセクションにCSSを設定する際、Chromeのデベロッパーツールを使えばプレビュー画面上でもidやclass名が確認できるので便利ですね。また、指定したcssのセレクターにはそのセクションのid名が自動で付与されるので、他の画面には影響しないので安全です。
    #Shopify

    Xで見る
  • Shopifyの商品タイトルとヘッダー<title>タグにバリアント名を表示するための設定例です。バリアントを切り替えると、表示されているタイトルもその場で切り替わります。(文字数の違いによっては表示がガタつくのでタイトル表示部に一定の高さを確保しておくと良いです)
    #Shopify

    Xで見る
  • Shopifyで翻訳を進める際、当たり前と言えば当たり前の話なのですが、全ての商品バリアントを翻訳しておかないと、コレクションや検索のフィルターに未翻訳の項目が表示されてしまいます。一気にCSVで翻訳してしまうのが良いですね。
    #Shopify

    Xで見る
  • Shopifyでギフト包装などを有料商品として扱う場合、それらだけでは購入できないようにしておきたいところです。そこで対象商品にタグを付けることで、通常商品を伴わない場合はカート画面から先に進めないようにする設定例です。(但し直接チェックアウトURLを指定された場合は防げません)
    #Shopify

    Xで見る
  • Shopifyのストアに画像だけのバナーを表示したい時があるのですが、どのテーマにもちょうど良いセクションがありません。従来はカスタムliquidに直接HTMLを書いていたのですが、利用頻度も多いのでテーマDawnでは独自のカスタムセクションを作成するなどしています。
    https://colossal-vanadium-63c.notion.site/Dawn-11-0-0-be2259e2a0f7492aa5c76350eaf05b0c?pvs=4
    #Shopify

    Xで見る
  • Shopifyのコード編集画面には検索機能がが付いていますあ、正規表現も使えるのでif文やfor文など見つけやすくて助かります。
    #Shopify

    Xで見る
  • Shopifyのコレクション一覧(コレクションリスト)ですが、デフォルトでは名前か日付、商品数のいずれかでソートされてしまいます。コレクションの一覧は任意に並べたいことの方が多いので、コレクションリストセクションを代わりに使うと良いですね。
    #Shopify

    Xで見る
  • Shopifyの商品handleを一括で変更したい場合、商品管理画面のエクスポート・インポート機能を使うと商品を新たに登録しなおすことになるのですが、Matrixifyを使えば同じ商品情報のhandleを直接更新することができるので便利ですね。
    #Shopify

    Xで見る
  • Shopifyでコレクションページのフィルターにタグを使うケースがあるかと思いますが、多言語対応する際デフォルト言語以外では非表示になる仕様とのことで気をつけたいですね。代わりにメタフィールドの使用が推奨されています。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」のブログ記事セクションで、サムネイルとタイトルだけ表示したいというケースがあります。そこで「ブログ記事の抜粋」部分を表示・非表示変更できるようにするための設定例です。
    #Shopify

    Xで見る
  • 多くのマーチャント様への支援を通じて得た知見から、グロースに必要なデータを一元管理できる機能をサービスに追加しました。
    様々な指標がすぐに見れて、スピーディーに打ち手に繋げることができるようになります。(支援している我々が本気で使いたい&必要としている機能だったりします)
    #Shopify

    Xで見る
  • ShopifyのテーマDawnのソーシャルアイコンにLINEを追加する設定例です。LINEのアイコン画像にはモノクロが使えないため一つだけ浮いてしまいますが、、Instagramやfacebookのアイコンを合わせてカラーに差し替えてしまっても良いかもしれません。
    #Shopify

    Xで見る
  • Shopifyのテーマ「Dawn」のブログ記事セクションは指定したブログの記事全てが表示対象になりますが、「ニュースの中のイベント情報だけを表示したい」と言った場合に、特定のタグを持つ記事だけを表示できるようにする設定方法です。「すべてを表示」のリンク先もタグで絞り込まれます。
    #Shopify

    Xで見る
  • Shopifyのストアを運用していると、様々な流入経路から顧客を呼び込むことになります。経路ごとに顧客の来訪目的や特性が異なる事もあるので、可能であれば固有の対応をしたいところです。流入元のドメインやパラメータに応じてコンテンツの表示位置を動的に変更するセクションの設置例です。
    #Shopify

    Xで見る
  • Shopifyのコレクションページには価格を表示せず商品詳細でのみ表示したい、というケースがありました。テーマ「Dawn」にはデフォルトで価格を非表示にする設定は付いていないので、その実装例です。
    #Shopify

    Xで見る
  • ShopifyもSaasなので時々管理画面にアクセスできない時がありますが、そんな時はこちから稼働状況をチェックできます。
    https://www.shopifystatus.com/
    #Shopify

    Xで見る
  • Shopifyのカート画面の購入ボタン近辺で、メルマガ登録でクーポンコードを配布するプロモーション事例です。クーポンコードはコピペ用に表示されるだけでなく、タップすればそのまま即時適用されます。テーマDawnをベースにしていますが、どのテーマでも実装可能な内容です。
    #Shopify

    Xで見る
  • 何かと便利に使わせていただいているMatrixifyですが、インポートした顧客に向けて一括でアクティベーションメールを送ることができる点もありがたいですね。過去にもいくつかの案件で、数万件規模の顧客に対して(時間はかかりましたが)無事に案内することができました。
    #Shopoify

    Xで見る
  • Shopifyで、あるクーポンを使うと別のクーポンも利用できなくなるようにするための設定例です。分析しやすいように流入経路ごとに異なるクーポンコードを配りつつも、どちらか一方しか使えないようにしたい時などに設定します。
    #Shopify

    Xで見る
  • Shopifyのクーポンコードはその利用実績をliquidでは取得できません。
    1人1回限りのクーポンをトップページなどでプロモートする場合、すでに利用済みのお客様には案内しないようにする方法としてcookieを使って判別するなどしています。
    #Shopify

    Xで見る