{"id":933,"date":"2019-08-07T08:03:10","date_gmt":"2019-08-07T08:03:10","guid":{"rendered":"https:\/\/appstore.mageworx.com\/blog\/?p=933"},"modified":"2023-05-24T14:28:30","modified_gmt":"2023-05-24T14:28:30","slug":"no-app-required-boost-sales-by-adding-announcement-countdown-timer-bar-to-your-shopify-site","status":"publish","type":"post","link":"https:\/\/www.mageworx.com\/blog\/boost-sales-with-announcement-countdown-timer-bar-shopify","title":{"rendered":"No App Required! Boost Sales by Adding Announcement Countdown Timer Bar to Your Shopify Site"},"content":{"rendered":"\n<!-- SEO Ultimate (http:\/\/www.seodesignsolutions.com\/wordpress-seo\/) - Code Inserter module -->\n<!-- Google Tag Manager (noscript) -->\r\n<noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-5DTCW7B8\"\r\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\r\n<!-- End Google Tag Manager (noscript) -->\n<!-- \/SEO Ultimate -->\n\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p>Announcement bar is the best way to inform your site\nvisitors and potential buyers about the latest news, special offers, deals, and\npromotions. It is also a great way to grab your customers\u2019 attention.<\/p>\n\n\n\n<p>Unlike pop-ups, announcement bars neither irritate nor distract site visitors from the primary content. Thus, to make critical site data always displayed and available, you might even want to make such info bars instantly displayed, and not hidden.<\/p>\n\n\n\n<p>By specifying shipping terms, delivery cost, precise time or\nconditions of a promo campaign, by announcing holiday sales, offering to sign\nup to a newsletter and promoting promo codes, you motivate shoppers to complete\na purchase. It leads to a tangible increase in conversion rate.<\/p>\n\n\n\n<p>From this article, you\u2019ll learn how to add a customizable announcement bar to your Shopify store in a few mouse clicks. Also, we will guide you through the configurations of a countdown timer without having to install 3<sup>rd<\/sup>-party apps and absolutely free of charge. No coding skills are required to add this functionality. All you need to do is copy and paste a few lines of text to the theme of your Shopify store. Read on to learn more.<\/p>\n\n\n\n<p>A little off-topic. If you need an announcement bar with a possibility for a customer to immediately calculate a required amount of money to get a free gift or free shipping \u2015 including advanced configuration possibilities of its look \u2015 take a look at our FREE Shopify <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/apps.shopify.com\/customer-motivator\" target=\"_blank\">Sales Motivator \u2014 Promo Bars<\/a> app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step-by-Step\nGuidelines<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1. Making Changes in\nYour Current Shopify Theme<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Log in your Shopify store admin panel. Follow the path: <strong>Online Store \u2192 Themes<\/strong>. In the \u2018Actions\u2019 drop-down menu of the theme where you want to add the bar, click \u2018Edit code\u2019 (on the screenshot below, see the published theme).<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/appstore.mageworx.com\/blog\/wp-content\/uploads\/2019\/08\/1-1024x704.png\" alt=\"adding announcement countdown timer\" class=\"wp-image-934\"\/><\/figure>\n<\/div>\n\n\n<p>2. In the \u2018Sections\u2019 folder, click \u2018Add new section\u2019.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/appstore.mageworx.com\/blog\/wp-content\/uploads\/2019\/08\/2-1024x704.png\" alt=\"adding announcement countdown timer - step-by-step guide\" class=\"wp-image-935\"\/><\/figure>\n<\/div>\n\n\n<p>3. Type in the name of the section \u2015 announcement-bar \u2015 and click the \u2018Create section\u2019 button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/appstore.mageworx.com\/blog\/wp-content\/uploads\/2019\/08\/3-1024x704.png\" alt=\"adding announcement countdown timer - user guide\" class=\"wp-image-936\"\/><\/figure>\n<\/div>\n\n\n<p>4. Insert <a href=\"https:\/\/gist.githubusercontent.com\/meecrobe\/f2117d0289c53074d62eceacf0f314a2\/raw\/c6f127f3b09acbc8051f94256bd4586ab8bdc572\/shopify-announcement-bar.liquid\">this code<\/a> to the created \u2018announcement-bar.liquid\u2019 file and click \u2018Save\u2019.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/appstore.mageworx.com\/blog\/wp-content\/uploads\/2019\/08\/4-1024x704.png\" alt=\"adding announcement countdown timer - instructions\" class=\"wp-image-937\"\/><\/figure>\n<\/div>\n\n\n<p>5. In the \u2018theme.liquid\u2019 file, find the code &lt;\/body&gt;. Insert the following code right before that line:<\/p>\n\n\n\n<p><code>{% section 'announcement-bar' %}<\/code><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/appstore.mageworx.com\/blog\/wp-content\/uploads\/2019\/08\/5-1024x704.png\" alt=\"adding countdown timer on shopify\" class=\"wp-image-938\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2. Announcement Bar Configuration<\/strong><\/h3>\n\n\n\n<p>Go to <strong>Online Store \u2192 Themes<\/strong>, and click \u2018Customize\u2019 next to the theme you added code to in Step 1. If everything is done correctly in the previous step, you\u2019ll see a newly created \u2018Announcement bar\u2019 section. Click on it to start the configuration.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/appstore.mageworx.com\/blog\/wp-content\/uploads\/2019\/08\/6-1024x704.png\" alt=\"steps to add countdown timer on shopify\" class=\"wp-image-939\"\/><\/figure>\n<\/div>\n\n\n<p>The functionality is rather simple. You can either enable or disable the banner display, edit its content (HTML tags supported), as well as text and background colors, add a link for a customer to follow when clicking on the banner. Also, you get to specify the top margin in case the banner gets covered by other elements.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/appstore.mageworx.com\/blog\/wp-content\/uploads\/2019\/08\/7-1024x704.png\" alt=\"steps to add ecommerce countdown timer on shopify\" class=\"wp-image-940\"\/><\/figure>\n<\/div>\n\n\n<p>To activate the countdown banner, fill in the \u2018Expiration\ndate\u2019 field (pay attention to the date format: YYYY-MM-DD) and check the \u2018Enable\ncountdown timer\u2019 box. When required, it is possible to edit the following\nlabels: Days, Hours, Minutes, and Seconds.<\/p>\n\n\n\n<p>When the timer ends, the banner will disappear and will not get further displayed until the \u2018Expiration date\u2019 gets changed or the timer is disabled. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><em><strong>That\u2019s it! We hope this solution works for you just fine. Should you have any difficulties or questions, please leave us a comment in the comments field. We will be happy to assist!<\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>Announcement bar is the best way to inform your site visitors and potential buyers about the latest news, special offers, deals, and promotions. It is also a great way to grab your customers\u2019 attention. Unlike pop-ups, announcement bars neither irritate nor distract site visitors from the primary content. Thus, to make critical site data always [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":14862,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[481],"tags":[502,436],"class_list":{"0":"post-933","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-shopify","8":"tag-announcement-bar","9":"tag-developer-diaries"},"_links":{"self":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/comments?post=933"}],"version-history":[{"count":7,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/933\/revisions"}],"predecessor-version":[{"id":16765,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/933\/revisions\/16765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media\/14862"}],"wp:attachment":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media?parent=933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/categories?post=933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/tags?post=933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}