Customising product page

Does anyone know how to customize the size and position of the drop down menu of a product variant?

I can just make them short, nothing else.

Please check attached files

Add to Design > Custom CSS

/* align image-title */
section.product-details.ProductItem-details {
    padding-top: 0px;
}
/* add to cart button */
div.sqs-add-to-cart-button {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
/* quantity */
div.product-quantity-input input {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

Can you share link to a variant product? We can check variant dropdown easier.

Hi,

I used your code to change my variant box size - worked perfectly, thank you.

How would I now change the colour of the drop down variant boxes to match my add to cart button? So it appears similar to the add to cart button?

And is it possible to remove or reducte the drop down arrows?

Is it also possible to remove where it says : select style indside the box? to either just say select or no text at all?

On 1/19/2023 at 8:57 PM, bettysglamourbox said:

Hi,

 

I used your code to change my variant box size - worked perfectly, thank you.

How would I now change the colour of the drop down variant boxes to match my add to cart button? So it appears similar to the add to cart button?

And is it possible to remove or reducte the drop down arrows?

Is it also possible to remove where it says : select style indside the box? to either just say select or no text at all?

Hi,

Can you share link to a product? We can give code easier

On 6/10/2023 at 5:18 AM, sybfire said:

Hello,

I need to make the "size" and "quantity" buttons smaller in width, and in length as well for the size button.

I cannot seem to find any options to change these two in the design settings at all.

I could only manage to figure out how to stylize the "add to cart" button.

https://www.sybfire.com/art/p/bathroomdance

Thank you!

Use this CSS code

.variant-select-wrapper, .product-quantity-input input {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}