Customize Shopify Product Page Layout With CSS

The problem

A merchant asked about this on the Shopify Community. On desktop, the whole right-hand column of their product page sat too low. The images filled the left side from the top, but the title, price, variants and Add to cart button all started well below them, with a big empty gap above.

They wanted to move the entire right column up together as one block: the product title, the price, the variants and options, the quantity, the Add to cart button, the Buy buttons and the description. Everything, in one move, so it sits closer to the top.

There was one hard rule. The mobile layout had to stay exactly as it was. Only desktop should change.

This is a common request, and it looks like it should be a single setting. It is not, and the reason is worth understanding before you touch anything.

I reproduced it on an Atelier store. Here is the product page with the gap. Notice how the images start at the top on the left, but the title and price on the right begin much lower down.

A Shopify product page on Atelier where the right column of product info starts far below the images

That empty space at the top of the right column is the whole complaint. The page is not broken. It is doing exactly what the theme tells it to do.

Why the product info starts so low

Here is the part that trips people up.

The theme is adding a fixed amount of space to the top of the product info column, and it only does it on desktop. In Atelier that space is 80 pixels. The theme sets it with a single rule that runs at tablet and desktop widths and does nothing on phones.

In plain terms, the column has a built-in top padding. Padding is empty space inside a box, above the content. So the title, price and everything under it get pushed down by that padding, while the image column next to it starts at the very top. The two columns are the same height, but one has a cushion on top and the other does not.

This is why nudging the title, or the price, or the Add to cart button on their own never works cleanly. The gap is not on any one of those pieces. It is on the container that holds all of them. Move the container and every piece inside it moves together, which is exactly the behaviour the merchant wanted.

It is also why there is no on and off switch for it in the theme editor. The gap is written into the theme's own stylesheet, not exposed as a setting. So no amount of clicking through the Product information section will reveal a control that removes it.

Another person on the thread suggested looking for a built-in Product Details position or height control first. That is a sensible thing to check, and you should. But when the merchant went looking on their version of Atelier, their reply was short and clear: they did not see those controls. That is the normal outcome. The top gap is styling baked into the theme, and the fix has to happen in CSS.

First, check the easy things

Before you add any code, rule out the two things that occasionally are a setting.

Open your theme and go to Online Store, then Themes, then Customize. Open a product and click into the Product information section, then into each block. If your version of the theme happens to expose an alignment or vertical-position control for the details column, try it first. On some themes and some versions it exists. On the Atelier version in this case, it did not.

Also check whether the gap is coming from the section's own top spacing rather than the column. In the theme editor, select the Product information section and look for a Padding or spacing control. If the whole section has a large top padding, reducing that is the cleanest fix and needs no code. In this case the section spacing was normal and the gap was on the column itself, so a setting could not remove it.

If neither of those applies, which is the usual result, one small CSS rule does the job.

The fix: one Custom Liquid section

The clean way to add a little CSS to a single template, without an app and without editing theme files, is a Custom Liquid section. It lives only on the template you add it to, so it cannot leak onto the rest of your store. I tested every step below on an Atelier store.

Duplicate your theme first if you want to be safe. You are only adding one section, but a duplicate lets you preview with zero risk.

Step 1: Add a Custom Liquid section to your product template

Go to Online Store, then Themes, then Customize.

Make sure the template selector at the top says Default product, or whichever product template you use. This matters, because it scopes the change. Anything you add here shows up on product pages only.

In the left panel, click Add section, then choose Custom Liquid. In Atelier it is listed under Layout.

Adding a Custom Liquid section to the product template in the Shopify theme editor

Step 2: Paste the CSS and Save

Click into the new Custom Liquid section. Paste this into the Liquid code box, then click Save.

<style>
@media (min-width: 768px) {
  .product-information .product-details { padding-top: 0 !important; }
}
</style>

Pasting the desktop-only CSS into the Custom Liquid code box

That is the whole fix. Here is what each part is doing, so you can adjust it with confidence.

The @media (min-width: 768px) wrapper means the rule only runs at 768 pixels wide and up. That is tablet and desktop. Phones are narrower than that, so the rule never touches them. This is what keeps the mobile layout untouched, which was the merchant's hard requirement.

The .product-information .product-details part targets the product info column inside the main product section, and nothing else. It is written that way on purpose. The short version, just .product-details, would also match the small product card inside quick-add popups, which reuse the same name. Scoping it to the product section keeps the change where you want it.

