Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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

Bildschirmfoto 2023-06-11 um 01.55.21.jpg

Link to comment
  • Replies 4
  • Views 262
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution
8 hours ago, Laluma said:

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

Bildschirmfoto 2023-06-11 um 01.55.21.jpg

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.