Customizable product card slider with dots on mobile. App or code?

[SharonP]

Hi!
I am trying to get a product card slider like www.rhodeskin.com on my homepage.
Features I like:

1. Rounded (radius) corner design.
2. Product cards have wide spacing, but the next slide is nicely visible (on mobile too).
3. Dots on mobile, arrows on desktop.
4. Custom button text  (each button has a different text, instead of the same "Buy now" for all products).

Is this something that can be achieved by code? Or an app that gives this kind of customization?

Thanks!!

[Xipirons · Accepted solution]

Hi @SharonP 

Yes, you can achieve a product card slider like the one on www.rhodeskin.com on your Shopify homepage using custom code and the Swiper.js library (like on rhodeskin, I've checked the source code) without the need for a paid app.

By implementing the slider functionality directly in your theme with Swiper.js, you can avoid recurring monthly app fees and have full control over the customization.

To create a product card slider with the desired features using Swiper.js, you can follow these steps:

1. Download the necessary Swiper.js files and add them to your Shopify theme's assets folder.
2. Create a new section file (e.g., product-slider.liquid) in your Shopify theme's sections folder.
3. In the product-slider.liquid file, add the necessary HTML structure for the Swiper.js slider container and product cards. Use appropriate classes and IDs for styling and functionality.
4. Include the Swiper.js CSS and JavaScript files in your theme's theme.liquid file or in the section file itself.
5. Add custom CSS styles in the <style> tag within the section file or in your theme's main CSS file. Customize the styles to achieve the desired rounded corner design, wide spacing between product cards, and visibility of the next slide on both desktop and mobile.
6. Initialize the Swiper.js slider using JavaScript code in the <script> tag within the section file. Configure the slider options, such as enabling dots on mobile, arrows on desktop, and any other desired settings. (documentation here : https://swiperjs.com/swiper-api#initialize-swiper)
   
7. Use Liquid templating to dynamically populate the product cards with data from your Shopify products. Retrieve the relevant product information, such as title, image, price, and a custom button text for each product.
8. Customize the button text for each product card by utilizing metafields or tags associated with the products. You can assign specific button texts to each product and display them accordingly in the slider.
9. Add the necessary schema settings in the {% schema %} tag to make the section customizable from the Shopify theme editor. Include settings for selecting the products to display, customizing the slider options, and any other relevant configurations.

By implementing the product card slider using custom code and Swiper.js, you have complete control over the design and functionality.

Swiper.js provides a wide range of options and features that allow you to customize the slider to match your theme's aesthetics and ensure a seamless integration without relying on a third-party app.

[Sweet_Savior_3]

Hello @SharonP 

Welcome to Shopify Community.

You don't have to go with an app to add slider, this can be custom coded using slider libraries like Slick, Swiper or Flickity. 

Its pretty easy to integrate slider section unless you dont have the code knowledge. Integrating yourself can break the theme. So you can hire a developer at reasonable cost to integrate this to your store using theme's styles.

Let me know if I can be helpful in anyways.

Thanks