How to create a product slider bar (dawn)

Store Design
1

Hey,

I have been looking everywhere to find out on how to do this. I want to create a product slider bar that only shows in mobile view. Do I need a code or how can I do this. My store url is: dieux.store and I want it to be like on the site gadzhi.com

Thanks for your help in advance!

IMG_3096.jpeg
IMG_3096.jpeg1170×2532 111 KB

IMG_3097.jpeg
IMG_3097.jpeg1170×2532 99.2 KB

1 Like
2

Hi @dieuxstudios

Thanks for reaching out Shopify community !

You can definitely create a product slider that only appears on mobile view, and you don’t necessarily need heavy coding for it. If you’re using Shopify, there are a couple of ways to go about this:

Option 1: Use Shopify Sections (if you’re comfortable editing code)

You can wrap your slider section in a media query to only show on mobile. For example, in your theme’s .liquid or .css files:

@media only screen and (max-width: 768px) {
  .mobile-slider {
    display: block;
  }
}

@media only screen and (min-width: 769px) {
  .mobile-slider {
    display: none;
  }
}

Then make sure your product slider section or block has the class mobile-slider.

Option 2: Use a Shopify App
There are several slider/carousel apps that let you customize visibility per device. Some even have a drag-and-drop editor for easy setup.

Option 3: Custom Code Like Gadzhi.com

If you want something very specific like on gadzhi.com, you’d likely need some JavaScript and styling tweaks.

3

Hey Dotsquares,

Thanks for your quick response. In which specific theme file should i put the code, and have you any apps that you recommend that support the slider that i want. Thank you!

4

Hi there @dieuxstudios There’s a section in this blog specifically set to show how to create it in the dawn theme so you should go through it and follow the steps put here https://shopidevs.com/shopify-product-slider/

Let me know if it works for you!