How can I alter the button shape in the Dawn theme?

Store Design

AI-generated summary

Changing button shapes in the Shopify Dawn theme from sharp rectangles to rounded corners. The original poster shared a screenshot of the desired rounded style and a store link.

Proposed solution: edit theme code (Online store > Themes > Actions > Edit code) and add CSS in Asset > base.css to apply a border-radius (e.g., 10px) to buttons, including disabled states and Shopify challenge buttons. The use of !important ensures the rounded corners override existing styles.

Technical note: CSS border-radius controls how rounded the button corners appear; increasing the pixel value makes corners more curved.

Outcome so far: A clear, actionable CSS fix was provided, likely addressing the OP’s request, though no confirmation of implementation or results yet.

New development: Another participant reported the same issue for their site. The helper requested a screenshot to clarify the exact desired appearance before advising further.

Status: Partially resolved for the initial case (solution provided), and ongoing for the second user pending more details. A screenshot attachment is central to understanding the desired shape.

1

Hello, how can I change the button shape? I don’t like the harsh rectangles. This is the shape I would like.

Screen Shot 2021-10-06 at 00.42.00.png

https://werise-co.myshopify.com/

Thank you!

2

@dashawerise

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.button.disabled, .button:disabled, .button[aria-disabled=true], .customer button.disabled, .customer button:disabled, .customer button[aria-disabled=true] {
    border-radius: 10px;
}

.button, .customer button, .shopify-challenge__button { border-radius: 10px !important;}

Thanks!

3

I was also having this same problem with my website button

4

@tonicgreens

Please share a screenshot of what you want!

Thanks!