How to Create a Custom Button on Your Product Page Using CSS
If you’re looking for a way to add your own custom button to your Teaser page so people can go straight to the checkout form, well now you can!
Before we dive into the guide, a little disclaimer: It’s important to note that using CSS in your MV site is fully at your own risk. Only do so if you’re comfortable with codes. We’re unable to provide support for any CSS related issue at this time.
With that being said, let’s get right into the how!
First things first, you must add the coding in code editor mode:
Simply click on the 3 dots and then the bracket icon and voila! You can now add the code found below.
A BASIC BUTTON
Here’s the basic code:
<a href="put your checkout link here - or any link!" class="mv_custom_button mv_primary_button mb-2">BUY NOW</a>
NOTE: Don’t forget to add in the actual link so your button will show up perfectly and direct people to the right place.
Andddd that’s it! Now you have your very own custom button. 👍
But here’s the beauty of CSS: you can take it up a notch and add advanced coding so it looks really fancy!
If you'd like your buttons to sit nicely in the middle, you just wrap them in center tags like this:
<center><a href="put your checkout link here - or any link!" class="mv_custom_button mv_primary_button mb-2">BUY NOW</a></center>
Or simply highlight the button and click the centering button in your editor's toolbar:
ADD/CHANGE BACKGROUND COLOR
Copy the code below to customize the color of your button:
<center><a href="put your checkout link here - or any link!" class="mv_custom_button mv_primary_button mb-2" style = "background: #05383D; color: white; border: 2px solid #05383D;">BUY NOW</a></center>
Let's unpack what this code means:
background: responsible for changing the background color of your button
*You can swap the color code (#05383D) to your own brand color
color: change the color of the button text
border: controls the width and color of the button's border. In case of the code above, your button will have a solid border which is 2px wide and has the exact same color as your button's background color.
Feel free to play around and change the values to get the exact look that you're looking for.
MV's buttons aren't born full-width, so if you like that look, then you need to apply some code to them.
Here's the code:
<center><a href="put your checkout link here - or any link!" class="mv_custom_button mv_primary_button mb-2" style = "width: 100%;">BUY NOW</a></center>
Click here to check out a quick video tutorial and examples of the custom button.
There you have it!
Now you can go and add your very own custom button on your Teaser page. Enjoy!!
Thank you, Juci Kisistók for generously providing us with the directions on how to add a custom button. Here's the original article inside the Collab FB group.
Juci is one of our Certified Partners and a CSS whiz and you can work directly with her for all your MV customization needs. 🙌
Take a peek at her gorgeous MV site right here!