Solved

HELP!! 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!

Accepted Solution (1)
diego_ezfy
Shopify Partner
2936 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 6 (6)

diego_ezfy
Shopify Partner
2936 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

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

 

diego_ezfy
Shopify Partner
2936 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

bdawg568
New Member
4 0 0

YEEEESSSS!

 

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

 

Cheers,

Braedon

LitExtension
Shopify Partner
4860 1001 1133

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
Check out our Shopify migration app to migrate your online store to Shopify

LitExtension
Shopify Partner
4860 1001 1133

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
Check out our Shopify migration app to migrate your online store to Shopify