How to Show Different Sections for Mobile and Desktop in Shopify's Dawn Theme

There's something oddly satisfying about cracking a particularly stubborn problem, like that time I finally figured out how to schedule emails. It was a Saturday morning, and I had just made my second cup of coffee, steeling myself for battle with a technology that seemed to relish the challenge of vexing me. Let's channel that joy of discovery and bring it into our shared quest today: creating different sections for mobile and desktop in Shopify's Dawn theme.

But before we get carried away with the thrill of the chase, let's remind ourselves why we're here. A kind soul on the Shopify forums—let's call them Stickerworth—has a neat request: they want a big, bold banner to dance happily across mobile screens, while a more demure banner takes its rightful place on desktops. As fellow explorers of the digital jungle, we think we can help with that. Together, we'll delve into the magical world of CSS and Liquid. Ready your text editors, because here we go!

Step 1: Set Up Your Custom Liquid Section

First, imagine you're guiding a blindfolded friend trying to stick their hand into the cookie jar (the cookie jar here is Shopify). We start by utilizing the "custom liquid" section that our friend Stickerworth has already wisely chosen.

In the editor, head to your Dawn theme by clicking on THEME on your Shopify dashboard. Once there, let’s journey through:

• Online Store -> Themes -> Customize button.

Add the "custom liquid" section if you haven't done so by scrolling to the very bottom of your home page sections list and click Add section. Within this section, we're about to sprinkle some of that Liquid magic.

Step 2: Write the Liquid Code

This is where we transform into coders armed with coffee and creativity. Copy this snippet and sew it into your custom liquid section:

{% if template.name == 'index' %}
<div class="mobile-banner">
  <!-- Put your mobile banner code or content here -->
  <p>Hooray, I'm on mobile!</p>
</div>
<div class="desktop-banner">
  <!-- Put your desktop banner code or content here -->
  <p>Look at me on desktop!</p>
</div>
{% endif %}

Our code bravura lets us craft different content within the same template. Oh, the joys of modularity.

Step 3: CSS to the Rescue

I remember that time I tried to knit a sweater—only to discover I’m knitting two sleeves at the same time. Ingenious, or catastrophic, forever trapped in Schrödinger’s knitting. Here we won’t have such troubles; we maintain order by styling our Liquid creation.

Navigate back to your theme’s editing space and get to the super secret code spot at:

• Customize -> [the theme actions dropdown] -> Edit code.

Find your CSS file, probably named base.css or something like it hiding in the Assets folder, and add these styles:

/* Let's hide those banners accordingly */
@media (max-width: 768px) {
  .desktop-banner {
    display: none;
  }
}

@media (min-width: 769px) {
  .mobile-banner {
    display: none;
  }
}

The CSS above is like making sure we don't wear two hats at once—one for mobile and one for desktop, switching them seamlessly, like a magician without the top hat.

Step 4: Test and Revel in Your Success

Nothing stirs the heart quite like seeing your handiwork come alive on the pixels. Head to your website (stickerworth.com, remember?) and play the judge of your digital parade. Toggle those device views, make sure things dance as intended.

Does the mobile banner reign supreme on the mobile, while the desktop version takes its rightful throne? Excellent. You, my friend, have just mastered the illusion of difference within the same realm. You’ve given yet another digital life a sprinkle of uniqueness.

In the end, we've taken bold steps not only to solve Stickerworth's conundrum but to explore a small corner of Shopify's vast ecosystem. Know that while the specifics may change, the sentiment remains: with a bit of Liquid and CSS, we can shape our digital landscapes to match the wildest flights of fancy. As we sip our coffees and admire our handiwork, the realm of possibilities feels just a bit more open. And isn't that what discovery is all about?