How can I add a product to a multicolumn in the Dawn Theme?

Store Design

Topic summary

A user wants to add products to the multicolumn section in Shopify’s Dawn theme, which currently only supports text and images.

Proposed Solution:
Since Dawn’s built-in multicolumn section doesn’t support products directly, a workaround involves:

  1. Adding a “Custom HTML” or “Custom content” section through the theme editor
  2. Manually coding the layout using HTML and Liquid
  3. Creating product columns with images, titles, descriptions, and links using custom code snippets
  4. Styling the layout with CSS to control spacing and column width (e.g., 33.33% width with flexbox)

Key Considerations:

  • This approach requires manual coding and HTML/Liquid knowledge
  • Product information must be added manually rather than dynamically pulled
  • CSS customization needed to achieve the desired appearance
  • Changes must be saved and published to take effect

The solution provides example code snippets for both the HTML structure and CSS styling, though the original post contains some corrupted/reversed text that affects readability.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi, I’m using the Dawn Theme and I was wondering is there is a way to add a product on a multicolumn cause right now it only lets me add text or an image. Fore reference, I want to create something like the image below. Thank you

Screenshot 2023-05-11 at 1.46.20 p.m..png
Screenshot 2023-05-11 at 1.46.20 p.m..png3106×1300 349 KB

2

In the Dawn theme, the built-in multicolumn section doesn’t support adding products directly. However, you can achieve a similar layout by using a workaround. Here’s a step-by-step guide:

  1. In your Shopify admin, go to “Online Store” > “Themes” and click on “Customize” for the Dawn theme.

  2. In the theme editor, navigate to the page where you want to add the multicolumn section.

  3. Add a new section by clicking on the “+” button in the sidebar.

  4. Look for a section that allows you to add custom HTML content or code. This could be named “Custom content,” “Custom HTML,” or something similar. Drag and drop this section into your desired location.

  5. Open the newly added custom section and switch to the HTML editor or code view.

  6. Use HTML and Liquid code to manually create the desired multicolumn layout and add product details. Here’s an example code snippet:

<div class="multicolumn-wrapper">
<div class="column">
<img src="path/to/image1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>Product description</p>
<a href="{{ product1.url }}">View Product</a>
</div>
<div class="column">
<img src="path/to/image2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>Product description</p>
<a href="{{ product2.url }}">View Product</a>
</div>
<!-- Add more columns as needed -->
</div>

Customize the HTML code above with your own product images, titles, descriptions, and URLs. You can copy this code for each product column and adjust it accordingly.

  1. Apply CSS styles to the .multicolumn-wrapper class in your theme’s CSS file or the Additional CSS section of the theme editor to control the layout and spacing of the multicolumn section.
.multicolumn-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.column {
width: calc(33.33% - 20px); /* Adjust the width and margin as needed */
margin-bottom: 20px;
}

Customize the CSS properties to achieve the desired layout and appearance.

  1. Save and publish your changes to see the multicolumn section with product information.

Please note that this solution involves manually adding