Yola Online Store: Customize your call-to-action buttons

When a user lands on your business website clear messaging is essential to convert these users into paid customers. They need to know the next action that is necessary to take in order to Learn More, Buy Now, or Get in Touch.

That’s where calls-to-action (CTAs) come in. A CTA is a word or phrase that urges users to take an immediate action and they come in the form of a link or button.

Our most recent update to the Yola Platform gives you the ability to customize your CTAs within the Yola Online Store. We’ve replaced the shopping cart buttons with beautiful new CSS buttons that are easily customizable and look great on all devices, including Retina displays.

These great new CTAs will be found in the following places:

• Add to cart
• Buy Now
• Checkout
• Place Order
• Continue Shopping
• Clear Bag
• Add More

While subscribers who created their Yola Online Stores after December 1st, 2015 automatically have access to these buttons, earlier adopters can access these new buttons by navigating to the Online Store menu > Settings > What’s New, and then switching on the “Improved appearance of storefront buttons.”

Once you’ve gained access to your new CTA buttons, the fun begins. Here is how you can customize your buttons to match the color scheme of your website:

Go to your Online Store and navigate to Settings > Design

Next, click “New CSS theme” or open up an existing theme, then copy and paste the following codes:

.ecwid .ecwid-btn--primary {
background: #e7004f;
color: #ffffff;
}

.ecwid .ecwid-btn--primary:hover {
background: #ffffff;
color: #e7004f;
}

.ecwid .ecwid-btn--primary:active, .ecwid .ecwid-btn--primary:focus:active {
background: #e7004f;
color: #ffffff;
}

.ecwid-btn:focus {
border: none !important; 
}

.ecwid .ecwid-btn--secondary {
background: #ffffff;
color: #e7004f;
}

.ecwid .ecwid-btn--secondary:hover {
background: #e7004f;
color: #ffffff;
}
 
.ecwid .ecwid-btn-secondary:active, .ecwid .ecwid-btn--secondary:focus:active { 
background: #e7004f; color: #ffffff; 
}

Now for customization. But first, let’s do a bit of decoding.

The following code will affect your large, primary buttons,including, “Add to Bag,” “Continue Shopping,” and “Checkout.” You can decipher this because the code says “primary.”

.ecwid .ecwid-btn--primary {
background: #e7004f;
color: #ffffff;
}

You can customize the background of your button by replacing “#ee704f” with your own 6-digit hex color code (you can find the hex color codes you’ve used throughout your website within Style Designer).

You can customize the font color of your button by  by replacing “#ffffff” with another hex color code.

As you can see, our adjustments have made our button pink with white font.

The next bit of code affects our large, primary button hover. This is the color the button changes to when a customer hovers their cursor over the button. This is decipherable because the code states “primary:hover.”

.ecwid .ecwid-btn--primary:hover {
background: #ffffff;
color: #e7004f;
} 

Adjust the background and color the same way we did previously. As you can see, when we hover over our primary button, it turns to a white background with pink font.

 Next, we’ll adjust the following code to ensure that our button remains the same color once clicked.

.ecwid .ecwid-btn--primary:active, .ecwid .ecwid-btn--primary:focus:active {
background: #e7004f;
color: #ffffff;
}

Change the background color and font color to that of your primary button.

Now that we’ve completed our primary buttons, we will repeat these steps with our smaller, secondary buttons. These buttons include “Add More,” “Continue Shopping,” and “Add More.”

.ecwid .ecwid-btn--secondary {
background: #ffffff;
color: #e7004f;
}

.ecwid .ecwid-btn--secondary:hover {
background: #e7004f;
color: #ffffff;
}

.ecwid .ecwid-btn-secondary:active, .ecwid .ecwid-btn--secondary:focus:active {
background: #e7004f;
color: #ffffff;
}

As you can see, these customizations have changed our secondary buttons to white with pink font, and pink with white font when hovered.

Be sure to change your Status to “Active” in the upper right-hand corner when you’re ready to publish your customizations.

Now it’s your turn! Customize the CTA buttons in your Online Store and show us what you come up with in the comments below.