FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

wakano
Shopify Partner
1 0 0

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

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

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

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

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

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

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

 

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

1 件の受理された解決策

_osamu_iwasaki_
Shopify Partner
189 47 195

成功

①ブランド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 %}

 

元の投稿で解決策を見る

1件の返信1

_osamu_iwasaki_
Shopify Partner
189 47 195

成功

①ブランド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 %}