How To Add Clickable Slider in Shopify Without Code?

If you’re a Shopify store owner, you know that customizing your store’s design can be both exciting and challenging, especially if you don’t want to touch any code. One common challenge is making an entire slideshow image clickable, rather than just a button. Unfortunately, this isn’t natively possible in Shopify’s Dawn theme or other free themes. But don’t worry — you don’t need to know how to code! In this guide, we’ll show you how to achieve this with the CS Clickable Banner Slideshow App, allowing you to make your slideshow images fully clickable without any coding.

Step 1: Install the CS Clickable Banner Slideshow App

1. Visit the Shopify App Store and search for the CS Clickable Banner Slideshow app.
2. Click on Add App to install it.
3. Once installed, you’ll see the app’s dashboard. From here, you can enable the clickable slideshow feature.

Step 2: Default Slideshow Setup in Shopify

Let’s take a look at how the default slideshow in the Dawn theme works:

1. Go to your Shopify Admin, then click Online Store > Themes.
2. Click on Customize to open the theme editor.
3. In the theme editor, add a Slideshow section. This section allows you to upload images and add a button link to each image.
4. However, by default, you can only link the button, not the entire image. To make the whole image clickable, follow the steps below.

Step 3: Enable the Clickable Banner Feature

1. Open the CS Clickable Banner Slideshow app from your Shopify dashboard.
2. In the app, click on Enable to activate the clickable slideshow feature.
3. Once enabled, go back to your theme editor by clicking Online Store > Customize.
4. Scroll down to Add Section in the theme editor and look for the CS Clickable Banner under the Apps section.
5. Click on Add to insert the CS Clickable Banner Slideshow into your store.

Step 4: Upload Images to the Slideshow

1. You’ll now see the option to upload your slideshow images directly in the CS Clickable Banner Slideshow section.
2. Click Add Image to upload images for your desktop and mobile versions. The app allows you to upload separate images for desktop and mobile, so your slideshow looks perfect on all devices.
3. Upload the images you want to display for both desktop and mobile views.

Step 5: Customize Your Slideshow

Once your images are uploaded, you can further customize your slideshow:

1. Pagination Options: Choose between arrows or dots for navigation.
2. Animation Duration: Adjust the timing of the slideshow, anywhere from 2 to 10 seconds.
3. Mobile Optimization: If your images appear cut off on mobile, you can upload separate portrait-oriented images for mobile devices.

Step 6: Save and Preview

1. After making your adjustments, click Save to apply the changes.
2. Click on the three dots in the top-right corner of the editor, then select View to preview your slideshow.
3. Scroll down to see how the clickable slideshow appears on both desktop and mobile.

Step 7: Optimize for Mobile Devices

If your images don’t look right on mobile, follow these steps to adjust them:

1. Use online tools to convert your landscape images to portrait images for the mobile version of your slideshow.
2. Upload the portrait versions in the Mobile Banner section of the CS Clickable Banner Slideshow app.
3. Save and preview the changes again using Shopify’s inspect tool to ensure it looks perfect on all devices.

Final Thoughts
The CS Clickable Banner Slideshow app makes it incredibly easy to create a fully clickable slideshow in Shopify without needing to write any code. With the ability to upload separate images for desktop and mobile, customize pagination styles, and adjust animation timings, you can ensure your store looks polished and professional on all devices.