Nested collection with pages

Highlighted
New Member
4 0 0
Hello there,
I am developing a POD mobile cases site. Actually having difficulty in nesting the brand and models.
So what i want to achieve is this,
On main menu i want a to display Mobile cases and when user clicks to mobile cases it shoud be directed to a brand page which has multiple brand buttons Iike Apple, Samsung, Xiaomi etc.
So if user selects Apple it should redirect to a page of collections like iPhone 6, iPhone 7 etc. When user click it should display all the cases/products available for iphone 6.
Any help is greatly appreciated.
Thanks
0 Likes
Excursionist
46 1 2

So there are a couple of ways to go about doing something like this and involves coding - i'll drop a brief overview of 1 option below and if it doesn't work for you we can adjust it accordingly.

 

  • To start, you'll want to create vendor Collection pages ( Apple, Samsung, Xiaomi, etc).
  • You can create a new collection template, and name it 'branding' (or whatever really)
  • Assign your 'Mobile Cases' collection to the 'Branding' template you just created.
  • In simplest coding terms, you can get the vendor descriptions like this
    • {% assign vendorsInCollection = collection.products | map: 'vendor' %}
      {% for vendor in vendorsInCollection %}
        {% assign vendorHandle = vendor | handleize %}
        {% assign vendorCollection = collections[vendorHandle] %}
        {% comment %}
          Now {{ vendorCollection }} returns all the same properties as {{ collection }} but for its respective collection. So you can call its URL, Its Image, Its Title, or description.
        {% endcomment %}
        <div>
         <h1>{{ vendorCollection.title }}</h1>
        <img src="{{vendorCollection.image | img_url: 'master' }}"/>
        </div>
      {% endfor %}

Now you can do the same thing for a 'subbrand' template, but instead of mapping 'vendor' you can do {{ collection.product | map: 'type' }} to return the various product types.

0 Likes
New Member
4 0 0

Thanks for reply sir definately trying this out.

Will update here once successfully done.

0 Likes
New Member
4 0 0

Hello sir,

I have been trying to accomplish this task but does not works.

is there any other way to do?

Some more information i have to provide,

Theme i am using is Debut

Let me re-frame my task 

I want to create a menu button 'Mobile case'. when a user hits mobile case a new page shall appear with all Brands like APPLE, SAMSUNG, MOTOROLA etc.,

now if user clicks on Apple, it should redirect to a page with All models available in apple like Iphone 5, Iphone 6 etc...

after clicking Iphone 5 all mobile cases product compactible to mobile cases shall appear.Untitled.pngMobile BrandsUntitled2.pngModelsUntitled3.pngactual product collection

0 Likes