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

New Member
4 0 0


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!

New Member
2 0 0

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

51 6 21

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 -%}
all i did was change this value from 1 to 2
    {%- 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 let me know if you have any issues or would like me to post the full liquid code!


1 Like
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