How to align collections in grids?

Solved
dayaima
Tourist
6 0 0

Hello, I would want to change how many collections appear in a row depending if the user is on a mobile or on a desktop.

 

I am using the "Simple" theme. In my store I need a page to show many collections. I followed the link https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/...

 

1- I created a page.list-collection template and added the code indicated by the link.

2- I created a page and assigned the template.

3- I created a menu in Navigation to link and in this way in the menu, the page shows many collections.

 

The problem I have is that the collections are not displaying correctly. https://invitacuba.com/pages/ciudad-holguin In the first row it is showing 4 collections, in the second row it shows 1 collection and in the third row it shows 3 collections. I need these collections to be displayed in a large view with 4 collections per row and in a small view with 2 collections per row.

 

Thank you.

 

The template code that I create is as follows

 

{% 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 = 'large' %}

{% if linklists[page.handle].links.size > 0 %}
    
  {% assign number_of_links = 0 %}
    
  <div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">

    {% 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 %}

        <div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
          <div class="grid__image product-grid-image">
            <a href="{{ link.url }}" 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="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
          </p>
        </div>
    
        {% if uses_minimal_framework %}
          {% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
        {% endif %}

      {% elsif link.type == 'page_link' %}

        {% comment %}
        If we have a page link.
        {% endcomment %}

        {% assign number_of_links = number_of_links | plus: 1 %}

        {% assign linked_page = link.object %}                    
        {% assign have_image = false %}

        {% comment %}
          Does the page contain an image? If so, let's use it.
        {% endcomment %}

        {% if linked_page.content contains '<img' %}

          {% assign have_image = true %}
          {% assign src=linked_page.content | split: 'src="' %}
          {% assign src=src[1] | split: '"' | first %}
          {% capture image_suffix %}_{{ image_size }}.{% endcapture %}
          {% assign src=src | replace: '_small.', image_suffix | replace: '_compact.', image_suffix | replace: '_medium.', image_suffix | replace: '_large.', image_suffix | replace: '_grande.', image_suffix %}
        
        {% comment %}
          If the page contains no image, and that page features collections, let's grab the image of the first
          collection on it.
        {% endcomment %}

        {% elsif linklists[linked_page.handle].links.size > 0 and linklists[linked_page.handle].links.first.type == 'collection_link' %}

          {% assign have_image = true %}
          {% assign collection = linklists[linked_page.handle].links.first.object %}

          {% if collection.image %}
            {% assign src=collection | img_url: image_size %}
          {% else %}
            {% assign src=collection.products.first | img_url: image_size %}
          {% endif %}

        {% endif %}

        <div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
          <div class="grid-image product-grid-image">
            <a href="{{ link.url }}" class="grid-image--centered">
              {% if have_image %}
                <img src="{{ src }}" alt="{{ link.title | escape }}" />
              {% else %}
                <img src="{{ link.title | handle | append: '_' | append: image_size | append: '.png' | file_url }}" alt="{{ link.title | escape }}" />
              {% endif %}
            </a>
          </div>
          <p class="collection-grid__item-title">
            <a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
          </p>
        </div>
    
        {% if uses_minimal_framework %}
          {% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
        {% endif %}

      {% endif %}

    {% endfor %}

  </div>

  {% if number_of_links == 0 %}

  <div class="grid">
    <div class="grid__item grid-item rte text-center">
      <p>
        There are no links of type <i>Collection</i> in your <b>{{ page.title }}</b> link list.
        Go ahead and <a href="/admin/link_lists/{{ linklists[page.handle].id }}" target="_blank">edit your link list</a> to use links that point to collections.
      </p>
    </div>
  </div>

  {% endif %}

{% else %}

<div class="grid">
  <div class="grid__item grid-item rte text-center">
    <p>
      You do not have a link list with a handle set to <kbd>{{ page.handle }}</kbd>, or you do and it's empty. 
      Go ahead and create a link list called <b>{{ page.title }}</b> on your <a href="/admin/links" target="_blank">Navigation page</a> and populate that link list with links that point to collections, to see collections listed here.
      Make sure the link list also has a handle set to <kbd>{{ page.handle }}</kbd>.
    </p>
  </div>
</div>

{% endif %}

<style>
  kbd { 
    background-color: #FBFBE4;
    padding: 1px 4px;
    border-radius: 3px;
  }
</style>

 

Accepted Solution (1)

Accepted Solutions
pioneer100
Shopify Partner
1118 145 481

This is an accepted solution.

-put this css at the bottom of file theme.scss.liquid

path: online store->theme->edit code->assets->theme.scss.liquid

@media only screen and (max-width: 600px) {
  .grid__item .grid__item:nth-child(odd) {
      padding-left: 9px !important;
   }
}
#MainContent .grid-uniform {
	display: flex !important;
    flex-wrap: wrap !important;
}

-if you have more issues ask again, i am happy to help.
- Give me like and Mark my answer as accepted solution.

 

Thank you

If helpful, Please Like and accept The Solution.

View solution in original post

Replies 170 (170)
JoesIdeas
Shopify Expert
1669 143 428

You can use CSS "clear" for the first product in each row to reset the positioning and put it back to the left:

 

clearing the row.png

 

To let the code know which item to clear, you can use cycle or for loop indexing to add a class to every X item on mobile and every Y item on desktop.

 

Here's some more information from the liquid docs: https://shopify.dev/docs/liquid/reference/tags/iteration-tags

 

Read through your code to understand what each piece does, then on a test theme apply the cycle / indexing class and test it out on different screen sizes.

If you get stuck and need some professional help feel free to reach out at speedboostr.com/contact. Our team of developers work on Shopify sites and can sort this out for you.

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
pioneer100
Shopify Partner
1118 145 481

This is an accepted solution.

-put this css at the bottom of file theme.scss.liquid

path: online store->theme->edit code->assets->theme.scss.liquid

@media only screen and (max-width: 600px) {
  .grid__item .grid__item:nth-child(odd) {
      padding-left: 9px !important;
   }
}
#MainContent .grid-uniform {
	display: flex !important;
    flex-wrap: wrap !important;
}

