Collection - Feature a subset of collections on a page

Solved
Highlighted
New Member
3 0 0

Wow you just saved me probably 2 days of headache. Thanks, man...

0 Likes
Highlighted
New Member
3 0 0

Hi there, 

I am trying to make a page of subcategories after a user has clicked on the main collection item.

How do i redirect the main collection button, to go to the new navigation menu i have created?

 

I am also looking to put a title ontop of the subcategory, which is the same name as the main collection's title.


Thank you

0 Likes
Highlighted
New Member
3 0 0

@rendrteam wrote:

Hi there, 

I am trying to make a page of subcategories after a user has clicked on the main collection item.

How do i redirect the main collection button, to go to the new navigation menu i have created?

 

I am also looking to put a title ontop of the subcategory, which is the same name as the main collection's title.


Thank you


If you follow this guide, when you create your new "Collections" or "Shop" page, it will be a sub-menu.  You can create multiple pages/sub-menu's to segregate them further.  As far as the title, this guide automatically titles the collection with the page title used as the sub-menu. If you wanted to change that you would need to modify the code from GitHub that you placed in your "page.lists-collections" at the top in the very beginning at line 3;

 

 

<div class="page-width">
  <header class="section-header text-center">
    <h1>{{ page_title }}</h1>
  </header>

Change the h1 page_title command to whichever element you want it to reflect.  I wouldn't suggest hard-coding a menu name there unless you only need the 1 sub-menu as it would cause a myriad of issues trying to replicate additional templates.

 

If you only need the 1 sub-menu I would consider simply re-visiting how you tag your products.  If you set up your "Collections" page to create tiles by product "type" and then use rules for product "tags" to make filtering easy you make accomplish your goals without modifying your template.

0 Likes
Highlighted
Tourist
6 0 4

Hi all - I've been going through a similar process to a lot of you, trying to get the page to display collections in rows instead of vertically. I tried all of the tips on this page but nothing worked for me. But in the end I solved it, and I wanted to just share my experience in case it's of use to anyone struggling with this issue.

I took a different approach based on the fact that the template code wasn't written specifically for the Minimal theme, so some elements need to be modified to make them work properly. I found the main culprit responsible for the vertical stacking was the line:

 

<div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">

 

I changed this to:

 

<div class="grid-uniform grid-link__container">

 

...and this seemed to do the trick. After that, I spent some time playing around with the formatting and adding breadcrumb navigation to the head of the page, which now looks this:

 

<div class="grid">

<div class="grid__item post-large--two-thirds push--post-large--one-twelth">

<div class="section-header">
<div class="section-header section-header--breadcrumb">
{% include 'breadcrumb' %}
</div>
<h1 class="section-header--title">{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>

 

So after a lot of hours, I finally have the page I wanted and it works brilliantly. I'm not an expert programmer, so don't ask me to explain what's going on here,  but I hope this has been of help. Good luck with your code wrangling!

0 Likes
Highlighted

Great article and very helpful.

I group my products page with filtered tags, so I wanted a way to make my collection subset link to the collection, but use the subcollection name as a filter, so that once on the products page, the filter could be easily changed, effectively switching between collections.

 

I am new to this language, and there may be a better way of doing this, but the below code seems to work.  I also hide the subcollection if there are no products in it.  

 

 
    {% for link in linklists[page.handle].links %}
 
      {% if link.type == 'collection_link' %}
 
        {% comment %}
        If we have a collection link.
        {% endcomment %}   
 
        {% assign collection = link.object %}
        {% assign number_of_links = number_of_links | plus: 1 %}
 
    {% comment %}
          Determine the link for the sub-collection by using the linkedlist page handle (=collection handle)
                 and appending the subcollection name as a category filter
    {% endcomment %}
    {% assign subcollection_name = link.url | remove: "/collections/" %}
        {% assign subcollection_link = "/collections/" | append: page.handle | append: "/category_" | append: subcollection_name %}
 
        {% comment %}
        If we have products in the collection.
        {% endcomment %}  
    
{% if collection.products_count > 0 %}
    <div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
            <div class="grid__image product-grid-image">
                <a href="{{ subcollection_link }}" class="grid-image--centered">
                {% comment %}
                  Bring in the featured image of the first product in the collection if no collection
                  image has been uploaded for it.
              {% endcomment %}
                {% if collection.image %}
                  <img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}">
                {% else %}
                  {% assign product = collection.products.first %}
                  <img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}">
                {% endif %}
                </a>
              </div>
              <p class="collection-grid__item-title">
                <a href="{{ subcollection_link }}" class="collection-item__title">{{ link.title }}</a> 
              </p>
            </div>
    {% endif %}

 

0 Likes
Highlighted
New Member
3 0 0

hey, I use minimal to and used you breadcrumb code and changed div class to <div class="grid-uniform grid-link__container">, but the products are in a vertical row. what do you else changed to put them in a horizontal row? thx

0 Likes
Highlighted

Hi 

I am using the supply theme, so not sure how this differs to minimal.

 

If it is any help, below is the code that appears above the extract that I provided in the earlier post.  It does have specific code there for minimal.

 

{% comment %}
Collections are listed here.
{% endcomment %}

{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}

{% if uses_minimal_framework contains 'Liquid error' %}
{% assign uses_minimal_framework = false %}
{% assign grid_item_width = 'large--one-quarter large-up--one-quarter medium--one-third medium-up--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = 'span3' %}
{% endif %}

{% assign image_size = 'small' %}

{% if linklists[page.handle].links.size > 0 %}

{% assign number_of_links = 0 %}

<div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">

0 Likes
Highlighted
New Member
2 0 0

This all worked but my collection images are blurry on the new landing page - how do I fix that?

0 Likes
Highlighted
Tourist
5 0 1

I've tried everything in this thread, and still, no matter what all I get is one long column, and it won't do multiple columns no matter what. I'm currently using the Parallax theme. Anyone know if it's a bugged theme or something?

0 Likes
Highlighted
New Member
2 0 0
#MainContent .grid-uniform {	
display
: flex !important;
flex
-wrap: wrap !important; }

This was posted by  in the this thread:https://community.shopify.com/c/Shopify-Design/How-to-align-collections-in-grids/m-p/676282/highligh...

 

That got the arrangement wrap set for me.

 

I'm still having issues with mobile padding/margins for the right side and bottom.

 

So far, I have discovered if you use the following at the end of theme.scss.liquid:

#MainContent .grid__item{    
margin
-bottom:36px !important; }

 You'll make the spacing on the bottom look better, BUT it affects everything else on the website too, including individual product pages that were fine.

 

If you do this:

#MainContent .grid__item{    
margin
-right:-15px !important; }

 You'll correct the right side, BUT it again affects everything else on the website. The gutters (I'm assuming the middle spaces is what those are called), are reduced. Likewise, you can obtain a similar result if you use margin-left: -15px as well.

 

The question for me is how to ONLY affect the collection image grid setup on the collection page, while leaving the products elsewhere alone. There something in the code itself from github that needs adjusted? Or collection specific setting in the theme.scss?

0 Likes