Unlock a Custom 3-Column Product Layout in Shopify Dawn Theme (Code Tutorial!)

Hey fellow store owners!

As a Shopify migration expert, I spend a lot of time diving into what makes stores tick, and more importantly, what makes them better. One of the most common questions I see in the community forums revolves around customization – pushing themes like Dawn beyond their out-of-the-box capabilities. Recently, I stumbled upon a fantastic discussion titled "Main product layout (dawn)" where veluxe1 was looking for a specific, multi-column product page layout for their desktop view. It’s a classic scenario, and the thread offered some brilliant insights.

Here's the kind of layout veluxe1 was aiming for, which many of us desire for a cleaner, more organized product display:

The Challenge: Going Beyond Standard Theme Options

Initially, SectionKit pointed out the standard customization options within the Shopify admin: "In Customize Online Store, go to Themes, click the Product Page, and check the left panel for image layout options. left, right, size, grid, or slider." This is a great first step for basic adjustments, but as many of us know, sometimes you need something more specific, something that the theme editor just doesn't offer.

This is where the community really shines. Experts like Muhammad_Daniyal and Hardeep quickly chimed in, confirming that while it is possible in Dawn, "it isn’t something you can achieve through the theme editor alone." It requires "modifying the Liquid structure in main-product.liquid and updating the CSS." This immediately tells us we’re stepping into code territory, which can feel a bit daunting but is totally doable with the right guidance.

The conversation then turned into a collaborative effort, with veluxe1 sharing access to their draft theme (a smart move, always work on a draft!). This back-and-forth between community members offering to help review the code is a testament to the supportive Shopify ecosystem.

The Solution: A 3-Column Desktop Layout with Mobile Responsiveness

The real gem in the thread came from Ajay from PinFlow, who not only explained the problem but also provided a clear, actionable solution. Ajay highlighted that Dawn's default product page largely offers a single column, so achieving a custom multi-column layout requires "a small Liquid + CSS change."

The core idea? Split your product information blocks into different columns and use CSS to arrange them. Ajay’s solution specifically creates three columns on desktop: one for general product info (title, price, description), one for media (product images/videos), and one for the "buy box" elements (variant picker, quantity, buy buttons). Crucially, he also addressed the mobile experience, ensuring the layout gracefully stacks on smaller screens.

Step-by-Step Instructions for Your Dawn Theme

Before you start, remember to always duplicate your theme and work on a draft. This way, any changes you make won't affect your live store!

1. Create a New Snippet: snippets/product-info-block.liquid

First, you’ll create a new Liquid snippet. This snippet will house the logic for rendering individual product information blocks.

Go to your Shopify Admin > Online Store > Themes. Find your draft Dawn theme, click "Actions" > "Edit code."

Under "Snippets," click "Add a new snippet" and name it product-info-block.liquid. Paste the following code into this new file:

{% comment %}
  Renders a single main-product info block by type.
  Accepts:
  - block: {Object}
  - product: {Object}
  - product_form_id: {String}
{% endcomment %}
{%- case block.type -%}
  {# ...paste the original case/when block here, unchanged... #}
{%- endcase -%}

Now, you need to populate the inside of that {%- case block.type -%} ... {%- endcase -%}. Go to sections/main-product.liquid, find the loop that starts with {%- for block in section.blocks -%}, and inside that loop, cut the entire {%- case block.type -%} ... {%- endcase -%} block. Paste it into your new product-info-block.liquid file, replacing the {# ...paste the original case/when block here, unchanged... #} comment.

2. Modify sections/main-product.liquid

Next, you'll update the main product section file to use your new snippet and define the three-column structure.

In sections/main-product.liquid, find the markup between

  {%- assign product_form_id = 'product-form-' | append: section.id -%}
  {%- assign right_col_block_types = 'variant_picker,quantity_selector,buy_buttons' | split: ',' -%}

  

    

      {%- for block in section.blocks -%}
        {%- unless right_col_block_types contains block.type -%}
          {%- render 'product-info-block', block: block, product: product, product_form_id: product_form_id -%}
        {%- endunless -%}
      {%- endfor -%}
    
  

  

    {% render 'product-media-gallery', variant_images: variant_images %}
  

  

    

      {%- for block in section.blocks -%}
        {%- if right_col_block_types contains block.type -%}
          {%- render 'product-info-block', block: block, product: product, product_form_id: product_form_id -%}
        {%- endif -%}
      {%- endfor -%}
      
        {{ 'products.product.view_full_details' | t }}
        {{- 'icon-arrow.svg' | inline_asset_content -}}
      
    
  

Everything else in the file (media modal, popups, structured data) should remain as-is.

3. Add Custom CSS to assets/section-main-product.css

Finally, we need to add the CSS that defines the column widths and ensures proper stacking on mobile. Go to assets/section-main-product.css and append the following code:

/* 3-column desktop product layout: info | media | buy box */
/* Selectors go 4 class-selectors deep so they reliably beat Dawn's own
   .product--large:not(.product--no-media) rules (3 class-selectors, since
   :not() counts its argument toward specificity). */
@media screen and (max-width: 989px) {
  .product--3col-desktop.product .product__media-wrapper,
  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--left,
  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--right {
    max-width: 100%;
    width: 100%;
  }
}

@media screen and (min-width: 990px) {
  .product--3col-desktop.product .product__media-wrapper,
  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--left,
  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--right {
    max-width: none;
  }

  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--left {
    width: calc(28% - var(--grid-desktop-horizontal-spacing) / 2);
    order: 1;
    padding: 0 4rem 0 0;
  }

  .product--3col-desktop.product .product__media-wrapper {
    width: calc(38% - var(--grid-desktop-horizontal-spacing));
    order: 2;
  }

  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--right {
    width: calc(34% - var(--grid-desktop-horizontal-spacing) / 2);
    order: 3;
    padding: 0 0 0 4rem;
  }
}

A quick note on the CSS: Ajay’s original solution uses specific percentages (28% / 38% / 34%) for the left info column, media column, and right buy box column, respectively. You can totally tweak these percentages to customize the width distribution to your liking! Also, notice the media query for max-width: 989px. This is crucial for making sure your mobile and tablet views revert to a stacked, single-column layout, as Muhammad_Daniyal pointed out early in the discussion.

Testing and Refinement

Once you’ve implemented these changes, preview your draft theme thoroughly. Check different product pages and, most importantly, test the responsiveness on various screen sizes – desktop, tablet, and mobile. Make sure everything looks crisp and functions as expected. If you need to fine-tune the spacing or alignment, you can adjust the padding and width values in the CSS.

This whole discussion truly highlights the power of the Shopify community and the flexibility of the platform. While Dawn is incredibly versatile out of the box, understanding a bit of Liquid and CSS can unlock a whole new level of customization for your store. Don't be afraid to experiment on a Shopify development store or a duplicated theme; that's how we all learn and grow!

Happy customizing!