Rounding the corners of the "Add to cart" button of my Venue theme

[JonathanDiane]

Hi everyone, Hope you're well! I wonder if you can help me on this: I'm building my product pages using Shogun after importing my product pages in the app. I wonder how I can round the corner of the add to cart button, it is in the main code of my venue theme, Best and many many thanks, Diane

[shayOwensby]

@JonathanDiane,

You will go to Online Store > Themes > Actions > Edit Code. Look for the Assets folder > theme.scss.liquid

Scroll to the very bottom and paste this: 

.product-single__add-btn {
  border-radius: 5px; 
}

Please let me know if you have any questions! 

[JonathanDiane]

Thanks a lot, it worked!

How can I do the same for the Paypal box (see attached image) and the main square with a grey border ?

Many thanks!

[shayOwensby]

@JonathanDiane, 

Please provide me with a url to your store and I can provide you with a solution for these two buttons as well. 

The PayPal button is not featured in the demo of the theme so I will need your store url to see what needs to be done. 

Thanks! 

[JonathanDiane]

Hi

Here is the link of the product page https://allmyketo.com/collections/now-keto/products/keto-energize-myrtille

I would also like to do the same in the page before (collection page)

I send you the password in a private message,
Thanks!

[JonathanDiane]

Yes, but I cannot do the same for the paypal button and the grey square around my 2 payment buttons, 

what do you think?

[shayOwensby]

@JonathanDiane,

This code can be placed at the bottom of your theme.scss.liquid file as before: (This will style the black "Acheter maintenant" button on your product page). 

button.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  border-radius: 5px; 
}

This code will style the collection page buttons. Please note that you will put this in the theme-critical.scss.liquid file: 

.template-collection .c-btn--full {
  border-radius: 5px; 
}

I am not seeing a PayPal button on any of the product pages or collection pages. Are you needing this done on another page? I see that the cart page button already has a border-radius. 

Thanks! 

[JonathanDiane]

Thanks a lot this is super helpful!

Yes I noticed some of our product pages have this button "Acheter maintenant" which is already styled, and other have "Acheter with Paypal", do you know why ?

Besides, can we round the grey square around the add to cart button ?

[shayOwensby]

@JonathanDiane 

Please send a screenshot of the grey square around the cart button so I have a reference. 

Shoot me over a url for a product with each button. It'll help if I can take a look and brainstorm possibilities. First question that comes to mind is if you only see the PayPal button on products above a certain price? 

Thanks! 

[JonathanDiane]

Hi!

Here is a screenshot of the grey square below

About the two different buttons:

1) https://allmyketo.com/collections/energie-focus/products/superfat-cacao-coconut-nut-butter-10-pack is with the Paypal Button

2)The button "Acheter maintenant" disappeared, I don't find it anymore. It was a quick but button to skip cart.
The best for us would have to have :

- The Grey square

- The button Ajouter au panier

- A button "Acheter maintenant" and when the person clicks, it goes to checkout

Thanks!

[RICARDOQ]

Hi,

I am currently setting my shop and was wondering, does anyone know how to make newsletter box rounded using the venture theme ?

Any help would be much appreciated!

[PaulNewton]

You'll have have to adjust the px amount , and make it so the input has a border at all times

.site-footer__newsletter-input {
 border-radius: 5px;
}

[Fanny27]

Hi there,

do you any idea how to round the Paypal Button on the Palo Alto theme ?

here is the URL of my website : https://lustreclearskin.myshopify.com/products/lustre-solo-2

Also, is there a way to change text the "Add to Cart" button for "Buy it Now" for example ?

Thank you for your help,

[GeorgiosV]

Hey Shay,

Is there a way to create the same rounded button in Venue for the home page? For example in featured products or a featured collection.

Another similar question: can we apply this rounded button option to the recommended products on the product page?

I used the code mentioned and it works great, I'd just like to have the same aesthetics on all buttons.

Any tip is much appreciated!!

[lucasmdp]

Hello, I can't round the add to cart button in Ella theme, can you help me?