Xポストログ

2023年4月11日

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

2023年4月10日

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

2023年4月10日

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

2023年4月9日

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

2023年4月8日

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

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

2023年4月7日

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

2023年4月6日

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

2023年4月5日

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

2023年4月4日

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

2023年4月3日

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

2023年4月2日

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

2023年4月1日

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

2023年3月31日

Shopifyのコレクションについて優先度を決めて商品の表示順を調整したいというご要望をいただくことがあります。そこで、全自動＆リアルタイムというわけにはいかないのですが、メタフィールドに設定した優先度を元にMatrixifyというアプリを使ってCSVによる一括更新を行うことがあります。
#Shopify

2023年3月30日

@Tjena_allihopa お役に立てましたようで何よりです。
一点だけ補足です。CSSに関する内容なので説明を省いているのですが、PC版の画像位置が偏る場合はこちらを追加でご設定ください。

2023年3月30日

Shopifyのテーマ「Dawn」の「スライドショー」セクションですが、ブロックごとに画像を１つだけ指定するタイプなので、トリミングの仕方が多少異なるだけでどのデバイスでも同じものが表示されます。
とはいえやはりスマートフォンでは縦長な画像を表示したくなりますので、その設定例です。
#Shopify

2023年3月29日

Shopifyではrobots.txtも編集できるようになっているのですが、こちらの方の投稿が大変参考になりました。一度作成した「robots.txt.liquid」の編集には気をつけたいですね。
https://webutubutu.com/webdesign/9738
#Shopify

2023年3月28日

Shopifyのテーマエディタでは、カスタムLiquidセクションとブロックをそれなりに使用しますが、運用が始まるとコードの内容を忘れてしまいがちです。そこで、ストアフロント側には何も表示されないテキストフィールドを設け、機能説明欄を追加しておくと運用管理がスムーズになります。
#Shopify

2023年3月27日

Shopifyのテーマ「Dawn」の商品詳細画面で「SKU」を表示するための設定例です。バリアントを持つ商品、持たない商品どちらも表示可能です。今回はテーマエディタでの設定方法を掲載していますが、通常はjsも別ファイル化するなどして、コード編集で埋め込んでしまうケースがほとんどです。
#Shopify