Atelier Theme – Custom Desktop Product Layout (3 Columns)

[runwayfashion]

Hi everyone,

I’m using the Atelier theme and I’m trying to customise my product page layout for desktop only.

What I want to achieve is a 3-column layout:

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

On mobile, I want to keep the default stacked layout.

Has anyone done something similar with Atelier Shopify theme?

Specifically:

• Is this best handled with pure CSS, or do I need to edit main-product.liquid?
• What’s the cleanest way to split title/description from price/variants into separate columns?

Any guidance or examples would be really appreciated

Url: Runway

Thanks!

Example:

[PaulNewton]

Hi @runwayfashion it’s an advanced customization if the theme doesn’t let you just add columns to the product main area, but I don’t think altier has a 3 column grid for that only the product-information__grid--half class etc.
Most themes it needs code modifications, CSS by itself would be kludge to try and reposition the description into it’s own hierarchy outside the product info area.

Depending on theme version and it’s capabilities , if it supports it add a group to the product section that is NOT in either the gallery or main product info section.
That group would have the first columns features.

Then you start to build a new CSS grid, starting with 3 columns, e.g. grid-template-columns: 1fr 1fr 1fr; not counting setting it up properly for the theme variables or if the proportions are all the same.

Reach out if you need this built out properly.

[tim_tairli]

You can do this with adding more sections and some CSS.

You can use Text block with “Dynamic source” set to Product>Title and Product>Description.

And “Custom liquid” would have CSS code to arrange 2 sections side-by-side on wider screens and hide title/description in product section (not shown).

<style>
@media (min-width:1200px){
  main {
    display: flex;
    padding-top:2rem;
  }
  
  main > :first-child {
    flex-basis: 33.33%;
  }
  
  main > [id*=main] {
    flex-basis: 66.66%;
  }
}
@media (max-width:1199px){
  main > :first-child {
    display: none;
  }
</style>

---

Pros: you would be able to update your theme version easily (as theme code is not edited);
Cons: product image files would most likely be larder than required for the new display size (as they would be rendered for the original size).

[Spac-es]

Add this code in your base.css:

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

}

Result:

[PaulNewton]

this is a fragile band-aid at best kludge at worst avoid doing this to merchants themes except for ab-testing .

[Spac-es]

You’re not wrong, but the code works fine as is. It’s true that tweaking the HTML would allow for a more compact setup, but if we want to keep the mobile design consistent and need a quick fix, this is the best band-aid there is.