お世話になっております。
商品詳細ページのレイアウトについて質問させていただきます。
添付画像のようにカートに入れるボタンの下に、サイズや配送などのボタンをつけるにはどのようにしたらよいでしょうか？
一枚のページの中で説明文章があり、ボタンを押すとそこの部分に飛ぶような形にしたいです。
宜しくお願い致します。
商品毎に持っている情報が違うと思いますので、商品説明欄に下記のように情報を整理します。
【タイトル２】と【タイトル３】を使って文字列を3分割します。
{% assign product_description = product.description | split: "【タイトル２】" | first %}
{% assign product_shipping = product.description | split: "【タイトル２】" | last | split: "【タイトル３】" | first %}
{% assign product_details = product.description | split: "【タイトル３】" | last %}
3分割したそれぞれのオブジェクト{{product_description}}、{{product_shipping}}、{{product.description}}を使用して、HTML/CSSなどでコーディングします。
下記のサイトのサンプルコードを流用させていただきました。
https://tadtadya.com/toggle-tab-display-with-html-and-css-alone/
HTML
{{product_description}}
{{product_shipping}}
{{product_details}}
※SCSSは、変更していません。
下記のようにタブに表現できました。
今回は情報量が少なかったためタブに表現してみましたが、要領は同じかと思います。
一度、お試しください。
1 Like