DAWN Theme: How can I make all variatiants look the same?

Store Design

Topic summary

A user is customizing line item properties in the Dawn theme to match the styling of existing product variant buttons and form elements.

Initial Problem:

  • Added a line item property that doesn’t visually match other product page variations/buttons
  • Shared a screenshot showing the styling inconsistency

Solution Process:

  • Another user provided updated HTML code to style the line item property field
  • Additional code was shared to format the “Color of the Cord” label to match the “Quantity” label styling
  • Key formatting elements identified:
    • class="form__label" applies theme-consistent label styling
    • <br> tag for spacing
    • .svg-wrapper handles icon resizing
    • .icon-caret styles dropdown arrows

Final Outcome:

  • User successfully implemented the styling changes
  • Also learned how to add a textarea field for engraving
  • Resolved remaining formatting issues by adding custom CSS in assets/base.css
  • Issue marked as resolved
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

So I’ve added a line item property but I want to format it so that it looks the same as the rest of the buttons/ variations of the listing.

Any input would be helpful, as everything I’ve tried so far doesn’t work.

tress.JPG
tress.JPG1045×579 55.8 KB

2

Hello @Chris_V ,

Easy little hard for layman.

Please share the product URL where you use line item.

Regards
Guleria

3

It’s not live yet, so I’m add the preview link:

https://2i5xz7ehnf8715tb-16238229.shopifypreview.com

I just copied the code to the main product, since the template I was testing isn’t assigned to any of the products I have in the live page.

Maybe I should use the same names, so I won’t need to assign the templates again?

4

Update your line item html with this one:
1 Like
5

I added it! It works!

One more question, is there a way to format the text “Color of the Cord” to look the same as the “Quantity”?

6

Again update the html with this one
1 Like
7

the difference is the
in the second line?

and class=“form__label” with this line I format the label based on the theme settings correct?

<label class="form__label">Color Of The Cord</label>

If I want to add a text box and not a drop-down menu

Engraving 
class="icon icon-caret"

is for the arrow

svg-wrapper does the re-sizing.

but how I format the box, so it will be the same size as the rest of the boxes ?

I’m adding a new link because the other one expired.

https://1w9nio07kd7v96v1-16238229.shopifypreview.com

Sorry for asking so many questions, I haven’t done any coding for over 15 years.

8

Found the solution by adding a command in the assets/base css :slightly_smiling_face: