【Shopify小技】折りたたみブロック(collapsible_tab)にアイコンを追加したい!
商品ページで情報をすっきり整理したい時に便利なのが、Shopifyの「折りたたみ(collapsible_tab)」ブロックです。 見出しをクリックすると説明文が開くため、長くなりがちな商品説明を読みやすくまとめることが…
商品ページで情報をすっきり整理したい時に便利なのが、Shopifyの「折りたたみ(collapsible_tab)」ブロックです。 見出しをクリックすると説明文が開くため、長くなりがちな商品説明を読みやすくまとめることが…
ECサイトでは商材が増えるほど、ユーザーがほしい商品を素早く見つけられるよう、一覧ページに工夫を加えることが重要になります。 その代表的な方法が、チェックボックスなどを用いた「タグによる絞り込み」。多くのECで見かける機…
先日、新しく制作した会員制サイト(ファンクラブ)で、思わぬエラーが発生しました。 ログイン画面にある「パスワードをお忘れですか?」というリンクをクリックしても、画面が切り替わらず、ずっとログイン画面のままという現象です。…
Shopifyではノーコードでメニューを管理できるため、基本的なナビゲーションの実装はとても簡単です。 しかし、実際の運用を考えると「PCとスマホで異なるメニュー構成にしたい」という要望は意外とある‥業態やサイトデザイン…
Shopifyには、「recommendations」という独自アルゴリズムを使ったおすすめ商品表示機能があります。 閲覧履歴や販売データをもとに自動で関連商品を提案してくれる便利な仕組みですが、運営を続けていると「この…
Shopifyでは、適切なタイミングでアップセルやクロスセルを行い、関連商品を効果的に提案することが平均注文額の向上に繋がると言われています。 そんな中で便利なのが、Shopifyが提供する自動おすすめ機能「recomm…
近年ウェブサイトのレイアウトを見ると、サイドバーを持たない1カラム構成が主流になってきているように感じます。 しかしECサイトのPC版に目を向けると、依然としてサイドバーを設置しているケースが少なくありません。 理由の一…
以前の記事「【Shopify Liquid】スニペットファイルを呼び出す「render」 引数と渡り値とは?」では、render タグの基本的な仕組みについてご紹介しました。 また「render」を使ってスニペットファイ…
Shopifyのテンプレートファイルを構成する要素は多岐にわたりますが、大きく分ければ「HTML+Liquid」と「スキーマJSON」が二本柱と言えるでしょう。 もちろん、CSSやJavaScriptもテーマの完成度を高…
Shopifyのテーマ開発において欠かせないLiquidタグのひとつが「render」です。 これは「スニペット(snippets)」と呼ばれるコードの部品を呼び出すためのタグで、同じコードを繰り返し使いたいときや、テン…