-if you have more issues ask again, i am happy to help.
- Give me like and Mark my answer as accepted solution.

 

Thank you

If helpful, Please Like and accept The Solution.
dayaima
Tourist
6 0 0

Hello candiSoft,

 

Thank you for the swift and extremely helpful response! We followed all the step you provided and it worked.

 

This completely resolved everything - and we can't thank you enough for your assistance in this matter.

 

Thank you very much.

pioneer100
Shopify Partner
1118 145 481

hiii,  I am Sharad from candiSoft Analytica.
- you can ask me again for further assistance in design & coding.
-you can contact me via candisoft100@gmail.com

 

-can I have your contact? 
if yes then send me A private message or you can mail me.

 

Thank You

If helpful, Please Like and accept The Solution.
FrederikBolt
Tourist
6 0 1

Hi - used your code, and it helped alot, but still seem to have a bit problem about the arrangement. Any suggestions? Skærmbillede 2020-03-10 kl. 18.32.13.png

pioneer100
Shopify Partner
1118 145 481
Wait i am giving solution. Wait for 10 minutes.
If helpful, Please Like and accept The Solution.
pioneer100
Shopify Partner
1118 145 481

give me page url in which you have problem

If helpful, Please Like and accept The Solution.
pioneer100
Shopify Partner
1118 145 481

put this code at the end of theme.scss.liquid file

 

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

-if you have more issues tell me
and give likes 

If helpful, Please Like and accept The Solution.
FrederikBolt
Tourist
6 0 1

Really appreciate your help, but it stills seems kinda off.. 😞

pioneer100
Shopify Partner
1118 145 481

can you please explain me how do you want it to look like with any image?

If helpful, Please Like and accept The Solution.
FrederikBolt
Tourist
6 0 1

Yes ofc. like this: https://libratech-dk.myshopify.com/collections/alle-produkter, where all products are on the same level horisontally. In the collection page they are in some way shifted

pioneer100
Shopify Partner
1118 145 481

-it is an image size issue.
-if you take my suggestion, it would be better if you put all images with same size. 
-design is all OK right now. If i give you the code to make all images in same size, then the images will be stretched and it will look worse.

-Try to replace all images with same size and see all the products will look much better.

 

Thank You

If helpful, Please Like and accept The Solution.
pioneer100
Shopify Partner
1118 145 481

in this page https://libratech-dk.myshopify.com/collections/alle-produkter
you have all images with same size 343px*343px. therefore it is aligning better horizontally.
-try to add image in same size.
if it doesnt work ask me again.
i will help

 

524.png

If helpful, Please Like and accept The Solution.
Chaosheld
New Member
3 0 0

@pioneer100 wrote:

hiii,  I am Sharad from candiSoft Analytica.
- you can ask me again for further assistance in design & coding.
-you can contact me via candisoft100@gmail.com

 

-can I have your contact? 
if yes then send me A private message or you can mail me.

 

Thank You


Hi candy Soft,

i want use minimal theme and I want 4 collections per row and not 1 in each row under the other one. can you find my problem? is it possible that 4 per row ix max and if I have more its creating a new row....till all are shown?  you can text me private on: oscar.simon777@gmail.com

