Fully customize the "add-to-cart" section on a product

Hey guys! 

I'm not really happy with the regular options for customizing the store and product pages.

I've build a new store landing page myself and that works perfectly fine. On the product page I can also individualize most of the page. But obvisouly I still need to add a "product". Within the "design" field I'm just ticking "price" and "add-to-cart button", because I need those. The rest (photos etc) I can add to my taste.

But - now my question: I'm also not happy with the way the "price" and "add-to-cart" look like (see picture attached). How do I customize there? The "quantity" field is way to big and I'd like to have a CI blue frame, same for the "charm" selection dropdown. And also I'd like to adjust the typography.

Here's the product page I'm talking about:
https://www.laluma.store/elena-new

Would be great to adjust these!

THANK YOU VERY MUCH!
Richard

Just as an addition to my question above: On as existing Product page the "add-to-cart" block looks different:
https://www.laluma.store/store/p/elena

It's more to my taste like this - with the blue frames etc, but I'd like to fully customize it!

THANK YOU!

24 minutes ago, tuanphan said:

Add to Design > Custom CSS

.product-block .productDetails .product-quantity-input input {
    width: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border: 2px solid var(--primaryButtonBackgroundColor) !important;
    border-radius: 50px !important;
    font-family: monospace;
}

 

Amazing! Thank you very much!

Do you also know how I tackle the fonts "price", "charm" and "quantity"
I'd like to have "price" a bigger font than at other too.

THANK YOU VERY MUCH!
Richard

On 6/11/2023 at 3:45 PM, Laluma said:

Amazing! Thank you very much!

Do you also know how I tackle the fonts "price", "charm" and "quantity"
I'd like to have "price" a bigger font than at other too.

THANK YOU VERY MUCH!
Richard

Use this code

.variant-option-title, .quantity-label {
    font-family: aktiv-grotesk;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    font-size: 0.75rem;
}