Hello! I was wondering if it is possible to do something like in this photo:
That is, remove the spaces between the products (the photos) on the collection page and make them occupy the entire screen.
In that case, the titles and prices of each product would have to be inside the photos at the bottom, and not outside and below.
(Both on the desktop and the mobile versions)
My theme is Stiletto and my website is https://winnerofficial.com/collections/ss-2024 The password is y21
Hi @martujv ,
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
Hi Oliver! Thanks for your help, it worked almost perfectly.
The only thing left is to make the images have no margins on the sides of the screen so that they take up the entire screen.
I attach a reference photo (the red rectangles are the areas that the images should occupy):
On desktop:
On the phone:
Thank you!
Hi @martujv ,
Crystal here from Fluorescent!
While generally code customizations like this are not supported, I was able to find a quick solution that Iām happy to pass along. If you add the following code underneath the code you added above, in between the tags, it should remove the margins on the collection page product grid for you.
.collection__main-area {
padding: 0px !important;
}
I hope that helps, and if you need anything else please reach out to us in our Help Centre.
Crystal C
Customer Support & Quality Assurance Specialist, Fluorescent.co