How to align collections in grids?

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

 

0 Likes
Highlighted
Shopify Expert
808 67 188

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.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
2 Likes
Highlighted
Shopify Partner
798 124 405

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

4 Likes
Highlighted
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.

0 Likes
Highlighted
Shopify Partner
798 124 405

This is an accepted solution.

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

1 Like
Highlighted
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

0 Likes
Highlighted
Shopify Partner
798 124 405
Wait i am giving solution. Wait for 10 minutes.
1 Like
Highlighted
Shopify Partner
798 124 405

give me page url in which you have problem

0 Likes
Highlighted
Highlighted
Shopify Partner
798 124 405

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 

2 Likes