Multiple collections in one page

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
Shopify Staff
Shopify Staff
392 1 32

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
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
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
Shopify Partner
1 0 0

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

 

0 Likes
Shopify Partner
4 0 0

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

0 Likes
Tourist
18 0 0

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

0 Likes
Tourist
12 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
Shopify Expert
104 0 9

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