Shopify Design

Solved
Highlighted
Excursionist
18 0 1

Hi there,

I have recently launched my website and I realised I wanted to change how many products are displayed per row to three. However I'm unable to find how to change it, i'm using Brooklyn as my theme by the way.

Thanks in advance

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1422 140 394

Hey there, @YFB 

 

Bo here from Shopify Support! 

 

I was able to find instructions on how to do this for your theme by adding some custom code. As you're using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren't supported. The following tutorial works for the Brooklyn theme only. For all other themes check out this tutorial here

 

Note: Before altering any code in your theme please make sure your collection grid style is set to ‘Grid’. To change your grid style, go to the theme settings (‘Online store > Themes > Customize’), then, go to a collections page, and find ‘Grid style > Grid’. Once changed to Grid, click Save. 

Part I: editing ‘product-grid-item.liquid’.

  1. Open ‘product-grid-item.liquid’.
  2. Find {{ grid_item_width }}, and add "custom-width" right beside that. 
  3. Click Save.

Part II: editing ‘theme.scss.liquid’.

  1. Open ‘theme.scss.liquid’.
  2. On the bottom of the file, add this code 
    /* FOR DESKTOP VIEW */
    @media only screen and (min-width: 750px) {
      .custom-width {
        width: 50%;
      }
      .custom-width:nth-child(2n+1) {
        clear: both !important;
      }
    }
    
    /* FOR MOBILE VIEW */
    @media only screen and (max-width: 749px) {  
      .custom-width {
        width: 33.3%;
      }
      .custom-width:nth-child(3n+1) {
        clear: both !important;
      }
    }
    
    /* Do not edit the following code */
    .grid__row-separator {
      display: none;
    }
    @media only screen and (min-width: 750px) {
      .custom-width.large--one-third:nth-child(3n+1) {
        clear: none;
      }
    }
    @media only screen and (max-width: 749px) {
      .custom-width.medium--one-half:nth-child(2n+1) {
        clear: none;
      }
    }
    

    The width percentages are values you need to change depending on how many products you want to display per row.

    .custom-width {width: 33.3%} is your product card’s container. To display more products per row, you will need to change the width percentage to 100% divided by your desired number of products per row. For example, 25% will display 4 products per row, 20% will display 5 products per row, etc.


    Then, you will need to change the number after nth-child( to the number of products per row. For example, if you want 4 products per row, change 3n to 4n, for 5 products per row, change that to 5n, etc.

         3. Click Save.

    Part III  (optional): editing ‘collection-template.liquid’

    1. Open ‘collection-template.liquid’.
    2. Find {% paginate collection.products by 12 %}, this code determines how many products will be displayed on one page. You can change the number based on how many products you want to display per page.
    3. Click Save.

    Warning: the number used here must be divisible by both the mobile and desktop numbers of rows. For example, if you set the page to display 3 products per row on desktop and you set pagination to 9, on the desktop it will look great as it will display the products in a 3x3 grid. However, if you want to display 2 products per row on mobile, and pagination is set to 9, you will have one empty gap on mobile. Please keep this in mind when editing the pagination on your theme. 

    Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

     

    All the Best,

    Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Excursionist
18 0 1

This is my 'product-grid-item.liquid'

where should i put "custom width"

 

 

<!-- /snippets/product-grid-item.liquid -->
{% comment %}

This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.

A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.

Example
- assign grid_item_width = 'large--one-quarter medium--one-half'

{% endcomment %}

{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
<div class="grid-product__wrapper">
<div class="grid-product__image-wrapper">
<a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
{% if featured_image.src== blank %}
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
{% else %}
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ featured_image.alt | escape }}"
data-image>
</div>
</div>
<noscript>
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
</noscript>
{% endif %}
</a>
{% if sold_out %}
<div class="grid-product__sold-out">
<p>{{ 'products.product.sold_out_html' | t }}</p>
</div>
{% elsif on_sale %}
<div class="grid-product__on-sale">
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
<p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
</div>
{% endif %}
</div>

<a href="{{ product.url | within: collection }}" class="grid-product__meta">
<span class="grid-product__title">{{ product.title }}</span>
<span class="grid-product__price-wrap">
<span class="long-dash">—</span>
<span class="grid-product__price">
{% if on_sale %}
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}

{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
</span>
{% if section.settings.product_vendor_enable %}
<p class="grid-product__vendor">{{ product.vendor }}</p>
{% endif %}
</a>
</div>
</div>

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1422 140 394

Hey there, @YFB 

 

You put it right beside {{ grid_item_width}}: 

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Excursionist
18 0 1

after doing this, its 1 product per row.

 

 

 

@media only screen and (min-width: 750px) {
  .custom-width {
    width: 50%;
  }
  .custom-width:nth-child(4n+1) {
    clear: both !important;
  }
}

/* FOR MOBILE VIEW */
@media only screen and (max-width: 749px) {  
  .custom-width {
    width: 25%;
  }
  .custom-width:nth-child(4n+1) {
    clear: both !important;
  }
}

/* Do not edit the following code */
.grid__row-separator {
  display: none;
}
@media only screen and (min-width: 750px) {
  .custom-width.large--one-third:nth-child(4n+1) {
    clear: none;
  }
}
@media only screen and (max-width: 749px) {
  .custom-width.medium--one-half:nth-child(4n+1) {
    clear: none;
  }
}

 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1422 140 394

That sounds about right! What is your desired amount of products per row? For two I would aim for 45%. 

 

All the Best,

Bo 

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Excursionist
18 0 1

i want 4 products per row, i have done 25% but its not working

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1422 140 394

It would be great if you could share a link to the page and let me know what has changed! 

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Excursionist
18 0 1
Highlighted
Excursionist
18 0 1

this is the code i have added

@media only screen and (min-width: 750px) {
  .custom-width {
    width: 25%;
  }
  .custom-width:nth-child(4n+1) {
    clear: both !important;
  }
}

@media only screen and (max-width: 749px) {  
  .custom-width {
    width: 45%;
  }
  .custom-width:nth-child(2n+1) {
    clear: both !important;
  }
}

.grid__row-separator {
  display: none;
}
@media only screen and (min-width: 750px) {
  .custom-width.large--one-third:nth-child(3n+1) {
    clear: none;
  }
}
@media only screen and (max-width: 749px) {
  .custom-width.medium--one-half:nth-child(2n+1) {
    clear: none;
  }
}

 

0 Likes