Go to your Shopify theme code editor, scroll down to the Asset folder and create a .js file and name it flickity then create a .css file and name it flickity aswell. You should now have 2 files flickity.js and flickity.css.
Now head over to the Section folder and create a new section, name it what ever you like, in this case, I’ve called the new section ‘featured-cards‘ in the newly created section, remove any created code, paste the below code.
<div class="featured-cards">
<div class="carousel">
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product_item] %}
<div class="carousel-cell">
<a href="{{ product.url }}">
<img data-flickity-lazyload="{{ product.featured_image | img_url: 'master' }}" border="0" />
<h4>{{ product.title }}</h4>
<h4>{{ product.price | money }}</h4>
<div class="product-btn">Shop Now</div>
</a>
</div>
{% endfor %}
</div>
<!--- Coded by bluish.io --->
</div>
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and ( min-width: 1201px ) {
{% if nav_range == 2 %}
.featured-cards .carousel-cell {
width: calc(49% - 10px);
}
{% elsif nav_range == 3 %}
.featured-cards .carousel-cell {
width: calc(32% - 10px);
}
{% elsif nav_range == 4 %}
.featured-cards .carousel-cell {
width: calc(24% - 10px);
}
{% endif %}
}
.flickity-page-dots .dot {
background: {{ section.settings.navigation_color }};
}
.flickity-button-icon {
color: {{ section.settings.navigation_color }};
}
{% endstyle %}
<script>
var elem = document.querySelector('.featured-cards .carousel');
var flkty = new Flickity( elem, {
contain: true,
imagesLoaded: true,
lazyLoad: 2,
wrapAround: true,
pageDots: false,
});
{% if request.design_mode %}
document.addEventListener("shopify:section:load", function(event) {
var elem = document.querySelector('.featured-cards .carousel');
var flkty = new Flickity( elem, {
contain: true,
imagesLoaded: true,
lazyLoad: 2,
wrapAround: true,
pageDots: false,
});
});
{% endif %}
</script>
{% schema %}
{
"name": "Product cards",
"settings": [
{
"type": "range",
"id": "navigation_amount",
"min": 2,
"max": 4,
"step": 1,
"default": 3,
"label": "Change the number of cards in view"
},
{
"type": "color",
"id": "navigation_color",
"label": "Change color of the pagination|navigation|scrollbar"
}
] ,
"blocks": [
{
"type": "card",
"name": "Product card",
"settings": [
{
"type": "product",
"id": "product_item",
"label": "Choose the product you want displayed"
}
]
}
] ,
"presets": [
{
"name": "Featured cards",
"category":"Custom"
}
]
}
{% endschema %}
Add Code in Theme.css
Lastly, go to your main css file, in this case we are using the Dawn theme, so the main css file is base.css, at the end of the file paste the below code.
.featured-cards {
max-width: 1600px;
margin: auto;
padding: 0 20px;
padding-bottom: 32px;
margin-top: 55px;
}
.featured-cards img {
width: 100%;
}
.featured-cards .carousel-cell {
background: #fff;
border-radius: 16px;
margin: auto;
padding: 18px;
margin: 12px;
width: calc(32% - 10px);
}
.product-btn {
width: 100%;
}
@media only screen and ( max-width: 767px ) {
.featured-cards .carousel-cell {
width: calc(50% - 10px);
}
}
@media only screen and ( max-width: 479px ) {
.featured-cards .carousel-cell {
width: calc(100% - 10px);
}
}
And you are now done! you can now create a product slider on your Shopify home page. The product slider is named Featured cards in your Shopify theme customizer.
No comments: