Hi @gwilliams
You can try follow this path:
Themes => edit code => sections => Add a new section.
and add this code to.
Then in theme customize, you can add section "Product Carousel"
<style>
.slick-dots li button:before,
.slick-dots li a:before {
color: #3a3a3a !important;
}
.section-header__title {
text-align: center !important;
}
.box-wrapper{
width: 100%;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
margin: 5px;
}
.slide-img {
height: 200px;
position: relative;
}
.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
box-sizing: border-box;
}
.detail-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: left;
padding: 10px 10px;
box-sizing: border-box;
background-color: {{ section.settings.detail-box }};
}
.type {
display: flex;
flex-direction: column;
}
.type a {
color: ##134D47;
margin: 0px 28px;
font-weight: 600;
letter-spacing: 0.5px;
padding-right: 0px;
}
.type span {
color: #FFFFFF;
}
.price {
color: #333333;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100
%;
height: 100%;
background-color: {{ section.settings.color_bg--overlay | color_modify: 'alpha', 0.6}};
display: flex;
justify-content: center;
align-items: center;
}
.buy-btn {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #977358;
color: #FFFFFF;
font-weight: 700;
letter-spacing: 1px;
border-radius: {{section.settings.buybtn-radius}}px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.buy-btn:hover {
color: #FFFFFF !important;
background-color: {{ section.settings.color_bg--buyBtn }};
transition: all ease 0.3s;
}
.overlay {
visibility: hidden;
}
.slide-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
:focus {
outline: none !important;
}
.slick-dots li button::before {
font-size: 22px !important;
}
span .icon.icon-chevron-left,
span .icon.icon-chevron-right {
display: none !important;
}
ul.slick-dots {
display: none !important;
}
@media screen and (max-width: 479px) {
/* start of phone styles */
.box-wrapper {
width: 265px;
}
.type a {
font-size: 16px;
}
.type span {
font-size: 16px;
}
.detail-box {
padding: 10px !important;
}
}
.item-a {
padding: 10px;
}
</style>
{%- if section.settings.arrows -%}
<style>
span i.slick-arrow-left {
height: 35px;
width: 35px;
background: #fff;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 1%;
top: 45%;
border-radius: 30%;
opacity: .7;
z-index: 1;
cursor: pointer;
}
span i.slick-arrow-right {
height: 35px;
width: 35px;
background: #fff;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 1%;
top: 45%;
border-radius: 30%;
opacity: .7;
cursor: pointer;
}
span .icon.icon-chevron-left,
span .icon.icon-chevron-right {
display: inline !important;
z-index: 1;
fill: inherit;
}
@media screen and (max-width: 479px) {
/* start of phone styles */
span i.slick-arrow-left,
span i.slick-arrow-right {
display: none !important;
}
}
</style>
{%- endif -%}
{%- if section.settings.dots -%}
<style>
ul.slick-dots {
display: block !important;
}
</style>
{%- endif -%}
{%- if section.settings.enable -%}
<div class="index-section">
<div class="page-width">
{%- if section.settings.show_title -%}
<h2 class="section-header__title">
{%- for block in section.blocks -%}
{{ collections[block.settings.collection].title }}
{%- endfor -%}
</h2>
{%- endif -%}
<section>
<ul class="slick slick-product-list">
{%- for block in section.blocks -%}
{%- for product in collections[block.settings.collection].products -%}
<li class="item-a">
<!--box-slider--------------->
<div class="box-wrapper">
<!--img-box---------->
<div class="slide-img">
<img style="object-fit: contain;" src="{{ product.featured_image.src | img_url: "large" }}"
alt="{{ product.featured_image.alt | escape }}">
<!--overlayer---------->
<a href="{{ product.url | within: collection }}">
<div class="overlay">
<!--buy-btn------>
<span class="buy-btn">{{ section.settings.btn-title }}</span>
</div>
</a>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--price-------->
<a href="{{ product.url | within: collection }}" class="price">{{ product.price | money }}</a>
<!--type-------->
<div class="type">
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
<span>{{ product.vendor }}</span>
</div>
</div>
</div>
</li>
{% else %}
The collection is empty!
{%- endfor -%}
{%- endfor -%}
</ul>
</section>
</div>
</div>
{%- endif -%}
{% schema %}
{
"name": "Product Carousel",
"settings": [
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
},
{
"type": "checkbox",
"id": "show_title",
"label": "Show title",
"default": true
},
{
"type": "checkbox",
"id": "arrows",
"label": "Show arrows",
"default": true
},
{
"type": "checkbox",
"id": "dots",
"label": "Show Slider Dots",
"default": true
},
{
"type": "color",
"id": "color_bg--overlay",
"label": "Overlay Color",
"default": "#000"
},
{
"type": "color",
"id": "detail-box",
"label": "Detail Box",
"default": "#f3f3f3"
},
{
"type": "text",
"id": "btn-title",
"default": "View More",
"label": "Button Title"
},
{
"type": "color",
"id": "color_bg--buyBtn",
"label": "Button Color on Hover",
"default": "#CBD5CC"
},
{
"type": "range",
"id": "buybtn-radius",
"min": 1,
"max": 20,
"step": 1,
"unit": "px",
"label": "Button Radius",
"default": 20
},
{
"type": "range",
"id": "card-width",
"min": 300,
"max": 440,
"step": 10,
"unit": "px",
"label": "Card Width",
"default": 350
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"limit": 1,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Products carousel",
"category": "Carousel Sections"
}
]
}
{% endschema %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
$('.slick').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
</script>
