How to make product images large with no border

How to make product images large with no border

user151002
Tourist
5 0 1

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.

 

Screenshot 2025-01-29 at 4.36.20 pm.png

 

 

Any help appreciated !

Replies 5 (5)

CodingFifty
Shopify Partner
616 98 118

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?

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
user151002
Tourist
5 0 1

Hi !

 

https://www.casasarta.com/

pw - rtaisk

CodingFifty
Shopify Partner
616 98 118

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;
}
}

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com

ennovative-it
Shopify Partner
120 15 12

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;
}
instagram: e.nnovative
info@ennovative.it
collab@ennovative.it

kodkiosken
Shopify Partner
16 1 5

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").

→ Likes and "Accept as Solution" are highly appreciated!
→ Shopify expert with 8 years of experience.
→ Open for both short- and long-term assignments.
→ Based in Sweden.
→ Get in touch for all things Shopify!