Xポストログ

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

2023年4月の投稿 絞り込みを解除

  • Shopifyでアプリを使わずに、テーマセクションを使って来訪回数に応じてメッセージを切り替える方法です。LiquidからはcookieやlocalStorageにアクセスできないのでJavascriptを使うしかないのですが、その設定例です。
    #Shopify

  • Shopifyのコレクション（商品一覧）ページにはタイトルや説明文以外にも独自の項目を色々と盛り込むことができますが、２ページ目以降にも同じ内容が毎回表示されるのは少々使い勝手が悪いですね。そこで２ページ目以降の表示内容を変えたい場合の設定例です。
    #Shopify

  • @MMSUCK1 @akihi335 お試しください。足りないアイコンは「icon-xxx.liquid」というファイルをスニペットに追加してください。今回はhomeに該当するアイコンがDawnに無かったので追加しています。

  • Liquidから直接cookieにアクセスする方法は無いとのこと。Javascriptを使うしか無いですね。
    #Shopify
    https://stackoverflow.com/questions/58193198/is-there-any-way-to-use-cookies-in-shopify-liquid-templates

  • そういえば、Shopifyのテーマエディターからヘッダーやフッターにセクションを追加できるようになったので、スマートフォン用のフッター固定タブメニューなども設置しやすくなりましたね。
    #Shopify

    フッターにセクションを追加してスマートフォン用のタブメニューを表示する方法はこちら

  • Shopifyを使って多言語対応のストアを作る際には、システムのナビゲーションだけでなく、独自に設定したリンクも考慮する必要があります。選択された言語を維持したまま、ページ間の遷移がスムーズにできるように、動的なURLを設定しておく必要があります。
    #Shopify

  • カート画面の購入ボタン付近でクーポン訴求する方法についてliquidを直接編集するやり方をツイートしましたが、公開後の運用を考慮するとやはりテーマエディタから編集できる方が便利ですね。小計セクションにブロック要素を追加するための方法を追加しています。
    #Shopify
    https://x.com/sh_sakamoto/status/1643476289305853952

  • 楽天などで見かけますが、カート画面の購入ボタン近くでクーポン訴求して会員登録を促す設定例です。テーマエディタで追加できない場合は直接コードを編集します。割引金額を提示する際は、購入者の方の誤解を生まないようクーポン適用後の価格であることをしっかりと明示しておきます。
    #Shopify

  • Shopifyのページをブログのように一覧で表示したい、というご要望に対して対応した際の設定例です。
    ページにはブログのようにメインのイメージ画像を設定する事ができないのでメタフィールドで代用しています。また、全て表示する必要が無いことからその除外処理も入れています。
    #Shopify

  • Shopifyの通知メールですが基本的にインラインのCSSで編集する必要があります。とはいえそれなりのカスタマイズを行う際はやはり外部CSSで定義したくなります。
    引用ページでその方法が解説されていますが、これを参考に実装した際の具体的な手順と設定方法です。
    #Shopify
    https://community.shopify.com/c/shopify-discussions/editing-the-email-notifications-styles-css/td-p/460702

  • Shopifyのチェックアウト画面に表示される配送先住所の都道府県セレクタはちゃんと北海道から始まるのですが、マイページの住所編集画面ではローマ字読みアルファベット順の愛知県から始まっています。そこで、少々強引ですがJavascriptを使って北海道から始まる順序に並び替える方法です。
    #Shopify

  • Shopifyのアカウントページにある住所編集画面ですが、デフォルトではかなり違和感のあるレイアウトなので、可能ならここも直しておきたいですね。
    ちなみに次回はこれに関連して都道府県プルダウンの中身を、チェックアウト画面と同じように北海道から始まる順に変更する方法です。
    #Shopify