Multiple Collections on One Page

Highlighted
Tourist
31 0 1

Dear Shopify Gurus,

I would like to add multiple collections to one page so I can have something like:

 

CHAIRS
(product) (product) (product)
(product) (product) (product)

 

TABLES
(product) (product) (product)
(product) (product) (product)

 

SOFAS
(product) (product) (product)
(product) (product) (product)

 

 

I have read this thread but I do not understand.

 

Someone PLEASE help. I feel like this should be very simple.

 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 42

You can do this by setting up multiple for-loops in a template. I'd probably create a new page template, assign it to a new page, then do something like this:

{{ collections.collection-1.title }}
{% for product in collections.collection-1.products %}
// code to output products
{% endfor %]

{{ collections.collection-2.title }}
{% for product in collections.collection-2.products %}
// code to output products
{% endfor %]

{{ collections.collection-3.title }}
{% for product in collections.collection-3.products %}
// code to output products
{% endfor %]

// etc

- tetchi

www.tetchi.ca | www.twitter.com/t3tchi
0 Likes
Highlighted
Tourist
31 0 1

Thank you, Tetchi.

I have an idea this is exactly what I'm talking about but I know next-to-nothing about Liquid and could use some hand-holding.

If my collection is called 'tables' where would I add that to "{{ collections.collection-3.title }}" and what is the "//code to output products"? do I decide this?

 

I just want these collections to display like they do on my catalog page.

 

Do you know of a good article for me to read about this specifically?

 

Thanks heaps!

0 Likes
Highlighted
Tourist
31 0 1

Can someone PLEASE clarify this?

The documentation on "Theme From Scratch" seems good but when I paste the code into my template, nothing happens.

 

Anyone... Anyone?

0 Likes
Highlighted
Shopify Partner
3 0 0

Hi,

I'm not very familiar with Shopify (yet), but I can try to help a bit:

On any page, you should be able to add the following code.

Make sure you're not in an part where the collection is already defined (ie there is no {% assign "collection" = ... %} tag or anything like that before, I think that might screw this up.

(I'll try to explain what each line does in the code below):

 

{% for collection in collections %}
<h2>{{ collection.title }}</h2>
{% for product in collection.products %}
<h3>{{ product.title }} </h3>
<p>{{ product.description }}</p>
{% endfor %}
{% endfor %}

 

Here's the code with comments in parenthesis:

 

{% for collection in collections %} (Loops through collections, so every collection you have, probably "tables", "chairs" as you said. This just gives us those 'objects', doesn't yet print out anything.)
<h2>{{ collection.title }}</h2> (Now that we're in the loop, we're handling one of those collections. This will print out the title of that collection.  So if the first collections is called "tables", this will print out "tables". (as a <h2> header...))
{% for product in collection.products %} (Now we're still inside the collection loop, and we're looping through each product... Again, this is just logic, giving us the possiblity to say 'product' and access the product we currently have.)
<h3>{{ product.title }} </h3> (So now we're at the product level, as we loop through collections and products in each collection, this will print out the title of the product)
<p>{{ product.description }}</p> (then print out the description for the product)
{% endfor %} (here we end the product loop)
{% endfor %} (here we end the collection loop)

 

If you want to add any information about the products, you just add a new {{ product.xxxx }} line inside the {% for product in collection.products %} -loop. Just replace the xxxx with any of the variables shown for products in the cheatsheet: http://cheat.markdunkley.com/ 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 150

You don't need to loop through all collections, just directly get the collection you want. If you have tons of collections then looping through all of them is harsh on the DB :)

 

{% for product in collections.shirts.products limit: 12 %}
collection loop display code
{% endfor %}

{% for product in collections.pants.products limit: 12 %}
collection loop display code
{% endfor %}

 

 

http://shopifyplus.com ::: http://twitter.com/bacchus
Highlighted
Tourist
18 0 1

I figured out how to do this thanks to you guys. If anyone wants to see the code that I used to get it to work go here, 3rd comment: http://ecommerce.shopify.com/c/ecommerce-design/t/how-to-separate-catalog-page-by-category-132207

Make a new Page template and follow the code. 

0 Likes
Highlighted
Tourist
36 0 1

I am now familiar creating a sub-collection of my parent collection. but the problem is that, the collection is not displaying very well. here's what I mean http://www.jaypees.com.ph/collections/electronics the Mobile Accessories is not straighly displaying on the page. It's on the very edge. How can I correct this? And I also want to create a sub-collections of Mobile Accessories such as headset, cases etc. How should I do that?

0 Likes
Highlighted
Tourist
18 0 1

For having them display correctly, find what they are listed under (any class, id?) and use CSS to add some margin to the left side. Sub-categories, I believe are only available by using tags on products, but not sure how that works.

0 Likes
Highlighted
Tourist
36 0 1

i am new to this and i have no knowledge about web designing. i don't even know what CSS mean :(

0 Likes