Custom Shopify App Development: Shopify Countdown Timer App With Announcement Bar

If you have recently set up an optimized eCommerce store, the next step you might be expecting is the sales acquisition and engagement. Isn’t it? But does your e-commerce store stand out to turn prospects into potential buyers? Or, in other instance, if you have an existing e-commerce store which has reached the inflection points, what strategies can you employ to drive more conversions?

Well, the solution is to employ some compelling marketing principles that can influence your sales.

We know that new visitors don’t just become buyers the very first time they come across your brand – the fundamental thing to do is win their trust first.

Social proof, being the most effective levers for building trust in e-commerce, have the potential to facilitate this process.

More than 70% of Americans say they see the product reviews before they make any purchase.

This fact illustrates well how social proof eases the minds of worried customers and can increase conversion rate optimization.

Merchants, today are harnessing some more persuasive tools like ‘scarcity’ to displaying the number of items sold in sales counters or show to the customers when supplies are low or sold out. It is like targeting the psychology of the customer:

Emotion + Urgency = Conversion

This equation has enough potential to get those hesitant buyers to make a purchase.

Apart from these, another potent tactic merchants prefer are keeping customers in the loop about your business promotions, updates, and events. Using announcement bars is an important paradigm of managing customer relationships.

Talking about their implementation in e-commerce stores, Shopify allows you to add these features to your e-commerce store easily which facilitates you to boost your store’s productivity and increase the conversions.

In the light of this, we at The Brihaspati Infotech got an opportunity to provide Shopify countdown timer app and announcement bar with social proof sales as efficient marketing solutions for one of our clients through custom Shopify app development. Let’s next discuss, what exactly were the business requirements and how we did it?

Custom Shopify App Development

In one of our recent undertakings, we came across a project where the business had a Shopify store which sold different products. The objective of the client was to:

• Increase engagement
• Boost sales instantly
• Build customer trust

To fulfill these, we decided to add the following applications to our approach:

• Item sold notification with a sales pop-up
• Countdown timer for the sales
• Announcement bar

Though there are many third-party apps available in the market, however, managing each one of them becomes difficult and the overall cost increases. Moreover, adding three separate apps can add to the complexity of the store.

So, our team devised an approach where we can implement all the features in a single app which could be easily manageable and prove cost-effective. After a brainstorming session, we decided to configure all the features in separate tabs in single Shopify account.

Features of our Shopify app

Here, are the key elements of our three-in-one Conversion Essentials Shopify app:

1. Social Proof Sales

As the client was sticking to follow the tactic of building trust with social proof, we created an app with a tab ‘Social proof sales’ we displayed recent order checkouts done by the real customers. The motive behind this was to create a positive impression on the new customers to buy with your brand.

Key Features:

• • Excellent way to show your sales to your customers: Our app gives your website credibility to make your potential customer more comfortable to buy from you. After creating a new notification for a specific product or collection, the social proof sales notification will appear on your page which shows the product, the product name, and other notification settings that you wish to include for others to see.
  • Automatic notification creation: This intuitive app is capable of creating notifications automatically as soon as the order is placed by any customer.
  • Customize the style of notification: You can easily customize the style of social proof sales notification by clicking on the “configure” button in the preview section.

You will have to go through three steps: Select a theme, labels, and configuration.

Step 1 – Choose the type of theme you want and activate it for your page. Either go with the basic theme or the holiday theme.

Step 2 – After you choose the theme, you can choose the labels which show the title of social proof sales like ‘Someone in New York just bought the product’, product name and the time of purchase.

Step 3 – When you click “Next”,  you will be taken to the last step called “Configuration”. Here you can choose the location of the social proof sales notification in desktop or mobile, the display time, notifications per page, and other options as shown. Once you are done click the “Activate” button.

• Fully compatible with mobile screens: The app has been optimized to work efficiently on mobile devices. You can activate the setting on mobile by checking the “Show on Mobile” box in the setting section.

Here is a preview of Shopify social proof sales at the back-end:

2. Scarcity Timer Or Shopify Countdown Timer App

As the client wished to display items for a short time and wished the visitors see them and make an instant purchase, we added a countdown timer functionality into our app. It is a customizable countdown timer that gives you full control over your promotions.

Key Features:

