Shopify Atelier Theme: Custom 3-Column Product Page Layout Guide

Hey store owners! You know, one of the most common desires I hear in the Shopify community is the yearning for a truly unique product page layout. We all want our products to shine, to stand out from the crowd, and often, the default theme layouts just don't cut it. Recently, a fantastic discussion popped up in the Shopify forums that perfectly illustrates this, with a store owner, runwayfashion, asking for help to transform their Atelier theme's product page into a sleek, three-column desktop layout.

runwayfashion had a clear vision: on desktop, they wanted the product title and description in the left column, the main product image centered in the middle, and the variants (like size selectors) and price on the right. Crucially, they wanted to keep the mobile experience standard and stacked. This is a brilliant goal, as it offers a sophisticated look without sacrificing mobile usability. But how do you achieve it?

The Challenge: Breaking Free from Default Layouts

The core of the problem, as runwayfashion rightly asked, is whether to tackle this with pure CSS or by diving into the theme's Liquid files, specifically main-product.liquid. The Atelier theme, like many modern Shopify themes, uses a grid system, but often defaults to a two-column or stacked layout for product information. Shifting elements around into a custom three-column structure, especially when they're nested deep within theme sections, isn't always straightforward.

Let's take a look at what runwayfashion was aiming for, a truly elegant setup:

Approach 1: The Quick CSS "Band-Aid"

One community member, Spac-es, jumped in with a direct CSS solution. They described it as a "band-aid" that works fine for a quick fix and helps keep the mobile design consistent. While acknowledging that tweaking the HTML would allow for a more compact setup, this approach focuses on heavily overriding the existing CSS to reposition elements.

How to Implement the CSS Band-Aid:

To try this method, you'd add the following code to your theme's base.css file. Remember, always back up your theme before making any code changes!

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

}

The Results (from Spac-es):

While Spac-es's code provides a visual change, other experts in the thread, like PaulNewton, quickly pointed out that this is a "fragile band-aid at best kludge at worst." The concern here is that relying heavily on !important declarations and absolute positioning in CSS to force elements into new layouts can lead to issues with future theme updates or conflicts with other customizations. It's not a truly structural solution.

Approach 2: The Structural & Maintainable Solution

For a more robust and permanent solution, the consensus among experts like PaulNewton and devcoders is that you'll need to make structural changes. This means getting into the theme's core files, typically main-product.liquid, to actually rearrange the HTML elements.

PaulNewton emphasized that if the theme doesn't natively support adding columns to the product main area, CSS alone would be a "kludge" for repositioning the description outside its default hierarchy. The proper way involves adding a new group to the product section that isn't confined to the gallery or main product info, and then building a new CSS grid from scratch, like grid-template-columns: 1fr 1fr 1fr;.

A Smart Compromise: Using Sections and Custom Liquid

tim_1 offered a really clever middle-ground that minimizes direct theme file edits while achieving a structural change. This approach leverages Shopify's theme editor sections and custom liquid blocks, which makes your changes more resilient to theme updates. This is a great way to go if you're comfortable with a bit of code but want to avoid heavily modifying core Liquid files.

Step-by-Step with Sections and Custom Liquid:

Add New Sections: In your theme editor, you'd add new sections to your product page template. You'd likely use:
- A "Text block" section, setting its "Dynamic source" to Product > Title.
- Another "Text block" section, setting its "Dynamic source" to Product > Description.
This pulls the product data into new, independent sections that you can then style and position.
Use a "Custom liquid" Section for CSS: Add a "Custom liquid" section to your product template. Inside this section, you'd place the CSS code to arrange these new sections side-by-side on wider screens and hide the original title/description in the product section (to avoid duplication).

Pros of this method (from tim_1): You'd be able to update your theme version more easily since you're not directly editing the theme's core Liquid files. Your changes live within their own sections.

Cons: A potential drawback is that your product image files might be larger than strictly required for the new display size, as they would still be rendered for their original dimensions. This is a minor optimization point, but something to keep in mind for page load speed.

Which Path to Choose?

So, runwayfashion's question about CSS versus Liquid edits really got to the heart of good Shopify development practices. While a pure CSS "band-aid" like Spac-es provided might give you a quick visual win, it's generally not the most stable or maintainable long-term solution. It can be prone to breaking with theme updates or causing unexpected layout shifts.

The more robust approach, as advocated by PaulNewton and devcoders, involves making structural changes to your theme's Liquid files (like main-product.liquid) to truly redefine the layout. This gives you more control and a sturdier foundation. If you're not comfortable with Liquid, engaging a developer for this is a smart move.

However, tim_1's suggestion of using theme editor sections with custom liquid and CSS offers a fantastic middle ground. It provides a more structural change than pure CSS overrides without requiring deep edits into core Liquid files, making it more update-friendly. This is often the sweet spot for store owners who want significant customization but also value maintainability.

Ultimately, the "cleanest way to split title/description from price/variants" into separate columns involves a combination of creating separate HTML containers (either by editing Liquid or using dynamic sections) and then using CSS Grid or Flexbox to arrange them. For the Atelier theme, given its structure, relying solely on CSS to completely reposition elements across different parent containers is a bit like trying to fit a square peg in a round hole – you can force it, but it might not be pretty or stable. Opting for a more structural approach, whether direct Liquid edits or smart use of theme sections, will serve your store better in the long run.

Transform Your Atelier Theme: Mastering the 3-Column Desktop Product Page