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

New Member
16 0 0

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

0 Likes
Shopify Partner
151 37 56

@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! 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
New Member
16 0 0

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!Capture d’écran 2019-09-09 à 10.09.13.png

0 Likes
Shopify Partner
151 37 56

@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! 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
Highlighted
New Member
16 0 0

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!

0 Likes
New Member
16 0 0

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

what do you think?

0 Likes
Shopify Partner
151 37 56

@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! 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
New Member
16 0 0

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 ?

0 Likes
Shopify Partner
151 37 56

@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! 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
New Member
16 0 0

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

Capture d’écran 2019-09-11 à 10.22.13.pngThanks!

0 Likes