Shopify changing the layout of the collections

Question

I would like to change the layout of a page of collections, right now it's just one column. I would like to make it at least 3 per row.

Here is the existing layout

to something like this

1: Here's the code

  <div id="content" class="col-md-12 center-column content-with-background">
<div class="row">
 <div class="col-sm-12">
  {{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 medium--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{% 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' %}

I don't know where to edit the code so i copied the part i think it is in. Thank you so much.

I have little to no knowledge of coding, if you could, could you edit the code for me? It would me so much to me. Thank you so much :) — xElite, Sep 05 '17 at 11:24
I can do that but that not the point. you should learn this or at least know how to do this. we are here to guide you. — roottraveller, Sep 05 '17 at 11:42
see this : https://stackoverflow.com/questions/20566660/3-column-layout-html-css — roottraveller, Sep 05 '17 at 11:43
get some hands on knowledge from here - https://www.w3schools.com/css/css3_multiple_columns.asp this is a good site to read. And I will recommend using __Bootstrap__ https://www.w3schools.com/bootstrap/default.asp — roottraveller, Sep 05 '17 at 11:44

score 1 · Answer 1 · answered Feb 27 '19 at 03:44

1

Try changing the 3rd line

<div class="col-sm-12">

to this

<div class="col-md-12">

That should resize it to fit more items on the screen.

answered Feb 27 '19 at 03:44

Dani Amsalem

1,266
17
26

Shopify changing the layout of the collections

1 Answers1