Setting padding-top to 0 removes the cushion entirely, so the top of the title lines up with the top of the images. If you would rather keep a small breathing space instead of going flush, change 0 to 20px, or any value you like. That single number is the one knob you adjust.

Here is the same page after saving. The whole right column has moved up as one block and now sits level with the images.

The Shopify product page after the fix, with the right column moved up to sit level with the images

On the store I tested, the product info moved up 80 pixels, from starting well below the images to lining up with their top edge. Everything inside the column moved together: title, price, variants, quantity, Add to cart, Buy buttons and description. Mobile did not change at all.

How do I move the Add to cart button up on Shopify?

This is the same problem seen from a different angle, and the answer is the same rule.

The Add to cart button is not floating on its own. It sits inside the product info column, below the title, price and variants. If the whole column is pushed down, the button is pushed down with it. So you do not move the button by itself. You move its container, and the button follows.

Trying to move the button alone with its own negative margin tends to backfire. It can slide the button up over the price, or break the spacing between the variant picker and the button on some screen sizes. Lifting the column keeps all the internal spacing intact and just changes where the whole group begins.

If your real goal is to keep the Add to cart button visible without scrolling, moving the column up helps, but the bigger lever is often the image size. A very tall image column pushes the fold down. Shortening or constraining the gallery height on desktop can do more for button visibility than moving the text column.

Can I change the product page layout without an app?

Yes, for spacing and position tweaks like this one. A Custom Liquid section with a few lines of CSS covers most of these small layout complaints, and it costs nothing and loads nothing extra.

Page builder apps like PageFly, Shogun and GemPages are a different tool for a different job. They let you rebuild the product page visually with drag and drop, which is worth it if you want a heavily custom layout with extra sections, tabs and blocks. For a single spacing fix they are overkill. Reach for one when you are redesigning the page, not when you are nudging one column.

The native theme editor also does more than people expect. Most sections have their own Width and Padding controls, so before writing CSS it is always worth checking whether a section setting already does what you want.

How do I add custom CSS to a Shopify theme?

There are three common places, and it is worth knowing the difference.

A Custom Liquid section, which is what we used, is the most surgical. It applies to the single template you add it to. That is perfect when you want a rule to affect product pages only, or one specific page only, and never the rest of the site.

Some themes also have a global Custom CSS box in their theme settings. That applies everywhere on the store. It is convenient, but it is the wrong tool when you want to limit a change to one page type, because you then have to add your own conditions to stop it leaking.

The third option is editing the theme's CSS files directly through the code editor. That is the most powerful and the easiest to get wrong, and it is not needed for a small change like this. Keep code edits for things a section cannot do.

For a targeted, page-specific tweak, the Custom Liquid section wins. It is easy to find later, easy to remove, and it cannot affect anything you did not intend.

What to check if it did not work

• Nothing changed on desktop. Confirm the Custom Liquid section is on the product template, not on the home page or another template. Also confirm you clicked Save. If Save stayed greyed out, click once inside the code box, add a space and remove it, and Save should light up.
• It changed the layout on mobile too. You probably dropped the @media (min-width: 768px) wrapper, or changed the number. Keep the media query exactly as shown. It is the part that protects the phone layout.
• Something else on the page shifted. You may have used the short selector .product-details on its own. Use the scoped version, .product-information .product-details, so the rule stays on the main product column and does not reach quick-add popups.
• The title now touches the top too tightly. Change the 0 to 20px or 30px for a small gap. There is nothing special about zero. It is just the value that makes the column flush with the images.
• It works in the editor preview but not on the live site. Make sure you published the theme, or that you are viewing the same theme you edited. It is easy to edit a duplicate and then check the live one.

Section, block, template: the words that get mixed up

Most of the confusion around product page edits comes from three words that get used loosely.

A template decides which sections appear on a page and in what order. Your product pages use a product template. Adding a Custom Liquid section to that template is what scopes a change to product pages, because the section only exists on that template.

A section is a band on the page, like the Product information area or a Custom Liquid block you add. Sections are where most layout settings live, such as Width and Padding.

A block is a smaller piece inside a section, like the title, the price or the variant picker inside the Product information section. Blocks are what you rearrange within a section.

And one more pair worth separating: padding is empty space inside a box, above or around the content, while margin is space outside the box, between it and its neighbours. The gap in this case was top padding on the info column, which is why zeroing the padding, rather than adding a negative margin, is the correct and predictable fix.

Once those words line up, this kind of edit stops feeling like guesswork. You find the container, you find whether the space is padding or margin, and you change it on the one template that should be affected. That is the whole method, and it works for far more than moving a product column up.