Dawn Theme - help with Product Page customization

Store Design
, ,

Topic summary

A Shopify newcomer using the Dawn theme needed help customizing their product page layout after moving the product description below the main columns using Custom Liquid code.

Two main issues identified:

  1. Text alignment and width: The description text was too stretched out horizontally and needed to match the alignment of their collection pages, while remaining responsive on mobile and tablets.

  2. Button sizing inconsistency: A “request a quote” button wasn’t matching the width of the PayPal button on desktop (though mobile display was correct).

Solutions provided:

  • Initial CSS code fixed the button width using max-width: 44rem and adjusted text alignment.
  • Final solution replaced the Custom Liquid code with a centered container (<div class="page-width">) wrapping the product description.
  • Additional CSS media query addressed mobile responsiveness by adjusting padding and max-width for screens under 768px.

Outcome: The user confirmed both issues were resolved successfully. Screenshots were provided showing the corrected desktop and mobile layouts.

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

Hi @starpaint

Please follow these steps

  1. Replace their Custom Liquid code with the following:
  {{ product.description }}

Result: https://prnt.sc/k_oB6U3YF-mz

  1. Use the following code to fix the issue on mobile:
@media screen and (max-width: 768px) {
  .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    max-width: 100% !important;
    padding-left: 0 !important;
  }
}

Result: https://prnt.sc/Z30BwIacPxyN

I hope this helps

Best,

Daisy