How to embed interactive COVID-19 widget in your Shopify store

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

As the coronavirus impacts the world, we recognize the need to share the latest information. This widgets will allow any site to easily add an outbreak map, the latest case counts, and a chart displaying the spread over time. These elements are modular, giving sites the ability to customize the experience. The widgets is also responsive, adjusting automatically to desktop and mobile form factors.


Learn more on how to embed and customize the widgets for your needs below.

COVID19Ranking’s COVID-19 widget

Embed code is constructed from 3 lines: CSS for layout, DIV element where widget will be rendered and Javascript file that is required to grab and render the widget.

Change data-country attribute value to the specific country name. E.g. If you would like to pull data for Vietnam you should:

You can see more options here.

Microsoft’s COVID-19 widget

You will simply need to add 2 lines of HTML code, a <div> including various widget parameters, and a <script>.

The widget is responsive, automatically resizing depending on the size of the parent HTML element. No additional settings control the width of the widget.

To learn more about the available configurations and parameters visit the widget GitHub page.

Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *