Less Products on Mobile Collection List - Venture Theme

bdawg568
New Member
4 0 0

Hey there!

I'm having some issues with the Venture theme and am new to playing around with the code for Shopify development so this may be a super straightforward fix. Basically, I only want one product to show on mobile phones (or below 748px) and want 3 products to continue to show on desktop (or above 748px).

 

The code I've found in collection-list-item.liquid that changes the quantity shown is:

{% for product in featured_collection.products limit: 3 %}
{% comment %}
Hide the last product for a better mobile view
{% endcomment %}
<div class="grid__item small--one-half medium-up--one-fifth{% if forloop.index == 4 %} small--hide{% endif %}">
{% include 'product-card', product: product, collection: featured_collection %}
</div>
{% endfor %}
 

With the red number being the one to change. How can I have this code run only for desktop screens or be something like the following for mobile:


{% for product in featured_collection.products limit: 1 %}
{% comment %}
Hide the last product for a better mobile view
{% endcomment %}
<div class="grid__item small--one-half medium-up--one-fifth{% if forloop.index == 4 %} small--hide{% endif %}">
{% include 'product-card', product: product, collection: featured_collection %}
</div>
{% endfor %}

 

Thanks!

0 Likes