• Boost sales: Scarcity timers are very crucial to create urgency for your potential customers. It is a psychological trigger which can initiate action in regular visitors. Our scarcity timer can create scarcity with time or with a total number of units left in the stock. You can boost sales by as much as 24% with the use of scarcity timers.
• Easy to add the timer to any product: The merchant needs to go on the dashboard page and click on the “Add timer” button, choose the product and the timer is all set to go. It follows two steps:

Step 1 – Select product.

Step 2 –  Fill in the desired timer options and add advanced options. Save it and a timer is added.

• Easily customizable: You can easily manage the timer settings. It allows you to completely customize the look of your timer. You can choose a timer style, adjust colors and customize text and labels.

• Can be enabled/disabled: You can easily activate and deactivate the timer by selecting from the drop-down button.
• Edit the timer: By a simple click on the ‘edit’ button, you can edit an existing timer from a product.

For changing more styles or format of the countdown timer, you can get a customized solution from our Shopify development team.

Here is a preview of the Shopify countdown timer app at the back-end:

3. Announcement Bar Deluxe

Next, as per the business needs, we configured the announcement bar deluxe which helped the client to promote discounts to increase sales and enable the customers to know about the business updates, special events, and promotions. Here are some of the advantages of this app:

Key Features:

• Create what you like: In our simple functionality, the merchant can click on the “Create New Bar” button and can choose an existing template or start from scratch. We provide you to easily customize the templates. Choose the pages where you want the bar to be seen and simply select a time schedule. The user can also go with the “Advanced Settings” which allows you to customize colors, add a background, and customize the fonts.

There are 4 steps of creating your customized announcement bar.

Step 1 – Select a template.

Step 2 – Generate labels.

Step 3 – Configuration in announcement bar.

Step 4 – Advanced Settings to announcement bar

• Change the bar background image: We provide upload options in our settings to create the bar background image.
• Built-in display options: You can set up the display options for the Announcement Bar from our provided settings.
• Desktop and Mobile friendly: The Announcement Bar is programmed to be seen on both the mobile and desktop.
• Change the position: You can change the position of the announcement bar on the frontend.
• Add a link: You can add a link to a button on your Announcement Bar.
• Schedule the time of display: You can schedule the Announcement Bar to show only during specific times.

Here is a preview of the Shopify announcement bar at the back-end:

How we did it?

Integrating all the features at a single Shopify account was, though, not easy.

However, similar to our previous Shopify applications, we built this app using the Embedded apps SDK. The interface was built using the NodeJS framework. With the help of Embedded apps functionality, it was then loaded within Shopify store as an Iframe.

We used the following technologies:

• Node JS

This was used to design the functionality of the backend. NodeJS, which uses JavaScript on the server helped us to interact with the Shopify API, fetch databases, fetch code, etc.

We subscribed webhooks to receive notifications about the specific events in the Shopify store.

With Webhooks, the configured app was able to execute the code immediately as soon as the specific events occur in Shopify store. This eliminated the need for making API calls periodically to examine their status.

In short, by using webhooks subscriptions, the need to make overall API calls reduces, which ensures that the third-party apps are more efficient and can update quickly.

• React.js + HTML with Shopify Polaris Framework

Once, we were done with setting up the backend panel, we used HTML and React.JS technologies to implement a well-synchronized solution at the front-end.

Soon we were able to make an easy-to-manage client-end. The Shopify admin dashboard looked like this to the merchant.

Final Outcome

The front end of the Shopify Store was as displayed below.

This three-in-one functionality designed by our Shopify developers not only helped the client to reduce the overall cost of using all the features of different apps at a single place but also helped to achieve the desired conversions and boost the Shopify sales.

In A Nutshell

The objective of this article was to illustrate how so ever perfect Shopify may appear as an eCommerce CMS, it yet needs to be configured in order to meet specific business needs. The same setup can just not work for all business type, you always need tailor-made solutions.

This diversity in configuration is sometimes out of the scope of default Shopify features and can only be fulfilled by an app that is either already available in the Marketplace or by having them developed by expert Shopify developers. The approach we used to build custom Shopify app development was the most secure way to integrate multiple app features into a single app.

This approach can be further extended by using Shopify Polaris and React.js.

If you are also looking to integrate any third-party services in your Shopify store, hire Shopify experts from us and get a free of cost consultation to discover the ways you can expand the functionality of your Shopify store.