Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
Kozanno1570047785

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

Question

I have a single item, express checkout button on a page and I would like to increase the height and width of the button from its current small rectangular shape. Can someone help me with the CSS?

Edited by sheveron

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 1
Guest

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.

Share this post


Link to post
  • 0
Guest

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.

Share this post


Link to post
  • 0
Guest

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.

Share this post


Link to post
  • 0
Guest

Oh, also in the original code you only need "center" once, not that it matters :)

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

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

Sign in to follow this  

×
×
  • Create New...