Shopify: Separate coding for mobile and desktop versions

Separate coding for mobile and desktop versions
Written by 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


It's no secret that the web continues to evolve at a pretty rapid rate. Even with all of the tools and technologies currently in place, a high quality search engine friendly content must prove itself ready for the Internet's continuing evolution. That's where I come in. As a professional Digital Marketing Strategist and Search Engine Optimization Expert , I not only develop marketing strategy for your business to take advantage of all that the web currently offers, but also what is still to come. My professional skills are grounded in the search engine technologies that have permeated business development and that continue to drive its innovation.

Leave a Comment