Multiple collections in one page

Highlighted
Tourist
17 0 1

Hi everyone, been searching high and low with no luck on how to display multiple collections on 1 page like you would have on a homepage. I've managed to copy/past the code from the index.liquid into a new template but i just don't know what to change to make it display the collection that i want. Right now the code is setup to take the collection from the theme settings. I want to change that to manual (hard code it) in the page itself. Code is below:

<!--Collection2  -->
  {% if settings.frontpage_collection2 != blank %}
    <h2 class="title">{{ settings.frontpage_collection2_title }}</h2>
    {% if collections[settings.frontpage_collection2] != blank %}
      <div class="section clearfix">    
        {{ collections[settings.frontpage_collection2].description }}
      </div>
    {% endif %}
    {% assign collection = '' %}
    {% assign products = collections[settings.frontpage_collection2].products %}
    {% assign products_per_row = settings.frontpage_products_per_row %}
    {% include 'product-loop-home' with settings.homepage_sidebar %}
    <br class="clear" />
  {%comment%}
   <div style="margin-left: 0 !important;" class="sixteen columns center">
   <a style="width:300px; margin: 0 auto; text-align:center;" class="action_button center" href="http://shop.solehab.com/collections/print">View All </a>
    </div> {%endcomment%}
    {% endif %}

 

Thanks in advance for any help with this.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
391 1 43

Hey, Alistair!

Thanks for posting. :)

We do have a guide here which allows you to feature collections on a page. It does so via the Navigation and pages section of your admin, without requiring you to edit any code.

The guide has each step outlined, though do let us know if you need a hand at any stage!


Koreen W | Shopify 
support@shopify.com

0 Likes
Highlighted
Tourist
17 0 1

Hi Koreen,

Thank you for the reply, i unfortunatly already had a look at that page and it displays Images of each collection, not the products in each collection. The code i pasted above does exsacly what i need it to do however it grabs the information of what collection to display from the theme settings. Since i am not good at coding i dont know what to change to hardcode it to collection i choose.

0 Likes
Highlighted
New Member
3 0 0

This is exactly the issue I have as well...

I have closely followed the directions in the article you linked, Koreen W, but it only displays a thumbnail of one product for each collection...

I was hoping I could hack the "linklist" object but that data object doesn't include any product information.

So essentially, what Alistair and I are trying to do is to make multiple collection product list queries on one single page...

Is that even possible?

Do I need to write an AJAX request to the API just to accomplish this?

0 Likes
Highlighted
Shopify Partner
1 0 1

Same here, I've been searching for hours now and I still can't find a way to show multiple collections on one page, for example:

Collection 1

(Then grid of all Collection 1 products)

Collection 2

(Then grid of all Collection 2 products)

etc

 

Highlighted
Shopify Partner
5 0 0

No one can answer this? Seems like it should be easy

0 Likes
Highlighted
Tourist
20 0 0

Yes, I'd like to be able to do this too!

0 Likes
Highlighted
Excursionist
15 2 0

You can try to put the collections manually and do the loop with the name whatever you want:

 

{% for product in collections['75-off'].products limit: '12'%}
{% include 'product-grid-item' %}
{% endfor %}

 

<div id="CollectionSection-{{ block.id }}" data-section-id="{{ block.id }}" data-section-type="featured-collection">
    {% if block.settings.title != blank %}
      <div class="page-width">
        <div class="section-header">
          <h2 class="section-header__title" {% if block.settings.align_text == true %}style="text-align: center;"{% endif %}>
            75% Off
            {% if block.settings.view_all and block.settings.rows == 1 %}
              <a href={{ collections[block.settings.collection].url }}" class="section-header__link">{{ 'collections.general.all_of_collection' | t }}</a>
            {% endif %}
          </h2>
        </div>
      </div>
    {% endif %}
    <div class="page-width page-width--flush-small">
      <div class="grid-overflow-wrapper">
        <div class="grid grid--uniform" data-aos="overflow__animation">
          {% assign grid_item_width = 'small--one-half medium-up--one-third' %}

          {% case per_row %}
          {% when 1 %}
            {%- assign grid_item_width = '' -%}
          {% when 2 %}
            {%- assign grid_item_width = 'medium-up--one-half' -%}
          {% when 3 %}
            {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
          {% when 4 %}
            {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
          {% when 5 %}
            {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
          {% endcase %}

	    {% for product in collections['75-off'].products limit: '12'%}
              {% include 'product-grid-item' %}
            {% endfor %}
            {% if block.settings.view_all %}

              {% if block.settings.rows > 1 %}
                <div class="grid__item small--hide text-center">
                  <a href={{ collections[block.settings.collection].url }}" class="btn">{{ 'collections.general.all_of_collection' | t }}</a>
                </div>
              {% endif %}

              <div class="grid__item grid__item--view-all text-center {{ grid_item_width }} medium-up--hide">
                <a href="{{ collections[block.settings.collection].url }}" class="grid-product__see-all">
                  {{ 'collections.general.all_of_collection' | t }}<br>
                  {{ collection.products.size }} products
                </a>
              </div>

            {% endif %}

        </div>
      </div>
    </div>
  </div>

So you can repeat this code....

Is totally manual, but worked for me...

0 Likes
Highlighted
Shopify Expert
104 0 12

Here is a generic tutorial to do this on any theme with step by step instructions along with links to specific custom tutorials on how to accomplish this on most free themes in a way that will allow you to customize your page in the theme editor. Note some premium themes such as those by outofthesandbox like Mobilia theme already include this functionality.

 

0 Likes
Highlighted
Tourist
10 0 1

To achieve something like this:

 

Collection 1 :

 - Product Grid of collection 1

Collection 2:

 - Product Grid of collection 2

Collection 3 :

 - Product Grid of collection 3

You need to add 2 loops, first loop is to show the collection, then a nested loop which shows the products under that particular products.

<ul>
  {%- for collection in collections -%}
     <h3> {{ collection.title }}</h3>
      {%- for product in collection.products -%}
         <li>
                {% product.title %}
                {% product.price %}
              /****PRODUCT STUFF HERE****/
         </li>
      {%- endfor -%}
  {%- endfor -%}
</ul>

Give this a try, this might help :)

0 Likes