コレクションごとのページデザインについて

解決済
新規メンバー
1 0 0

1つのメインブランドと、3つのサブブランドの計4ブランドの商品を1ストア内で販売する予定です。

通常、コレクションで商品をまとめた場合、それらは自動的に商品一覧となって表示される認識ですが、添付の図のように

コレクションを選択後まずはサブブランドごとの専用ページを表示させ、そこから商品一覧やブランド説明などのページへ遷移できるようにする方法はございますでしょうか。

また、以下の実現が可能かどうかも併せてご教示いただけますと大変助かります。

1)ブランドごとにヘッダーロゴを変更する

2)ブランドごとに(ハンバーガー)メニューの内容を変更する

3)ブランドごとに使用するフォントやデザインを変更する

 

お手数をお掛けしますが、よろしくお願いいたします。サイト構造イメージ図サイト構造イメージ図

0 件の「いいね!」
探検家
49 13 72

成功

①ブランドBCDの「トップページ」と、ブランドBの「説明ページ」は、それぞれ複製した「pageテンプレート」で作成。
テンプレート名には「page.brand-b」「page.brand-c」と名付ける。

スクリーンショット 2020-11-28 10.49.17.png

 

 

 

 

 

②ブランドABの「商品一覧ページ」は、それぞれ複製した「collectionテンプレート」で作成。
テンプレート名には「collection.brand-b」「collection.brand-c」と名付ける。

スクリーンショット 2020-11-28 10.49.27.png

 

 

 

 

 

③ブランドABCそれぞれのヘッダーを「sectionテンプレート」で作成。

スクリーンショット 2020-11-28 10.52.07.png

 

 

 

 

 

④テンプレート名を判定して、「themeテンプレート」からヘッダーの読み込み先を変える。「商品詳細ページ」だけはベンダー名で判定する。
(1)ロゴ、(2)ハンバーガー、(3)フォントも同様の判定で可能です。

 

{% if template == 'index' %}
  {% section 'header-a' %}

{% elsif template contains 'brand-b' %}
  {% section 'header-b' %}

{% elsif template contains 'brand-c' %}
  {% section 'header-c' %}

{% elsif template == 'product' %}
  {% if product.vendor contains 'brand-b' %}
    {% section 'header-b' %}
  {% elsif product.vendor contains 'brand-c' %}
    {% section 'header-c' %}
  {% else %}
    {% section 'header-a' %}
  {% endif %}

{% else %}
  {% section 'header-a' %}
{% endif %}