Atelier Theme - product page

[AceDiamond]

Hi everyone,

I’m looking for some help with the layout of my Shopify product page.

On desktop only, I want to move the entire product information section on the right-hand side higher up so it sits much closer to the header/top of the product page.

I want to move everything in the right column together, including:

Product title
Price
Variants/options
Quantity
Add to cart button
Buy buttons
Product description
Any other product information
I do not want to change the mobile layout at all.

Any help on this would be much appreciated.

Thanks in advance!

[Icey.Lane]

That should be doable without changing mobile. I’d move the desktop product-info wrapper as one block, rather than nudging the title, price, variants and CTA separately. First check whether the gap comes from the section’s top padding/margin or the desktop grid alignment; then apply a scoped @media (min-width: 990px) rule to the product-info column only.

Duplicate the theme before testing, and check the product title, price, variants and Add to cart together at 1280px and 1440px. Keeping the CTA in the first viewport matters more than simply moving the column higher. If you share the Atelier version or a public preview link, the exact selector can be narrowed down.

[kai_xing]

Before adding CSS, I would check Atelier’s built-in Product Details controls first. Shopify’s Atelier release notes say the Product Details block includes desktop height and position settings.

In a duplicate theme:

1. Go to Online Store > Themes > Customize.
2. Open Products > Default product.
3. Select the Product information section, then the Product Details block.
4. Set the desktop position/alignment to the top/start option and preview a few products.
5. Confirm the mobile preview is unchanged before publishing.

If you do not see that control, can you share the Atelier version number and a screenshot of the Product Details settings panel? I would avoid a generic negative-margin CSS rule until the exact version or a preview URL is known, because it can interfere with the sticky product column or other desktop breakpoints.

[AceDiamond]

hi, i dont see those controls

Version 4.1.4 available

url: Santos VVS1 Moissanite 41mm 'Rose' – Ace Diamonds

[Ploqo]

Before and after (tested on an Atelier store):

Atelier puts a fixed top gap on the product-info column on desktop only.

Duplicate the theme first if you want to be safe.

Add a Custom Liquid section to your product template.

• Online Store > Themes > Customize.
• Make sure the template selector at the top says Default product (or your product template).
• Add section > Custom Liquid (under Layout).

Paste this and Save.

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

• This lifts the entire right column together: title, price, variants, quantity, Add to cart, Buy buttons and description.
• If you want a little space instead of flush to the top? Change 0 to 20px (or any value you like).

Mobile is untouched. The rule only runs at 768px and up, so the phone layout does not change.

Regards,
Ploqo

[devcoders]

Hi @AceDiamond

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > style.css and paste this at the bottow of the file:

.product-details{
    padding-top:0;
}

Best regards,
Devcoder

[devcoders]

Hi @kai_xing

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

Best regards,
Devcoder