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 Muhammad Alauddin, a Full Stack Web Developer, and Sr Search Engine Optimizer.

Leave a Comment