Jump to content

Aviator: How can I change the size of the "Add to Cart" button?

Recommended Posts

  • Replies 8
  • Views 4.9k
  • Created
  • Last Reply

Think I might have a fix for you. In your layout editor select the product page. In the upper right corner select "product settings" and go to "advanced settings". Try inserting the following code into the page header:


<style> .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
       height: ??px !important;
       width: ??px !important;
       text-align: center center;
   }</style>

Keep in mind you can also add different attributes for font-size, font-family, background, etc. and obviously play with your own values where I have ??. It's important that you specify the text-alignment however, because I noticed when you adjust the dimensions of the button the text will by default be out of alignment if you don't specify this.

Link to comment

Okay, sorry you're right I tried to account for that using "center" twice but obviously the alignment is only left to right, not top to bottom. Here's the fix:

Into the code add

padding-top: 60px !important;

Just looking at your dimensions this should be close to center but you can play with that value until you get it right depending on your text size.

Link to comment

Okay, sorry you're right I tried to account for that using "center" twice but obviously the alignment is only left to right, not top to bottom. Here's the fix:

Into the code add

padding-top: 60px !important;

Just looking at your dimensions this should be close to center but you can play with that value until you get it right depending on your text size.

Link to comment

You've really helped me big time. Thank you very much for your answers here - I simply don't know the CSS. The only other question I could ask I guess is what exactly to type out to manipulate the font size.

The style editor does not allow this function, only the style of font and color. Any last comments would be appreciated.

thank you so much !

Sam

Link to comment

You've really helped me big time. Thank you very much for your answers here - I simply don't know the CSS. The only other question I could ask I guess is what exactly to type out to manipulate the font size.

The style editor does not allow this function, only the style of font and color. Any last comments would be appreciated.

thank you so much !

Sam

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.