Mastering Your Atelier Theme: A Community Guide to 3-Column Product Layouts

Hey everyone! As a Shopify migration expert and someone who spends a lot of time sifting through our amazing community discussions, I often see store owners grappling with similar challenges. One that popped up recently, and really sparked some interesting debate, was about customizing the product page layout in the popular Atelier theme. Our fellow store owner, @runwayfashion, came to the forums looking for a very specific setup: a beautiful 3-column layout for desktop viewers, while keeping the mobile experience clean and stacked.

Specifically, @runwayfashion wanted to achieve this on desktop:

• Left column: Product title + description
• Middle column: Product image (centered)
• Right column: Product variants (size selector) + price

This is a fantastic goal, aiming for a more sophisticated and custom feel than the theme's default. But, as we saw in the thread, getting there isn't always a straightforward path, especially with themes like Atelier that might not have this exact layout built-in.

The "Quick Fix" CSS Approach: A Band-Aid or a Solution?

One of the first and most direct responses came from @Spac-es, who offered a substantial block of CSS code designed to force the 3-column layout. @Spac-es described it as a "quick fix" and a "band-aid" that works well if you want to keep mobile consistent. Here's the code they shared:

@media screen and (min-width: 1349px) {

.product-information__media {
  min-width: fit-content;
  grid-column: 2 / 3 !important;
  z-index: 2;
}

.product-information__grid.product-information--media-left.product-information__grid--half.product-information__grid--limit-details {
  grid-template-columns: 1fr 1fr 1fr !important;
  justify-items: center;
}

.product-details {
  min-width: 100vw !important;
  position: absolute !important;
  justify-content: normal !important;
}

.group-block-content.layout-panel-flex.layout-panel-flex--column {
  width: 100vw;
}

variant-picker.variant-picker.spacing-style.variant-picker--left, add-to-cart-component {
  display: flex !important;
  justify-content: flex-end !important;
}

form.variant-picker__form {
  width: 30%;
  padding-right: 200px;
}

.button.add-to-cart-button.button {
  width: 12%;
  margin-right: 200px;
  padding: 20px 40px;
}

.spacing-style.text-block h1, span.price {
  text-transform: uppercase;
  padding: 20px 40px;
  margin: 10rem 2rem 2rem;
  max-width: 800px;
  font-weight: 900;
  font-size: 2rem;
  padding-right: 200px;
}

rte-formatter.spacing-style.text-block {
  display: flex !important;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-left: 5%;
}

rte-formatter.spacing-style.text-block {
  display: flex !important;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  position: absolute;
  top: 36%;
  padding: 20px 16px;
  margin: 6.6rem 4rem 2rem;
  z-index: -1;
}

div[ref="priceContainer"] {
  width: fit-content;
}

product-price.text-block.text-block--align-left {
  text-align: end;
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
}

button.product-readmore-btn {
  display: none !important;
}

.product-description-collapsible {
  position: unset !important;
  text-align: left;
  font-size: .8rem;
  max-height: max-content !important;
}

.product-information__media {
  min-height: 50vh;
}

}

And here are the visual results @Spac-es shared:

How to Implement the Quick CSS Fix:

1. In your Shopify admin, navigate to Online Store > Themes.
2. Find your current theme (Atelier) and click Actions > Edit code.
3. Locate the base.css file (or a similar main CSS file like theme.css or assets/custom.css if you have one).
4. Paste the provided CSS code at the very bottom of the file.
5. Save your changes and preview your product page on a desktop browser.

However, @PaulNewton quickly chimed in, cautioning that this approach is a "fragile band-aid at best kludge at worst." The concern here is valid: heavily relying on !important and absolute positioning in CSS to completely restructure elements that weren't designed for it can lead to maintenance headaches, especially with theme updates. It might break easily if the theme's underlying HTML structure changes.

The More Robust Approach: Structural Changes with Sections and Custom Liquid

This is where the conversation shifted towards more sustainable solutions. Both @devcoders and @PaulNewton echoed the sentiment that for a "proper permanent solution," you'd need to make "structural changes" to the product page. This usually means diving into the Liquid files and how sections are organized.

@tim_1 offered a brilliant middle-ground that leverages Shopify's section architecture, making it much more resilient to theme updates. The idea is to use theme sections to reconstruct the layout:

1. Add new sections to your product page template.
2. Use a "Text block" section for the title and description, linking them via "Dynamic source" to Product>Title and Product>Description.
3. Use another section (like a "Custom liquid" section) to house the CSS that arranges these sections side-by-side on wider screens. This CSS would also hide the original title/description elements within the main product section to avoid duplication.

Here's how @tim_1 illustrated the section setup:

And the accompanying CSS @tim_1 provided:

This approach has a big "pro": you can update your theme version easily because you're not directly editing the core theme code. The main "con" @tim_1 pointed out is that product image files might be larger than strictly required for the new display size since they'd still be rendered for the original layout's expectations. This is a minor point, but good to be aware of for performance optimization.

@PaulNewton further elaborated on the structural changes, suggesting that if the theme doesn't natively support adding columns to the product area, you'd need to "add a group to the product section that is NOT in either the gallery or main product info section." From there, you'd build a new CSS grid, like grid-template-columns: 1fr 1fr 1fr;, ensuring it's properly set up for your theme's variables. He even shared a visual of what a well-structured three-column grid could look like:

Implementing the Section-Based Solution:

1. Backup Your Theme: Always, always duplicate your theme before making any code changes!
2. Identify/Create Sections: In your Shopify admin, go to Online Store > Themes > Customize. Navigate to a product page. You'll likely need to add new custom sections.
3. Add a "Text block" Section: Drag and drop a "Text block" section (or similar content section) into your product template. In its settings, look for "Dynamic source" and link the heading to Product > Title and the text to Product > Description. Position this section where you want your left column to be. You may need to create a custom template to achieve this outside the main product section.
4. Add a "Custom Liquid" Section: Add a "Custom liquid" section. Paste @tim_1's CSS code (the one starting with