This is product recommendation section with slider (Swiper.js). Its take products from Shopify API and then displays them in slider.
Settings:
- Label text
Card settings
- Show secondary image while hover.
- Show rating in card.
Slider settings
- Max product range.
- Transition animation.
- Slider speed. (transition duration)
- Enable slider autoplay
- Slider autoplay delay
- Download project
- Past all from
sectionfolder to your theme folder. - If you dont use Swiper in your project, you need to connect the
swiper-bundle.min.cssandswiper-bundle.min.jsfiles inlayout/theme.liquidlike this:
<head>
...some code
{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
...some code
<script src="{{ 'swiper-bundle.min.js' | asset_url }}"></script>
...some code
</head>- To adapt this section to your theme, you can change the styles in file
assets/slider-horizontal.css. You also need to select the size of the image in theproduct card(if you want to use my product card snippet), this can be done innippets/produt-card.liquidin lines 5 and 7. - Add section to page.
- Configure section in theme editor.
- Enjoy (～￣▽￣)～
P.s. I used Bootstap 5 Grid, so if you using another grid system, change html in sections/product-recommendation.liquid.
P.P.s.\ My project include product-card snippet, so if you dont need this, you can delete this file and use your snippet instead.
This script retrieves products from the Shopify API and then gives them to the slider.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent