Liquid, JavaScript, themes, sales channels
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!
Solved! Go to the solution
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
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
Hey!
That info is below:
https://dervilia-art-design.myshopify.com/
https://derviliadesigns.com/collections is the page with the specific issue
Thanks,
Braedon
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
YEEEESSSS!
Thank you that was exactly what I needed. You're the best.
Cheers,
Braedon
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.
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024