Changing the number of products shown per row in a just one specific collection - Impulse Theme

Solved
Joejoe192
Tourist
3 1 3

Hi all,

Throughout my site, the number of products per row in a collection is set to three. For one specific collection, let's call it "gloves" I would like the number of products shown per row to be 5. 

I think I've found the correct place to make the changes, but I am just unsure of what the code should be, and where the best place to put it would be. Using Impulse theme, and in the collection-template.liquid file, I have the following code:

<div data-sectionId="{% if section.id %}{{section.id}}{% endif %}" data-settings='{% if section.settings %}{{section.settings | json}}{% endif %}' id="gf-products"
class="grid grid--uniform grid--collection{% if section.settings.mobile_flush_grid %} small--grid--flush{% endif %}"{% unless section.settings.enable_collection_count %} data-scroll-to{% endunless %}>
{%- liquid
assign grid_item_width = 'small--one-half medium-up--one-third'

case per_row
when 2
assign grid_item_width = 'medium-up--one-half'
when 3
assign grid_item_width = 'small--one-half medium-up--one-third'
when 4
assign grid_item_width = 'small--one-half medium-up--one-quarter'
when 5
assign grid_item_width = 'small--one-half medium-up--one-fifth'
endcase
-%}
{% render 'variable-products-grid-item-collection-template', grid_item_width: grid_item_width, paginate_by: paginate_by %}

{%- for product in collection.products -%}
{%- render 'product-grid-item', product: product, grid_item_width: grid_item_width -%}
{%- else -%}
<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{%- endfor -%}

 

I'm assuming at some point that I should add something like the following, but I do not seem to be having much luck....

    {%- for product in collection.gloves -%}
     {% assign grid_item_width = 'medium-up--one-fifth small--one-half' %}
    {%- else -%}


Thanks in advance and any help would be massively appreciated!

 

 

KetanKumar
Shopify Partner
20534 2123 7743

@Joejoe192 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Joejoe192
Tourist
3 1 3

Thanks for getting back to me so quickly,

The shop is currently on a Pause&Build plan and so the URL is https://goldtop1.myshopify.com/ and the password to view it is "rawske"

Many thanks,

Joe

KetanKumar
Shopify Partner
20534 2123 7743

@Joejoe192 

i have check this 

its not possible to simple css it can be done some custom code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Joejoe192
Tourist
3 1 3

This is an accepted solution.

I seem to have been able to resolve it myself by using the following piece of code:

{% if collection.title == 'Gloves' %}
{%- liquid assign grid_item_width = 'small--one-half medium-up--one-fifth' %}
{% endif %}

so my final code now looks like the below - hopefully this will help someone!

 

:

  <div data-sectionId="{% if section.id %}{{section.id}}{% endif %}" data-settings='{% if section.settings %}{{section.settings | json}}{% endif %}' id="gf-products"
    class="grid grid--uniform grid--collection{% if section.settings.mobile_flush_grid %} small--grid--flush{% endif %}"{% unless section.settings.enable_collection_count %} data-scroll-to{% endunless %}>
    {%- liquid
      assign grid_item_width = 'small--one-half medium-up--one-third'

      case per_row
        when 2
          assign grid_item_width = 'medium-up--one-half'
        when 3
          assign grid_item_width = 'small--one-half medium-up--one-third'
        when 4
          assign grid_item_width = 'small--one-half medium-up--one-quarter'
        when 5
          assign grid_item_width = 'small--one-half medium-up--one-fifth'
      endcase
    -%}
    
    
    {% if collection.title == 'Gloves' %}
    {%- liquid assign grid_item_width = 'small--one-half medium-up--one-fifth'  %}
    {% endif %}

    
    
 
    {% render 'variable-products-grid-item-collection-template', grid_item_width: grid_item_width, paginate_by: paginate_by %}

    {%- for product in collection.products -%}
      {%- render 'product-grid-item', product: product, grid_item_width: grid_item_width -%}
    {%- else -%}
      <div class="grid__item">
        <p>{{ 'collections.general.no_matches' | t }}</p>
      </div>
    {%- endfor -%} 

 

KetanKumar
Shopify Partner
20534 2123 7743

@Joejoe192 

great thanks for update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes