Move product images higher on product page - desktop only

[ads18922]

hello, i would like to move my product images higher on my product page, so that its inline with my product title:

my store is www.antico-abito.com , theme is dawn

[Dev_Inflame]

Hey @ads18922,

Please add below css in your base.css at bottom of file.

Css Code :

@media (min-width: 768px) {
    .product__media-item {padding-top: 0px !important;
}
}

If it works please let me know. If need any other help just let me know .

[Samita-Danny]

Hello ads18922, I’m BrainLee From Samita team

Để giải quyết vấn đề bạn, tôi có giải pháp sau

Using Custom CSS (if the theme editor doesn’t give the exact control)

Please add below css in your base.css at bottom of file. (in Edit code)

@media (min-width: 768px) {
    .product__media-item {
        padding-top: 0px !important;
    }
}

Best regards,
BrainLee
Samita Team

[Bang_T]

Hi @ads18922

open the Theme Customize > Theme Settings > Custom CSS and add this code

@media only screen and (min-width: 750px){
	.product__media-wrapper .product__media-item{
		padding-top: 10px !important;
	}
}

[oscprofessional]

Hii @ads18922

Steps:
1)Theme Editor
Go to Online Store → Themes → Customize.
Open a Product page.
Click the Product section in the left panel.
Look for Spacing / Media settings (e.g. top padding or align media).
Adjust values → Save.

2)Open the theme code editor(if no setting is available)
Online Store → Themes → Actions → Edit code.

3. Open your CSS file
   In the Assets folder open base.css.

4)Add the CSS:

Replace the below CSS:

@media (min-width: 768px) {
  .product__media-item {
    padding-top: 64px !important;
  }
}

With:

@media (min-width: 768px) {
  .product__media-item {
    padding-top: unset !important;
  }
}

[rajweb]

@ads18922

hello, i would like to move my product images higher on my product page, so that its inline with my product title:

Hey @ads18922 ,

Got it - Looking at your screenshot, the reason your product images sit lower than your product title is because of the extra padding-top: 64px !important; applied on .product__media-item inside your base.css.

1. Go to your Shopify admin:
   Online Store → Themes → Edit Code
2. Open the file: base.css
3. Search (Ctrl+F or Cmd+F) for:

.product__media-item

4. You’ll find something like this:

@media (min-width: 768px) {
    .product__media-item {
        padding-top: 64px !important;
    }
}

5. Remove that padding line.
6. Save → Refresh your product page.
   Now your images will align higher, in line with your product title.

Thanks

[Emma170]

Thanks for reaching out. Yes, it’s possible to move your product images higher so they align with your product title in the Dawn theme. This can be done by adjusting your theme’s Liquid and CSS code in the product template.

Here’s how you can do it:

1. In your Shopify admin, go to Online Store → Themes.

2. Click Actions → Edit code on the Dawn theme.

3. Open the file:

Sections → main-product.liquid

4. Find the section where your product images are wrapped (usually in a

).

5. Move that entire block above the product title code ({{ product.title }}) so the order changes.

6. To fine-tune spacing, go to:

Assets → base.css

and add this at the bottom:

.product__media-wrapper {

margin-top: -20px; /* Adjust value as needed */

}

7. Save your changes and refresh your product page to see the new layout

If you don’t mind, I can help you out with this directly so it’s perfectly aligned without you needing to touch the code.

[The_ScriptFlow]

Hey @ads18922,
In order to remove the empty space that shows on the top of the product media images then you need to follow these steps.
Go to Shopify Admin >> Online Store >> themes >> Edit Code >> base.css
In the end of base.css file paste the following code.

.product__media-item {
  padding-top: 0px !important;
}

Results: