Narrative Theme - How to change the products shown per row on mobile view?

New Member
4 0 0

Hello, 

I am having a problem with the narrative theme - it looks great, but I am not able to change the amount of products shown on mobile view. On desktop I have 4 products per row and see the option to change it on the theme settings. I am not able to change it for mobile view and defaults to 1 product per view. Ideally I would like 2 per row. 

Thank you in advance for the help!

0 Likes
New Member
2 0 0

I was looking for the same! Maybe somebody can help out with this?

0 Likes
Tourist
34 4 17

I am not sure if you are still having issues with this, but that is a pretty quick fix if you know a bit about liquid. All you have do is change the mobileColumns value to 2 and it will display 2 products per row on mobile. Here is the section of code I changed:

    {%- assign desktopColumns = section.settings.products -%}
{%-comment-%}
all i did was change this value from 1 to 2
{%-endcomment-%}
    {%- assign mobileColumns = '2' -%}

    {%- capture gridClasses -%}
      {% if desktopColumns == '3' and totalProducts > 2 %}medium-up--one-third {% else %}medium-up--one-half {% endif %}
      {% if mobileColumns == '2' %}small--one-half {% endif %}
    {%- endcapture -%}

This code is found in the sections folder and is the collection-template.liquid file, and the line I changed is on line 82 (provided you haven't added any code to this file).

 

Here is my working test site https://narrative-test-mobile.myshopify.com/collections/all let me know if you have any issues or would like me to post the full liquid code!

 

1 Like
Highlighted
New Member
2 0 0
Hey Michael Peterson, Thank you so much for your help!
I tried it out and it worked exactly as I wished! Appreciate the help!


Blessings, Dennis Rolea
0 Likes