ShopifyやEコマースに関連することを話してみよう
お世話になっております。
商品詳細ページのレイアウトについて質問させていただきます。
添付画像のようにカートに入れるボタンの下に、サイズや配送などのボタンをつけるにはどのようにしたらよいでしょうか?
一枚のページの中で説明文章があり、ボタンを押すとそこの部分に飛ぶような形にしたいです。
宜しくお願い致します。
商品毎に持っている情報が違うと思いますので、商品説明欄に下記のように情報を整理します。
【タイトル2】と【タイトル3】を使って文字列を3分割します。
{% assign product_description = product.description | split: "【タイトル2】" | first %}
{% assign product_shipping = product.description | split: "【タイトル2】" | last | split: "【タイトル3】" | first %}
{% assign product_details = product.description | split: "【タイトル3】" | last %}
3分割したそれぞれのオブジェクト{{product_description}}、{{product_shipping}}、{{product.description}}を使用して、HTML/CSSなどでコーディングします。
下記のサイトのサンプルコードを流用させていただきました。
https://tadtadya.com/toggle-tab-display-with-html-and-css-alone/
HTML
<div class="product-single__description rte">
<div class="sample">
<input type="radio" id="tab1" class="radio" name="tab" checked="checked" ><label class="tab-title title1" for="tab1">商品説明</label>
<input type="radio" id="tab2" class="radio" name="tab" ><label class="tab-title title2" for="tab2">配送・送料</label>
<input type="radio" id="tab3" class="radio" name="tab" ><label class="tab-title title3" for="tab3">商品詳細</label>
<div class="tab-body">
<div class="body1">{{product_description}}</div>
<div class="body2">{{product_shipping}}</div>
<div class="body3">{{product_details}}</div>
</div>
</div>
</div>
※SCSSは、変更していません。
下記のようにタブに表現できました。
今回は情報量が少なかったためタブに表現してみましたが、要領は同じかと思います。
一度、お試しください。
オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024Shopifyパートナーとして活躍している場合、クライアントのためにストア構築や移行を行うことがございます。今回のブログ記事では移行をスムーズに行い、移行後も問題なく運営できるため...
By Mirai Feb 25, 2024Shopifyではチャージバックや不正注文の被害に遭うことが販売社様にとってストレスが多く、困難な状況である事を理解しています。販売社様の中ではチャージバックを存じていない方、不正...
By JapanGuru Feb 12, 2024