How to make a custom drop down menu stand out on my site?

[looking4ashley]

I figured out how to add a custom drop down menu so that the customer can customize the product to their specifications but the menu is much smaller than the rest of the drop down menus on my site and just doesn’t really look like it belongs. More than anything I’m worried that the customer will skip over the customization and it’s a crucial step.

I’m using this code for the custom variant

<p class="line-item-property__field">
  <label>Bow Attachment</label><br>
  <select required class="required" id="bow-attachment" name="properties[Bow Attachment]">
    <option value="Clips">Clips</option>
    <option value="Headband">Headband</option>
  </select>
</p>

[EBOOST]

Hi @looking4ashley

Could you share your store url and password to view store and which page that you added this custom? I will help to check it.

[looking4ashley]

My URL is aubreyjaydesigns.myshopify.com password SKYLAR

the drop down menu appears on any product page below the quantity.

I’m also having trouble connecting the code to the backend so that I can see the information they choose when they use those drop down menus after they order – if I can’t get that to work then the drop down menu will be pointless anyways.

[EBOOST]

Hi @looking4ashley

/* style for select box */

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/section-main-product.css
3. Add code below to bottom of file

body .product-form__input {
	max-width: 44rem;
}
.product-form__input .line-item-property__field select {
	width: 100%;
	box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground),var(--inputs-border-opacity));
	border-radius: var(--inputs-radius);
	border: none;
	height: calc((var(--inputs-border-width) * 2) + 4.5rem);
	padding: 0 2rem;
	font-size: 1.4rem;
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='presentation' class='icon icon-caret' viewBox='0 0 10 6'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z' fill='currentColor'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 15px;
	background-color: transparent
}

/***** I suggest you create variant for each product ***/

1. Go to product → select product

2. create variant

3. Go to Store Online-> theme → customize

4. Select type for option

[looking4ashley]

my problem with creating a variant in the product itself is that I have to put a quantity for the variant. the variant does not have a quantity. my product is partially made to order, the finishing touches are added as customized by the customer. I have a specific quantity of items and they are all affected by the variant…not individually a variant.

thank you for the other help, I think that fixed it.