# 商品詳細ページのレイアウトについて

**URL:** <https://community.shopify.com/t/topic/26889>\
**Category:** 総合的なディスカッション\
**Created:** [December 2, 2020, 12:48pm UTC](https://community.shopify.com/t/topic/26889 "2020-12-02T12:48:49Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

商品詳細ページで、カートボタン下に「サイズ」「配送」などのボタンを置き、同一ページ内の該当説明箇所へ切り替え・移動させたい、というレイアウト実装の相談。添付画像が要件理解の中心になっている。 

提示された解決案は、商品説明欄を区切り文字で分割して各情報を別ブロック化する方法。具体的には `product.description` を `【タイトル２】` と `【タイトル３】` で split し、商品説明・配送/送料・商品詳細の3要素に分けて Liquid 変数へ格納している。 

その後、分割した変数をHTMLへ出力し、HTML/CSSのみでタブ表示するサンプルコードを流用して実装する案が示された。SCSSは特に変更不要とのこと。 

結論として、要望のUIはタブ形式で実現可能という回答で、アンカーリンクそのものではなく、商品説明文を構造化して切り替え表示する方向の具体策が共有された。最終的な実装確認は投稿者側の試行段階で、スレッド上で完了報告までは出ていない。

<div class="post-metadata">

**Author:** ![aiba01](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@aiba01](https://community.shopify.com/u/aiba01)\
**Post date:** [December 2, 2020, 12:48pm UTC](https://community.shopify.com/t/topic/26889/1 "2020-12-02T12:48:49Z")

</div>

お世話になっております。

商品詳細ページのレイアウトについて質問させていただきます。

添付画像のようにカートに入れるボタンの下に、サイズや配送などのボタンをつけるにはどのようにしたらよいでしょうか？

一枚のページの中で説明文章があり、ボタンを押すとそこの部分に飛ぶような形にしたいです。

宜しくお願い致します。

 ![サイズ・詳細.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/e/b/4eb1b2b53cc81449048bf879511425102736f9c5.png)

 ![shopify2.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/8/d88d2348ab485fdf3b358160f6bb6e2eb530348c.png)

---

<div class="post-metadata">

**Author:** ![Anonymous\_4d9e7ed625bfa1bbc1782320693c1e6d](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_4d9e7ed625bfa1bbc1782320693c1e6d/32/312468_2.png) [@Anonymous\_4d9e7ed625bfa1bbc1782320693c1e6d](https://community.shopify.com/u/Anonymous_4d9e7ed625bfa1bbc1782320693c1e6d)\
**Post date:** [December 5, 2020, 4:26pm UTC](https://community.shopify.com/t/topic/26889/2 "2020-12-05T16:26:03Z")

</div>

商品毎に持っている情報が違うと思いますので、商品説明欄に下記のように情報を整理します。

 ![商品説明欄.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/8/d8f19a45a6d33f8e1cd129a8b1e873542ed62dfe.png)

【タイトル２】と【タイトル３】を使って文字列を3分割します。

```markup
{% 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/](https://tadtadya.com/toggle-tab-display-with-html-and-css-alone/)

HTML

```markup

{{product_description}}

{{product_shipping}}

{{product_details}}

```

※SCSSは、変更していません。

下記のようにタブに表現できました。

 ![商品説明.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/0/a/2/0a2c4d7ff9d8ec13d50b262d220a297b8cca66c1.png)

 ![配送・送料.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/5/d588754f05c5b1125c94ea34e64c1dc5829814c4.png)

 ![商品詳細.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/c/3ce56fff85e89db3528ac856daa4ce7e137d3d61.png)

今回は情報量が少なかったためタブに表現してみましたが、要領は同じかと思います。  
一度、お試しください。