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

[Chris_V_]

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.

[Guleria]

Hello @Chris_V_ ,

Easy little hard for layman.

Please share the product URL where you use line item.

Regards
Guleria 

[Chris_V_]

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?

[Guleria]

Update your line item html with this one:

<div class="line-item-property__field">
    <label>Color Of The Cord</label><br>
	<div class="select">
    <select required="" class="required select__select" id="color-of-the-cord" name="properties[Color Of The Cord] style=" color:="" rgb(62,="" 214,="" 96)"="">
    <option value="White">White</option>
    <option value="Grey">Grey</option>
    <option value="Black">Black</option>
    <option value="Midnight Blue">Midnight Blue</option>
    <option value="Navy Blue">Navy Blue</option>
    <option value="Dark Blue">Dark Blue</option>
    <option value="Persian Blue">Persian Blue</option>
    <option value="Baby Blue">Baby Blue</option>
    <option value="Turquoise">Turquoise</option>
    <option value="Teal">Teal</option>
    <option value="Irish Green">Irish Green</option>
    <option value="Forest Green">Forest Green</option>
    <option value="Mint Green">Mint Green</option>
    <option value="Milk Chocolate Brown">Milk Chocolate Brown</option>
    <option value="Caramel Brown">Caramel Brown</option>
    <option value="Cream">Cream</option>
    <option value="Lemon Pie Yellow">Lemon Pie Yellow</option>
    <option value="Canary Yellow">Canary Yellow</option>
    <option value="Burnt Orange">Burnt Orange</option>
    <option value="Bloody Red">Bloody Red</option>
    <option value="Wine Red">Wine Red</option>
    <option value="Coral">Coral</option>
    <option value="Fuchsia Pink">Fuchsia Pink</option>
    <option value="Pastel Pink">Pastel Pink</option>
    <option value="Raspberry">Raspberry</option>
    <option value="Lilac">Lilac</option>
    <option value="Dark Purple">Dark Purple</option>
    <option value="Neon Coral">Neon Coral</option>
    <option value="Neon Pink">Neon Pink</option>
    <option value="Neon Yellow">Neon Yellow</option>
    <option value="Neon Green">Neon Green</option>
    <option value="Rainbow">Rainbow</option>
    </select>
	<span style="right: 10px;" class="svg-wrapper"><svg class="icon icon-caret" viewBox="0 0 10 6"><path fill="currentColor" fill-rule="evenodd" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708" clip-rule="evenodd"></path></svg>
</span>
	</div>
	</div>

[Chris_V_]

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"?

[Guleria · Accepted solution]

Again update the html with this one

<div class="line-item-property__field">
    <label class="form__label">Color Of The Cord</label> 
	<div class="select">
    <select required="" class="required select__select" id="color-of-the-cord" name="properties[Color Of The Cord] style=" color:="" rgb(62,="" 214,="" 96)"="">
    <option value="White">White</option>
    <option value="Grey">Grey</option>
    <option value="Black">Black</option>
    <option value="Midnight Blue">Midnight Blue</option>
    <option value="Navy Blue">Navy Blue</option>
    <option value="Dark Blue">Dark Blue</option>
    <option value="Persian Blue">Persian Blue</option>
    <option value="Baby Blue">Baby Blue</option>
    <option value="Turquoise">Turquoise</option>
    <option value="Teal">Teal</option>
    <option value="Irish Green">Irish Green</option>
    <option value="Forest Green">Forest Green</option>
    <option value="Mint Green">Mint Green</option>
    <option value="Milk Chocolate Brown">Milk Chocolate Brown</option>
    <option value="Caramel Brown">Caramel Brown</option>
    <option value="Cream">Cream</option>
    <option value="Lemon Pie Yellow">Lemon Pie Yellow</option>
    <option value="Canary Yellow">Canary Yellow</option>
    <option value="Burnt Orange">Burnt Orange</option>
    <option value="Bloody Red">Bloody Red</option>
    <option value="Wine Red">Wine Red</option>
    <option value="Coral">Coral</option>
    <option value="Fuchsia Pink">Fuchsia Pink</option>
    <option value="Pastel Pink">Pastel Pink</option>
    <option value="Raspberry">Raspberry</option>
    <option value="Lilac">Lilac</option>
    <option value="Dark Purple">Dark Purple</option>
    <option value="Neon Coral">Neon Coral</option>
    <option value="Neon Pink">Neon Pink</option>
    <option value="Neon Yellow">Neon Yellow</option>
    <option value="Neon Green">Neon Green</option>
    <option value="Rainbow">Rainbow</option>
    </select>
	<span style="right: 10px;" class="svg-wrapper"><svg class="icon icon-caret" viewBox="0 0 10 6"><path fill="currentColor" fill-rule="evenodd" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708" clip-rule="evenodd"></path></svg>
</span>
	</div>
	</div>

[Chris_V_]

the difference is the <br> 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

<div class="line-item-property__field">
<label class="form__label">Engraving</label>
<textarea id="engraving" name="properties[Engraving]" style=" color:="" rgb(62,="" 214,="" 96)"=""></textarea>
<span style="right: 10px;" class="svg-wrapper"><path fill="currentColor" fill-rule="evenodd" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708" clip-rule="evenodd"></path>
</span>
</div>

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.

[Chris_V_]

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