taking business online

Call us at: 1.866.764.0701

Site Building Advice 2

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.

Call-to-action 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

yola_newsletter_hero

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.

Primary Button Screen shot

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.

Primary Button Hover Screen Shot

 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.

Secondary button Screen shot

Secondary button hover

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

Activate your CTA buttons

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.

Featured Websites 2

Featured Website: Driving traffic with Brittany Hagler Designs

In this featured website, we take a look at Brittany Hagler’s website redesign and the steps she took to drive more traffic to her online store. Read more

All Posts, Promoting Your Website, Site Building Advice 0

Is your business website ready for 2016?

45% of people in the US create New Year’s resolutions, only 8% keep them. We’re here to help you change that. Resolve for a successful business website in 2016 – here are three tips to get your started. Read more

Yola News 49

Announcing the newest updates to the Yola Sitebuilder

Our goal at Yola is to give customers the tools and resources to build a beautiful, professional online presence. Bearing this in mind, the team is excited to announce a series of updates within Yola Sitebuilder. Read more

Featured Websites 0

Featured Website: Grand Senior Living

Get the details on Grand Senior Living’s site redesign and the secrets to their success in this featured website. Read more

Load more