Our site uses the Impulse theme, on the Shop page it displays 3 Products per row on desktop but, only 2 on mobile, is there any way to have it so that 3 Products per row appear on mobile as well?
1 Like
maybe go to collection-template.liquid, find something like
{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% when '2' %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign image_size = '530x530' -%}
{% when '3' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{%- assign image_size = '345x345' -%}
{% when '4' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{%- assign image_size = '250x250' -%}
{% when '5' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{%- assign image_size = '195x195' -%}
{% endcase %}
and change
{% when '3' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{%- assign image_size = '345x345' -%}
into
{% when '3' %}
{%- assign grid_item_width = 'small--one-third medium-up--one-third' -%}
{%- assign image_size = '345x345' -%}
Welcome to the Shopify community!
and Thanks for your Good question.
i have check this mobile it’s perfect look 2x2 but if you have set 3 product per row 3 see look
it’s doesn’t proper UI i hope do you have to understand for user need clean and proper look so please don’t change it