How to add a virtual keyboard on your Shopify store

A virtual keyboard is a component that allows a user to enter characters without a physical keyboard. It’s an alternative input mechanism for those who cannot use a physical keyboard, or for multi-lingual users who switch frequently between different character sets or alphabets. Virtual keyboards are commonly used as an on-screen input method on smart devices or small devices with no ability/space to attach a physical keyboard.

In this post, I’ll teach you add an awesome virtual keyboard on your Shopify store.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. Click theme.liquid in the sidebar to open it in the editor.
   In the online code editor:
   – Add the below code before close </head> tag.
   
   {{ '//huratips.com/scripts/jqKeyboard/jqkeyboard.css' | stylesheet_tag }} {{ '//huratips.com/scripts/jqKeyboard/jqkeyboard-min.js' | script_tag }} {{ '//huratips.com/scripts/jqKeyboard/jqk.layout.en.js' | script_tag }}

   1 2 3

   {{ '//huratips.com/scripts/jqKeyboard/jqkeyboard.css' | stylesheet_tag }} {{ '//huratips.com/scripts/jqKeyboard/jqkeyboard-min.js' | script_tag }} {{ '//huratips.com/scripts/jqKeyboard/jqk.layout.en.js' | script_tag }}

   
   – Add the below code before close tag
   
   <script> $(function () { "use strict"; jqKeyboard.init(); }); </script>

   1 2 3 4 5 6

   <script> $(function () {   "use strict";   jqKeyboard.init(); }); </script>

4. Click Save and you’re done.

On front-end of your Shopify online store will appear a keyboard icon at left bottom of screen. You can click on to this icon to open the virtual keyboard.

Note: You must also load jQuery and jQuery-UI before loading this script.