How do I change the number of products displayed per row?-district theme

Tourist
11 0 0

Hi there,

I wanted to change per row products are three. However I'm unable to find how to change it, i'm using district theme.

Thanks in advance!

 

Here is the theme collection code:

{% if section.blocks.size > 0 %}
  {%- assign enable_sidebar = true -%}
{% else %}
  {%- assign enable_sidebar = false -%}
{% endif %}
{%- assign products_per_page = section.settings.products_per_page_range -%}

{% if section.settings.image_placement != 'default' and section.settings.image_placement != 'hidden' and collection.image %}
  <div class="hero-content header {{ section.settings.image_placement }}">
    {%- assign image = collection.image -%}
    <div class="collection-image" {% if section.settings.image_placement == 'above' %}style="max-width:{{ image.width }}px;"{% endif %}>
      <div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%">
        {% assign image_widths = '295,394,590,700,900,1200,1500,1800,2000,2400' %}
        {% include 'theme-rias' %}
        <img class="card__image lazyload"
          src="{{ image | img_url: '590x' }}"
          data-src="{{ image_url_pattern }}"
          data-widths="[{{ image_widths }}]"
          data-aspectratio="{{ image.aspect_ratio }}"
          data-sizes="auto"
          alt="{{ image.alt | escape }}">
        <noscript>
          <img class="card__image" src="{{ image | img_url: '1200x' }}" alt="{{ image.alt | escape }}">
        </noscript>
      </div>
    </div>
  </div>
{% endif %}

{% paginate collection.products by products_per_page %}
<section class="collection" data-section-id="{{ section.id }}" data-section-type="collection-template">
  <div class="wrapper">

    <header class="content-util">
    {% include 'breadcrumb' %}
    {% include 'social-icons' %}
    </header>

    <div class="grid {% unless enable_sidebar %}full-width{% endunless %}">
      <div class="collection-container">
        <header class="collection-header">
          <div class="container">
            <h1>{{ collection.title }}</h1>
            {% include 'collection-sorting' %}
          </div>
          {% if section.settings.image_placement == 'default' and collection.image %}
            {%- assign image = collection.image -%}
            <div class="collection-image" style="max-width:{{ image.width }}px;">
              <div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%">
                {% assign image_widths = '295,394,590,700,900,1200,1500,1800,2000,2400' %}
                {% include 'theme-rias' %}
                <img class="card__image lazyload"
                  src="{{ image | img_url: '590x' }}"
                  data-src="{{ image_url_pattern }}"
                  data-widths="[{{ image_widths }}]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"
                  style="width:{{ image.width }}px;"
                  alt="{{ image.alt | escape }}">
                <noscript>
                  <img class="card__image" src="{{ image | img_url: '1200x' }}" alt="{{ image.alt | escape }}">
                </noscript>
              </div>
            </div>
          {% endif %}
          {% if collection.description != blank %}
          <div class="description rte">
            {{ collection.description }}
          </div>
          {% endif %}
        </header>

        {% if enable_sidebar %}
          <div class="mobile-aside-container">
            <a href="#" class="button simple">{{ 'layout.navigation.collection_menu' | t}}</a>
            <aside>
              {% include 'collection-sidebar' %}
            </aside>
          </div>
        {% endif %}

        <div class="products products-grid {% unless enable_sidebar %}full-width{% endunless %}">
          {% comment %}
            Loop through our products in the current collection.
            See the snippet 'product-grid-item' for the layout.
          {% endcomment %}
          {% for product in collection.products %}
            {% include 'product-grid-item' %}
          {% else %}
            {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
              {% for i in (1..products_per_page) %}
                {% include 'placeholder-product-grid-item' %}
              {% endfor %}
            {% else %}
              {% comment %}
                If collection exists but is empty, display message
              {% endcomment %}
              <p>{{ 'collections.general.no_matches' | t }}</p>
            {% endif %}
          {% endfor %}
        </div>
        {% if paginate.pages > 1 %}
        <footer class="collection-footer">
          {% include 'pagination' %}
        </footer>
        {% endif %}
      </div>

      {% if enable_sidebar %}
        <div class="aside-container">
          <aside>
            {% include 'collection-sidebar' %}
          </aside>
        </div>
      {% endif %}

    </div>

  </div>
</section>
{% endpaginate %}

{% schema %}
{
  "name": "Collection pages",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page_range",
      "label": "Number of products on each page",
      "min": 12,
      "max": 48,
      "step": 12,
      "default": 12
    },
    {
      "type": "select",
      "id": "image_placement",
      "label": "Collection image placement",
      "options": [
        { "value": "default", "label": "After collection title" },
        { "value": "above", "label": "After navigation" },
        { "value": "above-full", "label": "After navigation full width" },
        { "value": "hidden", "label": "Hidden" }
      ],
      "default": "default"
    },
    {
      "type": "checkbox",
      "id": "sort_enable",
      "label": "Enable sorting",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "layout_enable",
      "label": "Enable grid and list views",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "menu",
      "name": "Sidebar menu",
      "settings": [
        {
          "type": "link_list",
          "id": "linklist",
          "label": "Menu",
          "default": "main-menu"
        }
      ]
    },
    {
      "type": "tags",
      "name": "Sidebar tags",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Shop by"
        },
        {
          "type": "radio",
          "id": "tag_style",
          "label": "Show tags as",
          "options": [
            { "value": "buttons", "label": "Buttons" },
            { "value": "menu", "label": "Menu" }
          ],
          "default": "buttons"
        },
        {
          "type": "checkbox",
          "id": "tag_grouping",
          "label": "Enable tag grouping",
          "default": false,
          "info": "[Learn how to set up tag groups](http://help.stylehatch.com/article/289-collections)"
        }
      ]
    }
  ]
}
{% endschema %}
0 Likes
Trailblazer
157 15 19

Hi, @Vicbr:

Go to theme.scss and paste this code at the bottom of the file

.collection .products-grid .box.product {
    width: 25% !important;
}
@media screen and (max-width: 950px){
.collection .products-grid .box.product {
width: 50% !important;
}
}

 

Let's make the best store!
Contact us at: thepremierstores@gmail.com
1 Like
Tourist
11 0 0

Hi Trailblazer,

 

Thanks for your help. I try  your advice but it seems didn't works.

 

0 Likes

@Vicbr,

If you want three products per row then add below css in theme.scss.liquid file

.collection .products-grid .box.product {
    width: 33.33% !important;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
11 0 0

Thank you so much!

It works.

0 Likes