We are sometimes asked if it is possible to show the Closeby launcher on desktop only (but not mobile). This requires editing a Shopify theme, so we've decided to add an article explaining the process step-by-step.
Go to your Shopify theme editor
To start the process of adding this custom styling, you will need to head to your Shopify Store settings and then view your Theme.
From the "Actions" dropdown, click "Edit Code":
This will take you to the theme code editor, where you can add custom CSS/HTML/etc. It's okay if you are not a developer, as this walk-through should guide you enough to make the change.
Open the file "theme.liquid"
Once you're viewing your theme's code, open the file labeled "theme.liquid" under the Layout folder.
This will show you your theme's template code that is used across all your pages:
Scroll within this file until you see the text "</head>". This is the closing HTML tag for the theme's header content. In your file it should look something like this:
From here, click into the editor and add a few blank lines above this tag. Then copy/paste the following code right before the "</head>" text.
<style>
@media(max-width: 768px) {
#closeby-launcher-embed {
display: none;
}
}
</style>
This should look something like this:
From here, all you need to do is save the changes by clicking the "Save" button in the top right corner. Once that is done, your Closeby launcher should be hidden on any screen size smaller than 768px (mobile).