Documentation

Complete guide to setting up and customizing DC Image Slideshow Slider

Installation & Setup

1Open the Theme Editor

From your Shopify admin, go to Online Store → Themes and click Customize on your active theme.

2Add the Slideshow Section

Click Add section in the left sidebar, then search for DC Image Slideshow. Click it to add it to your page.

3Set Full Width

For the best visual impact, enable the full-width option on the section. This makes the carousel span the entire page width.

4Add Your Slides

Click Add slide to create slides. Upload an image, set a link, and optionally add kicker text and a title for each slide.

Tip: You can add the slideshow to any page — homepage, collection pages, product pages, or custom landing pages. Just navigate to the page template and add the section.

Section Settings

These settings control the overall appearance and behavior of the slideshow.

Setting	Description	Default
Active slide width	Width of the focused slide as a percentage of the container	60%
Desktop aspect ratio	Width-to-height ratio on desktop screens	21:9
Mobile aspect ratio	Width-to-height ratio on mobile devices	16:9
Max height	Maximum height in pixels to prevent oversized carousels	600px
Corner radius	Rounded corners on slides (in pixels)	12px
Overlay darkness	Controls the gradient overlay intensity for text readability	40%
Transition speed	How fast slides animate when switching (in seconds)	0.6s
Auto-play	Automatically advance slides at a set interval	Off
Auto-play interval	Seconds between automatic slide changes	5s

Slide Settings

Each slide can be individually configured with the following options.

Setting	Description
Image	The main slide image displayed on desktop. Use high-quality images for best results.
Mobile image	Optional separate image for mobile devices. If not set, the desktop image is used.
Link	URL the slide links to when clicked. Can be a product, collection, page, or external URL.
Kicker text	Small label text displayed above the title (e.g., "New Collection", "Sale").
Slide title	Large heading text displayed on the slide overlay.

Tip: Use the kicker text for short labels like "New Arrival" or "Limited Offer" and the title for the main message.

Mobile Optimization

The slideshow is fully responsive out of the box. Here are ways to optimize the mobile experience:

Separate Mobile Images

Desktop images are often wide (landscape), which can look too small on mobile screens. Upload separate mobile images with a taller aspect ratio for a better fit on phones.

Mobile Aspect Ratio

Use the Mobile aspect ratio setting to control the height of slides on mobile. A ratio like 4:3 or 1:1 works well for phone screens.

Touch Navigation

Visitors can swipe left and right to navigate between slides on touch devices. Navigation arrows are also displayed for accessibility.

Best Practices

Image Sizes

Desktop: Use images at least 1600px wide for sharp display on high-resolution screens
Mobile: Use images at least 800px wide
Format: JPEG for photos, PNG for graphics with text
File size: Keep images under 500KB for fast loading. Shopify automatically optimizes images, but starting with a smaller file helps.

Content Tips

Keep overlay text short — one line for the kicker, one line for the title
Use high-contrast images so text remains readable with the overlay
Link every slide to a relevant page to drive traffic
Use 3-5 slides for the best engagement. Fewer is often better than more.

Performance

The slideshow loads only the CSS and JavaScript it needs
Images are lazy-loaded by Shopify's CDN
No external scripts, fonts, or tracking code
Uninstalling the app removes all code automatically — zero residue

Uninstalling

DC Image Slideshow Slider is a Theme App Extension. When you uninstall the app from your Shopify admin, all slideshow code is automatically removed from your theme. No manual cleanup is needed, and no code is left behind.

Need Help?

If you have questions or run into any issues:

Check the FAQ for common questions
Email us at dev@dreamcommerce.net
Use the "Contact Support" button inside the app

We typically respond within 24 hours.