Label Theme - Change from a list of single images to a grid when browsing a collection on mobile

Highlighted
New Member
7 0 0

Hello all,

 

Currently on the mobile, when I click on a collection (Art Decor for example) it displays the products one at a time in a list (i.e. one image fills the screen). I am looking to have 2 products displayed at a time on the mobile - is this possible? 

 

Below is a section of the collection-template.liquid I have been altering. I tried changing the 'small-one-whole' code below (in bold below) to 'one-half' individually at all at the same time but with no success. I am getting close, it will display smaller images but they are all displayed on the right hand side with a big white gap on the left. Any ideas? 

 

This is the original theme code:

 

{% comment %}

For more information on collection tags:
- http://docs.shopify.com/themes/liquid-variables/collection

{% endcomment %}

{% paginate collection.products by section.settings.no_posts %}

{% include 'breadcrumb' %}

{% comment %}
Use .grid--rev so that the collection tags appear below the products on mobile
{% endcomment %}

<section class="collection-page" data-section-type="collection" data-section-id="{{ section.id }}">
<div class="grid--rev">
<div class="grid__item one-whole ">

<header class="grid--table collection-header">
<div class="collection__title grid__item large--one-half medium--one-third small--one-whole">
<h1 class="standard-index {% if collection.description != blank %}has-description{% endif %}">{{ collection.title }}</h1>
{% if collection.description != blank %}
<div class="rte rte--header collection-description feature-copy">
{{ collection.description }}
</div>
{% endif %}
</div>
<div class="grid__item text-right large--one-half medium--two-thirds small--one-whole small--text-left collection__sorting">
{% include 'collection-sorting' %}
</div>
</header>

{% comment %}
Use class grid-uniform to have evenly sized columns clear
each other properly at each breakpoint.
{% endcomment %}
<div class="grid-uniform product-grid">

 

Preview link to shop is 

https://gto5jm1ga2a9gj35-26671349930.shopifypreview.com

 

Thanks.

0 Likes