{"id":8507,"date":"2016-01-27T15:41:23","date_gmt":"2016-01-27T22:41:23","guid":{"rendered":"https:\/\/www.yola.com\/blog\/?p=8507"},"modified":"2016-01-29T12:24:45","modified_gmt":"2016-01-29T19:24:45","slug":"yola-online-store-customize-your-call-to-action-buttons","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/yola-online-store-customize-your-call-to-action-buttons\/","title":{"rendered":"Yola Online Store: Customize your call-to-action buttons"},"content":{"rendered":"<p class=\"p1\"><span class=\"s1\">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 <i>Learn More<\/i>, <i>Buy Now<\/i>, or <i>Get in Touch<\/i>.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">That\u2019s where <a title=\"How to Create Effective CTAs\" href=\"https:\/\/www.yola.com\/blog\/how-to-create-effective-ctas\/\">calls-to-action<\/a> (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.<\/span><\/p>\n<p class=\"p1\"><img loading=\"lazy\" class=\"aligncenter wp-image-8521 size-full\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-27-at-11.58.47-AM.png\" alt=\"Call-to-action button\" width=\"181\" height=\"57\" \/><\/p>\n<p class=\"p1\"><span class=\"s1\">Our most recent update to the Yola Platform gives you\u00a0the ability to customize your CTAs within the Yola Online Store. We\u2019ve replaced the shopping cart buttons with beautiful new CSS buttons that are easily customizable and look great on all devices, including Retina displays.<\/span><\/p>\n<p class=\"p3\"><span class=\"s1\">These great new CTAs\u00a0will be found in the following places:<\/span><\/p>\n<ul>\n<li class=\"p3\"><span class=\"s1\">Add to cart<\/span><\/li>\n<li class=\"p3\">Buy Now<\/li>\n<li class=\"p3\">Checkout<\/li>\n<li class=\"p3\">Place Order<\/li>\n<li class=\"p3\">Continue Shopping<\/li>\n<li class=\"p3\">Clear Bag<\/li>\n<li class=\"p3\">Add More<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-8524 size-full\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2016\/01\/yola_newsletter_hero.png\" alt=\"yola_newsletter_hero\" width=\"500\" height=\"423\" \/><\/p>\n<p class=\"p1\"><span class=\"s1\">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 &gt; Settings &gt; What\u2019s New, and then switching on the \u201cImproved appearance of storefront buttons.\u201d<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Once you\u2019ve 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:<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Go to your Online Store and navigate to Settings &gt; Design<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Next, click \u201cNew CSS theme\u201d or open up an existing theme, then\u00a0copy and paste the following codes:<\/span><\/p>\n<pre><code>.ecwid .ecwid-btn--primary {\r\nbackground: #e7004f;\r\ncolor: #ffffff;\r\n}<\/code>\r\n<code>\r\n.ecwid .ecwid-btn--primary:hover {\r\nbackground: #ffffff;\r\ncolor: #e7004f;\r\n}<\/code>\r\n<code>\r\n.ecwid .ecwid-btn--primary:active, .ecwid .ecwid-btn--primary:focus:active {\r\nbackground: #e7004f;\r\ncolor: #ffffff;\r\n}<\/code>\r\n<code>\r\n.ecwid-btn:focus {\r\nborder: none !important; \r\n}<\/code>\r\n<code>\r\n.ecwid .ecwid-btn--secondary {\r\nbackground: #ffffff;\r\ncolor: #e7004f;\r\n}<\/code>\r\n<code>\r\n.ecwid .ecwid-btn--secondary:hover {\r\nbackground: #e7004f;\r\ncolor: #ffffff;\r\n}<\/code>\r\n<code> \r\n.ecwid .ecwid-btn-secondary:active, .ecwid .ecwid-btn--secondary:focus:active { \r\nbackground: #e7004f; color: #ffffff; \r\n}<\/code><\/pre>\n<p>Now for customization. But first, let\u2019s do a bit of decoding.<\/p>\n<p class=\"p1\"><span class=\"s1\">The following code will affect your large, primary buttons,including, \u201cAdd to Bag,\u201d \u201cContinue Shopping,\u201d\u00a0and\u00a0&#8220;Checkout.&#8221; You can decipher this because the code says \u201cprimary.\u201d<\/span><\/p>\n<pre><code>.ecwid .ecwid-btn--primary {\r\nbackground: #e7004f;\r\ncolor: #ffffff;\r\n}<\/code><\/pre>\n<p class=\"p1\"><span class=\"s1\">You can customize the background of your button by replacing \u201c#ee704f\u201d with your own <a href=\"http:\/\/www.w3schools.com\/colors\/colors_picker.asp\" target=\"_blank\">6-digit hex color code<\/a> (you can find the hex color codes you\u2019ve used throughout your website within Style Designer).<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">You can customize the font color of your button by<span class=\"Apple-converted-space\">\u00a0 <\/span>by replacing \u201c#ffffff\u201d with another hex color code.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">As you can see, our adjustments have made our button pink with white font.<\/span><\/p>\n<p class=\"p1\" style=\"text-align: center;\"><img loading=\"lazy\" class=\"aligncenter wp-image-8514 size-full\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-27-at-11.20.56-AM.png\" alt=\"Primary Button Screen shot\" width=\"200\" height=\"52\" \/><\/p>\n<p class=\"p1\"><span class=\"s1\">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 \u201cprimary:hover.\u201d<\/span><\/p>\n<pre><code>.ecwid .ecwid-btn--primary:hover {\r\nbackground: #ffffff;\r\ncolor: #e7004f;\r\n} <\/code><\/pre>\n<p class=\"p1\"><span class=\"s1\">Adjust the background and color the same way we did previously.\u00a0As you can see, when we hover over our primary button, it turns to a white background with pink font.<\/span><\/p>\n<p class=\"p1\"><img loading=\"lazy\" class=\"aligncenter wp-image-8515 size-full\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-27-at-11.30.17-AM.png\" alt=\"Primary Button Hover Screen Shot\" width=\"191\" height=\"53\" \/><\/p>\n<p class=\"p1\">\u00a0Next, we\u2019ll adjust the following code to ensure that our button remains the same color once clicked.<\/p>\n<pre><code>.ecwid .ecwid-btn--primary:active, .ecwid .ecwid-btn--primary:focus:active {\r\nbackground: #e7004f;\r\ncolor: #ffffff;\r\n}<\/code><\/pre>\n<p>Change the background color and font color to that of your primary button.<\/p>\n<p class=\"p1\"><span class=\"s1\">Now that we\u2019ve completed our primary buttons, we will repeat these steps with our smaller, secondary buttons. These buttons include \u201cAdd More,&#8221; &#8220;Continue Shopping,\u201d and &#8220;Add More.&#8221;<\/span><\/p>\n<pre><code>.ecwid .ecwid-btn--secondary {\r\nbackground: #ffffff;\r\ncolor: #e7004f;\r\n}<\/code>\r\n<code>\r\n.ecwid .ecwid-btn--secondary:hover {\r\nbackground: #e7004f;\r\ncolor: #ffffff;\r\n}<\/code>\r\n<code>\r\n.ecwid .ecwid-btn-secondary:active, .ecwid .ecwid-btn--secondary:focus:active {\r\nbackground: #e7004f;\r\ncolor: #ffffff;\r\n}<\/code><\/pre>\n<p class=\"p1\"><span class=\"s1\">As you can see, these customizations have changed our secondary buttons to white with pink font, and pink with white font when hovered.<\/span><\/p>\n<p class=\"p1\"><img loading=\"lazy\" class=\"aligncenter wp-image-8516 size-full\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-27-at-11.50.55-AM.png\" alt=\"Secondary button Screen shot\" width=\"217\" height=\"42\" \/><\/p>\n<p class=\"p1\"><img loading=\"lazy\" class=\"aligncenter wp-image-8517 size-full\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-27-at-11.51.05-AM.png\" alt=\"Secondary button hover\" width=\"218\" height=\"42\" \/><\/p>\n<p class=\"p1\">Be sure to change your Status to\u00a0&#8220;Active&#8221; in the upper right-hand corner when you&#8217;re ready to publish\u00a0your customizations.<\/p>\n<p class=\"p1\"><img loading=\"lazy\" class=\"aligncenter wp-image-8519 size-full\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-27-at-11.55.09-AM.png\" alt=\"Activate your CTA buttons\" width=\"232\" height=\"92\" \/><\/p>\n<p class=\"p1\">Now it&#8217;s your turn! Customize the CTA buttons in your Online Store and show us what you come up with in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our most recent update to the Yola Platform gives you the ability to customize your calls-to-action within the Yola Online Store. Find out how in this step-by-step tutorial!<\/p>\n","protected":false},"author":24,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false},"categories":[130],"tags":[782,761,600,1078,664,136,181],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/8507"}],"collection":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/comments?post=8507"}],"version-history":[{"count":18,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/8507\/revisions"}],"predecessor-version":[{"id":8537,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/8507\/revisions\/8537"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=8507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=8507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=8507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}