Shopify: Separate coding for mobile and desktop versions

Separate coding for mobile and desktop versions
Written by Muhammad Alauddin

First we have to understand about the difference between the “Mobile” and “Desktop” version the width of browser.

mobile screeen

Suppose we want to show different logo in desktop and mobile.

In our THEME LIQUID coding part:

<div id=”mainlogo”>
<a class=”main logo” href=”http://alauddinworld” title=”Main Logo” alt=”main logo”>
<img class=”mobile” src=”[source for desktop logo]” />
<img class=”desktop” src=”[source for mobile logo]” />


In CSS part:

@media all and (min-width: 768px) {
.desktop {
display: none !important;

@media all and (max-width: 767px) {
.mobile {
display: none !important;


About the author

Muhammad Alauddin

I'm Alauddin, SEO Strategist specializing in link building and E-Commerce marketing. This is my blog, where I share online marketing strategies, tips, tutorial and do product reviews.

Leave a Comment