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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024