Solved

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

SharonP
Visitor
1 0 0

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!!

slider.png


mobile.jpg

Accepted Solution (1)

Xipirons
Shopify Partner
136 24 30

This is an 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.

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

View solution in original post

Replies 2 (2)

Xipirons
Shopify Partner
136 24 30

This is an 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.

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Sweet_Savior_3
Shopify Partner
1158 94 112

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

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!