HELP!! Less Products on Mobile Collection List - Venture Theme

Solved
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

Hello @bdawg568,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
bdawg568
New Member
4 0 0

Hey!

 

That info is below:

 

https://dervilia-art-design.myshopify.com/

https://derviliadesigns.com/collections is the page with the specific issue

 

Thanks,

Braedon

 

0 Likes

This is an accepted solution.

@bdawg568, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

 

@media (max-width: 749px){
[data-section-type="collections-list"]     [data-number-rows] > .grid > *:nth-child(3),
[data-section-type="collections-list"] [data-number-rows] > .grid > *:nth-child(4){
    display: none;
}
}

 



Please let me know whether this is what you had in mind.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
LitExtension
Shopify Partner
871 99 158

Hi @bdawg568

Can you please share your site URL and take a screenshot of the error. So I will check and provide a solution here.

And seem you understand wrong about the limit in Shopify

Please follow this guide about limit in Shopify:

Input

<!-- if array = [1,2,3,4,5,6] -->

{% for item in array limit:2 %}

  {{ item }}

{% endfor %}

Output

1 2

Hope this helps! 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
bdawg568
New Member
4 0 0

YEEEESSSS!

 

Thank you that was exactly what I needed. You're the best.

 

Cheers,

Braedon

0 Likes
LitExtension
Shopify Partner
871 99 158

Hi @bdawg568

It's our pleasure when helping you. If you find our comment is useful, please Hit Like and Accept as Solution, it absolutely encourages us! 

Feel free to let me know if you need further support, I will try to help you with your questions.

Greetings, 

LitExtension Team. 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes