Hi, does anyone know how to change layout for main product page (for desktop) for dawn theme :
here’s the layout example :
Hi veluxe1,
Yes, it’s possible to change the product layout in the Dawn theme, similar to what you’ve shown in the screenshot.
However, this isn’t something that can be done directly through the Shopify theme editor. It requires modifying the product template (Liquid) files and, in some cases, the CSS.
If you could share your store URL or the relevant code where you’re trying to make this change, I’d be happy to take a look and guide you on exactly what needs to be updated.
its doable in dawm theme
you need to create custom section
share the store url, will assit
Actually, this dawn theme i’ve been edit for now still in draft, do you need me to live this draft? Because the live one is horizon, and i dont want to change for horizon
I was able to solve this in my dawn theme:
Dawn only gives you one column, so this needs a small Liquid + CSS change.
Solution: split the block loop into two columns
- one for “buy box” blocks (variant picker, quantity, buy buttons),
- one for everything else (title, price, description, accordions)
then use flexbox order to put the media column between them on desktop only.
Here is the code:-
- New file
snippets/product-info-block.liquid
Cut the entire {%- case block.type -%} ... {%- endcase -%} body out of sections/main-product.liquid (the block that starts right after {%- for block in section.blocks -%}) and paste it into this new snippet, wrapped like this:
{% 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 -%}
sections/main-product.liquid- replace the markup between<div class="product product--...">and its closing</div>with:
<div class="product product--{{ section.settings.media_size }} product--{{ section.settings.media_position }} product--{{ section.settings.gallery_layout }} product--mobile-{{ section.settings.mobile_thumbnails }} product--3col-desktop grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
{%- assign product_form_id = 'product-form-' | append: section.id -%}
{%- assign right_col_block_types = 'variant_picker,quantity_selector,buy_buttons' | split: ',' -%}
<div class="product__info-wrapper product__info-wrapper--left grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<section class="product__info-container">
{%- 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 -%}
</section>
</div>
<div class="grid__item product__media-wrapper">
{% render 'product-media-gallery', variant_images: variant_images %}
</div>
<div class="product__info-wrapper product__info-wrapper--right grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<section
id="ProductInfo-{{ section.id }}"
class="product__info-container{% if section.settings.enable_sticky_info %} product__column-sticky{% endif %}"
>
{%- 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 -%}
<a href="{{ product.url }}" class="link product__view-details animate-arrow">
{{ 'products.product.view_full_details' | t }}
{{- 'icon-arrow.svg' | inline_asset_content -}}
</a>
</section>
</div>
</div>
Everything else in the file (media modal, popups, structured data) stays as-is.
assets/section-main-product.css- append:
/* 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;
}
}
Note:
- change those
28% / 38% / 34%(left / media / right) to customise the width. - on mobile/tablet: “buy box” blocks (variant picker, quantity, buy buttons) render after description/accordions
Best,
Ajay from PinFlow
No need to make it live. You can simply share the preview URL with me from respective, and I’ll review it there and let you know.
I hope the required elements are already available on the page, as that will allow me to provide you with the exact CSS or code needed. Otherwise, I’ll temporarily add the required element, prepare the code, and then share it with you.
It’s an admin link, and it will not work without a login. Could you please share the website preview link from theme?
check on this
Sir, i tried and everything went well for desktop as i desire, however how to make the mobile view/version stacked as usual and didnt change
still not resolved yet sir
Hi @veluxe1
Do you want the same layout on desktop? If so, please send me a collaborator access code. I’ll check your store and provide the proper update.
yes similar to this, but the theme is in draft, is it okay?
Hi @veluxe1
no problem. I’ll check it in the draft theme. Please send me the collaborator access code.
6983
draft theme : dawn
preview url with a password. though you can still guess something with that page’s source code
Okay, sure. But we’ll also need to make some changes to the code structure in the files, because only then will we be able to style it properly with CSS.
I have sent the request. Please check and approve. So I will check the draft theme and update you.
i already accept your request, sorry for the late reply