Shopify themes, liquid, logos, and UX
I want to make image #1 only set for desktop hero image and Image #2 only set for mobile view.
URL: hygiadental.com
PW: angel
Thankyou in advanced!
1.
2.
Solved! Go to the solution
This is an accepted solution.
Hi @jeffreym
In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head>
{% style %}
{% if template.name == "index" %}
main#MainContent > section:nth-child(2) {
display: none;
}
@media screen and (max-width: 768px){
main#MainContent > section:nth-child(2) {
display: block !important;
}
main#MainContent > section:nth-child(1) {
display: none !important;
}
}
{% endif %}
{% endstyle %}
Here is the result:
I hope this helps
Best,
Daisy
@jeffreym please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css
@media screen and (min-width: 750px) {
section#shopify-section-template--17786616774756__image_banner_aBAKPB{display:none; visibility:hidden;}
}
@media screen and (max-width: 749px) {
section#shopify-section-template--17786616774756__image_banner_miXpMH{display:none; visibility:hidden;}
}
This is an accepted solution.
Hi @jeffreym
In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head>
{% style %}
{% if template.name == "index" %}
main#MainContent > section:nth-child(2) {
display: none;
}
@media screen and (max-width: 768px){
main#MainContent > section:nth-child(2) {
display: block !important;
}
main#MainContent > section:nth-child(1) {
display: none !important;
}
}
{% endif %}
{% endstyle %}
Here is the result:
I hope this helps
Best,
Daisy
Yes perfect this solved it straight away, thankyou!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025