Home » Blog » Cubiq

Cubiq

Add to homescreen

Cubiq Add to Homescreen

Teach you old website new tricks

Get and keep more visitors to your website, no matter where they are visiting from or what device they use.

Most people are on their smartphones, even when – and sometimes in addition to, their laptop. Having a WebApp on their homescreen helps them remember who you are and helps them find that page fast. Here’s how to do just that. When your visitors open your page, they will be shown how easy it is to save a shortcut.

Website, iPhone and Android with one code

You don’t need to have an app on the App Store or an app on the Google Play Store. You can have your website do it all with a small piece of code.

Your visitors will be surprised and impressed! They will be surprised how easy it is to come back and visit you every time they see their Homescreen. Cubiq Add-to-Homescreen is quick and easy to install, works flawlessly on most SmartPhones, and keeps marketing your website until people actually remove the shortcut WebApp icon from their homescreen.

What it is

Add to Homescreen is a “snippet” of code that adds important features to your website when it is viewed on a smartphone. It wasn’t made by me. Add to Homescreen, version 3.2.3, was made and copyrighted by Matteo Spinelli, who was the author of https://cubiq.org/.

However, some time after 2015, his life changed and he abandoned his website. There are probably other people who still have a copy of this code, but I don’t know of any. Google also made something like this at one time, but I use an iPhone, so I haven’t followed that.

Since Matteo Spinelli has abandoned his website, code and the copyright, I am making it available here.

SmartPhone WebApp

Remind your mobile visitors to save your website or web store as a shortcut to their Homescreen. This is one of the Bytique tools and tricks to make the mobile version of your website into a SmartPhone WebApp. Let’s get started!

Easy Instructions

It’s really quick and easy. Just 1, 2, 3 and you are done.

1. Download the folder and unzip

Click the link below to download the .zip file. Inside are three things: two files and a folder of images. The files are a style sheet to make it look good and a javascript snippet to make it work. The images are a placeholder for your icon or logo. Double click it to open the contents and upload them inside your website’s root folder. More about that below in step 2.

add-to-homescreen.zip

2. Upload the contents

Upload your files and the images folder to your root directory. You can use File Manager for this or any FTP client. The most popular FTP clients (apps) are FileZilla and Cyberduck. All are free to use for the basic version. Our customers already have File Manager in the cPanel as part of the tools that come with their account. Next, you will link to these files in Step 3.

3. Link to the files

You will need to link your website to the files you just uploaded. To do this you can add both links in the header. (If you want, you can add the javascript in the footer.) These are very small code snippets and won’t harm your website.

To do this in WordPress, open your Admin dashboard. In the side menu you will see Appearance. Hover your mouse over this menu item and you will see sub menus. The last one is Theme Editor.

To add Cubiq Add-to-Homescreen to your WordPress website, you will open the Theme Editor in the Admin dashboard.
To add Cubiq Add-to-Homescreen to your WordPress website, you will open the Theme Editor in the Admin dashboard.

Be careful! You will see a warning when you enter this menu tab. You will be editing the code of your website, but don’t panic. It’s easy.

Just copy and paste this into your child theme header:

<!-- RGW Bytique AddToHomeScreen -->
<link rel="stylesheet" type="text/css" href="/addtohomescreen.min.css" />
<script src="/addtohomescreen.min.js"></script>
<script>
addToHomescreen();
</script>

Be sure to save your changes. Here is a screenshot of the code added to the WordPress Admin Child Theme. To do that, go to (yourwebsite.com) > Admin Dashboard > Appearance > Theme Editor > (Select your Child Theme) > Theme Header and paste your lines of code in the middle of the header. Save your changes. Close the editor.

Adding add-to-homescreen to your child theme header.
Adding add-to-homescreen to your child theme header.

If you want to learn more, you can watch this video. I simply copy the snippet above. I change tabs and open my WordPress Admin, select Appearance, then select Theme Editor. A good place to paste this code is just above the “<link rel=”profile”…> line. Again, be sure to save your changes, and close this editor. I recommend going back to your themes menu.

Bytique Optimized WordPress

If you are just starting out, this might be a bit too much. You can get a Bytique optimized WordPress child theme. Child themes are specific to the Parent theme. A child theme is recommended because themes get updated. When they do, your customizations are wiped out and you have to put them back – every time there’s an update. When you have a Child theme, only the Parent theme is replaced, leaving your customizations, like the Bytique add-to-homescreen, intact in your child theme.

The Theme I use

If you are just starting out, I recommend the Neve theme. You can get it through wordpress.org, (recommended). It is very fast in Speed Tests, and it has a Free and a Paid version, plus the Child theme works well for me. I have used many themes over the years. Some were faddy and some were flashy. If you are an IncomeSchool fan, you may like Acabado. BeaverBuilder and Elementor are also good. I have switched to the Neve theme for several reasons. Mostly simplicity and speed. More on that later.