HELP! Less Products on Mobile Collection List - Venture Theme

Technical Q&A
1

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 %}


{% include ‘product-card’, product: product, collection: featured_collection %}

{% 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 %}


{% include ‘product-card’, product: product, collection: featured_collection %}

{% endfor %}

Thanks!

2

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

3

Hey!

That info is below:

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

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

Thanks,

Braedon

4

@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

1 Like
5

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

{% for item in array limit:2 %}

{{ item }}

{% endfor %}

Output

1 2

Hope this helps!

6

YEEEESSSS!

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

Cheers,

Braedon

7

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.