I was wondering if there is way to have 2 versions of the collection banner - 1 for desktop and another one mobile
This an example of a brand who does it - https://littlesleepies.com/collections/flower-friends
What files or setup do i need to do to pull this off?
Topic summary
A user wants to display different collection banner images for desktop and mobile devices, similar to an example brand’s implementation.
Two solutions were provided:
-
PageFly-Oliver’s approach:
- Navigate to Online Store → Theme → Edit code
- Locate the theme.liquid file
- Add custom code at the bottom of the file
- (Note: The specific code snippet appears corrupted in the original post)
-
Alternative CSS method:
- Duplicate the banner image code with different image sources
- Add class names to distinguish mobile/desktop versions (e.g., “mobile-hide” and “desktop-hide”)
- Use CSS media queries to control visibility:
.mobile-hide { display: none; }and.desktop-hide { display: block; }by default- Reverse these at
@media (max-width: 767px)breakpoint
- Reference different images using
section.settings.imageandsection.settings.mobile_image
Status: The discussion remains open with no confirmation of implementation or follow-up questions from the original poster.
Hi @oliviagnaws
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Just copy the banner image code, introduce different images, and add the class name.
The approximate code is as follows, just find the corresponding code in a different theme.
css code:
.desktop-hide{display:none;}
.mobile-hide{display:block;}
@media(max-width:767px){
.mobile-hide{display:none;}
.desktop-hide{display:block;}
}