Shopify themes, liquid, logos, and UX
How do i make my product listing look like this within the dawn theme?
Specifically the image layout and size with no borders in between.
Any help appreciated !
Hi @user151002,
Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?
Hi @kodkiosken,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
@media screen and (min-width: 750px) {
.product-info .page-width {
padding: 0px 3rem 0px 0rem !important;
}
.product__media-list {
gap: 0px !important;
border:none !important;
}
.product__media-item>* {
border:none !important;
}
}
Try to add this code to the section "Custom CSS" of your theme
ul#Slider-Gallery-template--23234010251552__main {
gap: 0px !important;
border:none!important;
}
.product__media-item>* {
border:none!important;
}
A general tip would be not to spend too much time focusing on making tweaks for a huge desktop version, as most of your traffic will likely come from mobile.
To achieve the desired outcome, first, make sure you've selected the 2-column layout for desktop in the Theme Editor → Product Page.
Then, go into base.css and paste the following code at the bottom of the file:
@media screen and (min-width: 750px) {
.grid {
column-gap: 0px !important;
row-gap: 0px !important;
}
}
This should give you a similar look and feel to what you requested.
A few more things you could do to maximize the effect include using taller product images. Either by cropping them before uploading or by styling them with css in a standing format.
You can also consider increasing your page width in the Theme Editor (under "Layout").
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m 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, 2025