Dawn's slideshow section is beautiful — but its default arrows, dots and slide counter don't suit every brand. Maybe you want a full-bleed, video-like hero with zero chrome, or you plan to add your own custom controls.
Targeting Dawn's real slideshow classes with a little CSS in a Custom Liquid section removes exactly what you don't want — nothing more. Below are 5 Dawn-specific recipes with live previews. Copy, paste, and get the clean hero you pictured.
1. Fashion Store – Remove Arrows, Keep Counter
Arrows out, counter stays — shoppers still see “1 / 3” so they know more slides exist, minus the visual noise.
Preview
Arrows removed — slide counter stays
Liquid Code
{% comment %} LayoutKart snippet: shopify-remove-slideshow-arrows-dots v1 - paste into a Custom Liquid section {% endcomment %}
<style>
/* Dawn: .slideshow__arrows { display: none; } */
.f8v1-show{max-width:440px;margin:0 auto;position:relative;background:#111;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.f8v1-slide{padding:56px 20px;text-align:center;font-size:22px;letter-spacing:4px}
.f8v1-arrows{display:none}
.f8v1-counter{text-align:center;padding:10px;font-size:12px;letter-spacing:2px;color:#aaa}
</style>
<div class="f8v1-show"><div class="f8v1-arrows"><button aria-label="Previous">‹</button><button aria-label="Next">›</button></div><div class="f8v1-slide">AUTUMN DROP</div><div class="f8v1-counter">1 / 3</div></div>2. Beauty Store – Remove Dots, Keep Arrows
Dots out, arrows stay — manual browsing with a softer, more romantic feel under the slide.
Preview
Dots removed — arrows stay
Liquid Code
{% comment %} LayoutKart snippet: shopify-remove-slideshow-arrows-dots v2 - paste into a Custom Liquid section {% endcomment %}
<style>
/* Dawn: .slideshow__controls .slider-counter { display: none; } */
.f8v2-show{max-width:440px;margin:0 auto;position:relative;background:#fdf2f5;font-family:Georgia,serif;overflow:hidden;border-radius:12px}
.f8v2-slide{padding:56px 20px;text-align:center;font-size:22px;font-style:italic;color:#a1234f}
.f8v2-arrow{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #f3c6d3;color:#d6336c;font-size:18px;width:38px;height:38px;border-radius:50%;cursor:pointer}
.f8v2-prev{left:12px}
.f8v2-next{right:12px}
.f8v2-dots{display:none}
</style>
<div class="f8v2-show"><button class="f8v2-arrow f8v2-prev" aria-label="Previous">‹</button><div class="f8v2-slide">The Rose Ritual</div><button class="f8v2-arrow f8v2-next" aria-label="Next">›</button><div class="f8v2-dots"><span></span><span></span></div></div>3. Electronics Store – Full Chrome Removal
Nothing but the show — arrows, dots, counter and autoplay button all stripped for a video-like hero.
Preview
Zero chrome — pure autoplay hero
Liquid Code
{% comment %} LayoutKart snippet: shopify-remove-slideshow-arrows-dots v3 - paste into a Custom Liquid section {% endcomment %}
<style>
/* Dawn: .slideshow__arrows, .slider-buttons, .slideshow__autoplay { display: none; } */
.f8v3-show{max-width:440px;margin:0 auto;position:relative;background:#071c33;color:#37e0ff;font-family:'Trebuchet MS',Verdana,sans-serif;overflow:hidden}
.f8v3-slide{padding:60px 20px;text-align:center;font-size:22px;letter-spacing:4px}
.f8v3-arrows,.f8v3-dots,.f8v3-counter,.f8v3-autoplay{display:none}
</style>
<div class="f8v3-show"><div class="f8v3-arrows"><button>‹</button><button>›</button></div><div class="f8v3-slide">BEYOND SOUND</div><div class="f8v3-dots"><span></span></div><div class="f8v3-counter">1 / 3</div><div class="f8v3-autoplay">II</div></div>4. Jewelry Store – Mobile-Only Removal
Desktop keeps its controls, mobile goes clean — thumbs need the space, not the arrows.
Preview
Controls removed on mobile only
Liquid Code
{% comment %} LayoutKart snippet: shopify-remove-slideshow-arrows-dots v4 - paste into a Custom Liquid section {% endcomment %}
<style>
/* Dawn mobile: @media (max-width: 749px){ .slideshow__arrows { display:none; } } */
.f8v4-show{max-width:440px;margin:0 auto;position:relative;background:#0c0c14;font-family:Georgia,serif;overflow:hidden;border:1px solid #e9c767}
.f8v4-slide{padding:56px 20px;text-align:center;font-size:20px;letter-spacing:4px;color:#e9c767}
.f8v4-arrow{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:1px solid #e9c767;color:#e9c767;font-size:18px;width:38px;height:38px;border-radius:50%;cursor:pointer}
.f8v4-prev{left:12px}
.f8v4-next{right:12px}
.f8v4-dots{text-align:center;padding:12px}
.f8v4-dots span{display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid #e9c767;margin:0 4px}
@media (max-width:749px){.f8v4-arrow,.f8v4-dots{display:none}}
</style>
<div class="f8v4-show"><button class="f8v4-arrow f8v4-prev" aria-label="Previous">‹</button><div class="f8v4-slide">L’ÉCLAT</div><button class="f8v4-arrow f8v4-next" aria-label="Next">›</button><div class="f8v4-dots"><span></span><span></span></div></div>5. Grocery Store – Minimal Text Links Instead
Swap, don't just strip — replace chunky default arrows with minimal “Prev / Next” text links.
Preview
Default arrows → minimal text links
Liquid Code
{% comment %} LayoutKart snippet: shopify-remove-slideshow-arrows-dots v5 - paste into a Custom Liquid section {% endcomment %}
<style>
/* Dawn: hide .slideshow__arrows, then add your own links */
.f8v5-show{max-width:440px;margin:0 auto;background:#fff;font-family:Verdana,Geneva,sans-serif;border:1px solid #cfe8d4;border-radius:12px;overflow:hidden}
.f8v5-slide{padding:52px 20px;text-align:center;font-size:20px;color:#257a36;background:#f2faf4}
.f8v5-arrows{display:none}
.f8v5-custom{display:flex;justify-content:space-between;padding:10px 18px;font-size:12px;letter-spacing:2px}
.f8v5-custom a{color:#2f9e44;text-decoration:none;font-weight:700}
</style>
<div class="f8v5-show"><div class="f8v5-arrows"><button>‹</button><button>›</button></div><div class="f8v5-slide">🥬 Weekly Veggie Box</div><div class="f8v5-custom"><a href="#">← PREV</a><a href="#">NEXT →</a></div></div>How to Add Clean Slideshow to Shopify
Every snippet above is built for Shopify’s Custom Liquid section, so you don’t need to touch a single theme file. Here’s the 2-minute setup:
- From your Shopify admin, go to Online Store → Themes.
- Click Customize next to your live theme (works with Dawn and all OS 2.0 themes).
- Open the template where you want the feature, then click Add section.
- Choose Custom Liquid from the section list.
- Copy the Liquid code from your favourite variation above and paste it into the Custom Liquid box.
- Click Save — it’s live on your storefront instantly. No app, no coding, no risk.
Customize the Slideshow Controls
Make it yours:
- Real Dawn classes — each recipe’s comment maps it to the actual Dawn selector to use on your store.
- Section scoping — prefix with your slideshow’s section ID to target one slideshow only.
- Autoplay pairing — enable slideshow autoplay in the editor for hands-free heroes.
- Restyle vs remove — variation 1 keeps the counter; restyling beats removing when orientation matters.
- Other themes — the same technique works everywhere; just swap in your theme’s class names.
More Shopify Code Sections
Keep upgrading your store with these free Liquid tutorials:
- How to Hide Slider Navigation in Shopify
- How to Hide Collection List Arrow in Shopify
- Shopify Hero Banner Text Animation (Liquid + CSS)
- Shopify Video Background Hero Section
- Shopify Animated Gradient Text Effect
- How to Remove Arrow Icons from Shopify Theme
- How to Customize Shopify Media Banner with Liquid/CSS
- Shopify Image Hover Zoom Effect
Conclusion
Dawn gives you a slideshow — but you decide how much chrome it wears. With these five recipes you can strip arrows, dots and counters precisely, per device, or swap them for something more you. Paste the CSS into a Custom Liquid section and your hero finally looks the way you pictured it: clean, cinematic, and completely yours.
Want more copy-paste Shopify sections? LayoutKart publishes free Liquid tutorials every week — no apps, no monthly fees, just clean code. Bookmark this page and check back for new effects!