thank you so much ❤️

<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>

</div>

</div>
{% 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 = 'medium' %}

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

{% assign number_of_links = 0 %}

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

{% 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 %}

<div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
<div class="grid__image product-grid-image">
<a href="{{ link.url }}" 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="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
</p>
</div>

{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}

{% elsif link.type == 'page_link' %}

{% comment %}
If we have a page link.
{% endcomment %}

{% assign number_of_links = number_of_links | plus: 1 %}

{% assign linked_page = link.object %}
{% assign have_image = false %}

{% comment %}
Does the page contain an image? If so, let's use it.
{% endcomment %}

{% if linked_page.content contains '<img' %}

{% assign have_image = true %}
{% assign src=linked_page.content | split: 'src="' %}
{% assign src=src[1] | split: '"' | first %}
{% capture image_suffix %}_{{ image_size }}.{% endcapture %}
{% assign src=src | replace: '_small.', image_suffix | replace: '_compact.', image_suffix | replace: '_medium.', image_suffix | replace: '_large.', image_suffix | replace: '_grande.', image_suffix %}

{% comment %}
If the page contains no image, and that page features collections, let's grab the image of the first
collection on it.
{% endcomment %}

{% elsif linklists[linked_page.handle].links.size > 0 and linklists[linked_page.handle].links.first.type == 'collection_link' %}

{% assign have_image = true %}
{% assign collection = linklists[linked_page.handle].links.first.object %}

{% if collection.image %}
{% assign src=collection | img_url: image_size %}
{% else %}
{% assign src=collection.products.first | img_url: image_size %}
{% endif %}

{% endif %}

<div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
<div class="grid-image product-grid-image">
<a href="{{ link.url }}" class="grid-image--centered">
{% if have_image %}
<img src="{{ src }}" alt="{{ link.title | escape }}" />
{% else %}
<img src="{{ link.title | handle | append: '_' | append: image_size | append: '.png' | file_url }}" alt="{{ link.title | escape }}" />
{% endif %}
</a>
</div>
<p class="collection-grid__item-title">
<a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
</p>
</div>

{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}

{% endif %}

{% endfor %}

</div>

{% if number_of_links == 0 %}

<div class="grid">
<div class="grid__item grid-item rte text-center">
<p>
There are no links of type <i>Collection</i> in your <b>{{ page.title }}</b> link list.
Go ahead and <a href="/admin/link_lists/{{ linklists[page.handle].id }}" target="_blank">edit your link list</a> to use links that point to collections.
</p>
</div>
</div>

{% endif %}

{% else %}

<div class="grid">
<div class="grid__item grid-item rte text-center">
<p>
You do not have a link list with a handle set to <kbd>{{ page.handle }}</kbd>, or you do and it's empty.
Go ahead and create a link list called <b>{{ page.title }}</b> on your <a href="/admin/links" target="_blank">Navigation page</a> and populate that link list with links that point to collections, to see collections listed here.
Make sure the link list also has a handle set to <kbd>{{ page.handle }}</kbd>.
</p>
</div>
</div>

{% endif %}

<style>
kbd {
background-color: #FBFBE4;
padding: 1px 4px;
border-radius: 3px;
}
</style>

 

Lilis
Tourist
5 0 2

I'm having the same issue as above -- only a single column of collections. Once upon a time it was working fine, then someone mucked with the site and changed themes, and now with the current theme (Parallax), it simply will not show more than one collection per column. I've gone through every recommendation found in this thread to no avail: https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/... . Any ideas where to look for the issue?

pioneer100
Shopify Partner
1118 145 481

@Lilis wrote:

I'm having the same issue as above -- only a single column of collections. Once upon a time it was working fine, then someone mucked with the site and changed themes, and now with the current theme (Parallax), it simply will not show more than one collection per column. I've gone through every recommendation found in this thread to no avail: https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/... . Any ideas where to look for the issue?


@Lilis 

-can you share the page url in which you have problem?

If helpful, Please Like and accept The Solution.
Lilis
Tourist
5 0 2
pioneer100
Shopify Partner
1118 145 481

@Lilis wrote:
Here is an example:

https://lilisglass.com/pages/artists

-put below code at the bottome of the file styles.scss.liquid

path: online store->theme->action->edit code->assets->styles.scss.liquid

.global-wrapper .grid-uniform {
	display: flex !important;
    flex-wrap: wrap !important;
}
.global-wrapper  .grid__item{
	margin: 20px 20px !important;
}

 -Give likes and mark as accepted solution
Thank You

If helpful, Please Like and accept The Solution.