Tips For Adding Widgets To Shopify

Wondering how to add widgets to Shopify? You’re in the right place. One of the reasons so many store owners and entrepreneurs choose Shopify as their go-to solution for building an online presence, is that the platform is inherently flexible. It’s designed to provide business leaders with a comprehensive environment they can use to create just about any kind of store from scratch. 

With Shopify, business leaders can design comprehensive digital storefronts, complete with connections to a range of other omnichannel sales tools. There’s even the option to use Shopify Plus to create a headless store, for a completely customized user experience. 

Not only can you choose from a range of themes and styles for your store, but you can also add functionality however you choose, either by using custom code, or adding apps and widgets to your website theme. These tools allow you to unlock additional functionality for your customers, improving user experience. Here’s what you need to know about adding widgets to Shopify. 

What are Widgets? Widgets vs Apps

The first thing you need to know before you start adding anything to your Shopify store, is that widgets aren’t the same as “apps”. Although they do have a few overlapping areas. Apps are a common tool for Shopify business owners. They allow companies to add extra functionality to their store, by infusing it with additional code. 

The word “app” comes from application, which is essentially a program, or collection of programs, designed to achieve a specific goal. Widgets are essentially a snippet of code from an app, or an “extension” of an app. They also use code and program data, but they’re a lot more simplistic. 

To put it into context, imagine the “clock” app on your Android or Apple smartphone. Within the app, you can accomplish a range of different tasks, such as using a stop watch, setting a time, viewing the date, or choosing multiple alarms. Depending on the functionality of the app, there might be various other features available too, such as the option to change the style of your clock, or its location. 

Within most clock apps, there’s also the ability to set up a “widget”. This is a small snippet of app functionality which you’ll often position on your phone screen. The widget only does one or two tasks – such as displaying the time and the date. To access any of the other functionality, you’d need to go into the clock app itself. 

What Types of Widgets Can Companies add to Shopify Stores?

While widgets might not add as much functionality to your Shopify store as apps, they can still be a good way to differentiate your website, and achieve various other business goals. For instance, one of the most common ways to use widgets is as part of marketing campaigns. They allow users to embed banners and advertisements into their website, so they can showcase deals and sales. 

Floating widgets can pop-up and appear on the customer’s screen as they scroll through your website or product pages, reminding them of your latest offers. Widgets can also be used to send push notifications to customers, to encourage action, as well as to share social content on your site. 

Other potential widget options companies can explore include:

• Informative widgets: Information or data-driven widgets can provide customers with insights intended to generate conversions. For instance, you could showcase the number of live visitors on a stream, or highlight the number of products sold in each category.
• Video and audio players: Video and audio player widgets allow you to embed other forms of media into your website. You can use them to provide instant access to podcasts and YouTube channel videos within your site. 
• Translation widgets: Translation widgets can give your customers the option to switch the language on your store to their preference, with the click of a button. These often tap into back-end applications, which automatically translate pages on demand. 
• Social buttons: Social buttons are designed to encourage social sharing, and drive visibility to your website. They can allow customers to share social posts instantly, from your blog pages, product pages, and other parts of your website. 
• Accessibility widgets: Accessibility widgets give customers more options to improve the accessibility of your site. For instance, you could give customers a button they can tap to zoom into content or change the font size and color. 

How to Add Widget Codes to Shopify 

The good news for business leaders is that adding widgets to Shopify is relatively straightforward. Once you have the code you need for your widget, you can add it straight to the liquid file for your store. It’s worth saving a backup of your store and theme before you do this, just in case anything goes wrong. You’ll also need to source the right widget code. 

To begin, you’ll need to either search for widget code within an app or theme you’re using for your store, or look for functionality online. You can also consider working with a Shopify expert or developer to create custom branded widgets from scratch. 

Once you’ve got your code, log into your admin panel on Shopify, and go into the “Online Store” tab. Click on “Themes”, then select the theme you want to edit, followed by “Actions” and “Edit code”. In the layout directory, click on the “Theme.Liquid” file. Here, you’ll be able to scroll down until you find a tag for “% Include widget-code %”. Here, you can simply copy and paste your widget code into the right section, and click save. 

Another option, if you don’t want to deal with code at all, is consider using a widget app. There are various apps on the Shopify marketplace which allow you to add widgets of all styles to your store with a couple of clicks. Common options include Widgetic, for social media grids, Floating Widgets, for marketing, and Webyze for messaging. 

‍

Tips for Adding Widgets to Your Store

Adding widgets to your Shopify store is a relatively straightforward process. It’s even a lot easier than adding a full app for most users. However, there are still some top tips you should be aware of:

• Backup your theme: If you’re ever making any changes to your Shopify store or theme files, it’s always a good idea to create a backup first. This ensure you have a version of your store to roll back to if something goes wrong. 
• Test the widget: Always test to make sure the widget actually works as it’s supposed to after you’ve installed it. If it’s not working properly, this will damage the user experience for your customers, and could end up harming your reputation. 
• Choose the right resources: Try to focus on adding value to your store, rather than overwhelming your customers with too much information and content. Pop-up and floating widgets can be great for marketing, but they can also be very distracting. 
• Don’t over-do it: While widgets can offer some great functionality for your website, they can also slow down your store and damage your UI/UX strategy if you’re not careful. Make sure every widget you use is actually necessary. 

Remember, you can also boost your chances of creating successful widgets, apps, and themes for your Shopify store by simply working with a Shopify expert. With developer assistance, you create more streamlined, branded experiences for your customers. Contact Storetasker today to find out more.