Let's Ditch Those Swipe Numbers: A Step-by-Step Guide to Simplifying Your Shopify Product Page

Sometimes, the little things get under our skin — like that weird screech our fan makes at 3 AM, or when product images insist on screaming numbers at us. Picture this: you're excitedly showing a friend your latest Shopify masterpiece over coffee (yes, we're still pretending face-to-face conversations happen). Suddenly, she squints and asks, “What’s the deal with the ‘1/2’ on your product images?” And you think, “Why yes, what is the deal with those numbers?”

A Day in the Life of Code (And Coffee)

Years ago, grappling with something as finicky as image carousels on a website would’ve driven us to tears. But now, we laugh in the face of adversity — with a very functional dash of caffeine. So let’s brew a cup and tackle this not-so-daunting task of editing your Shopify theme — specifically, the Dawn theme for our fellow retail artisans out there.

First Step: Facing the Numbers

Now, let's take something simple and make it unnecessarily technical — find the offending swipe numbers. You know, <1/2> that appears beneath your gloriously crafted product photos. They're useful, sure, but not always aligned with the aesthetic of online elegance you're aiming for.

Dive into Your Shopify Admin: This is where the magic happens. Head into the backend of your website by logging into your Shopify admin panel. You can find this at www.yourshopifyadmin.com, or follow the direct URL to that mystical place of buttons and controls.
Navigate to Themes: Once you’ve logged in, look for the ‘Online Store’ in the menu on the left and give it a warm, enthusiastic click. Then, under ‘Themes’, you’ll see something fabulous — your active theme, the spotlight of today: Dawn. Find that ‘Actions’ button and select ‘Edit code’ from the dropdown.

Second Step: Getting Our Hands in the Code

This is where things get either exhilarating or scary, depending on how much you usually enjoy playing with HTML and CSS over Sunday brunch.

Open the Correct File: Within the code editor, which now feels like home to many of us, you'll need to find a special file. Head over to the Assets folder and click on base.css. This is where we’re going to work our magic.
Locate and Modify the Code: Here’s the tricky-but-not-really part. Add some CSS. You’re looking for something to hide those pesky swipe numbers. Enter the following lines of code into the base.css file:
```
.flickity-page-dots {
  display: none;
}
```
Alternatively, if you just want to hide the numbers and not the entire navigation, search for existing code managing flickity-page-dots and adjust as necessary — softly wield your code-wand and strike with purpose.

Third Step: Sealing The Deal

Feeling professional yet? Well, finish it off with a touch of flair.

Save Your Changes: There’s that satisfying click when you hit ‘Save’. It’s the Shopify version of patting yourself on the back for a job well done. So do it, then head back to your storefront and admire a job well navigated — sans numbers.
Check It Live: Return to your storefront, preview it, or share it with your nosey friend over another cup of coffee. There should no longer be a number in sight looming over your pictures.

A Small Victory

And so, we've helped those numbers disappear, turning our products all the more mysterious and inviting. Sometimes, it's the simple victories that make us throw our heads back and laugh — not forgetting, of course, that there are friends and caffeinated concoctions to celebrate with.

Deep down, we love solving these little riddles. They bring us closer together, reminiscent of shared puzzles and pleasant complexities. So next time something online vexes you, don’t fret. Your Shopify companions — oh yes, your dear us — will be right there, navigating the trenches of CSS, one swipe number at a time.