https://b3tqgwmtqccnef8v-68796285242.shopifypreview.com
Hello, I am have created a custom product-slider.liquid
Show More
{{ section.settings.title | escape }}
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product_item] %}
{{ product.title }}
{{ product.price | money }}
{% endfor %}
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and ( min-width: 1201px ) {
{% if nav_range == 2 %}
.dawn-product-slider .carousel-cell {
width: calc(49% - 10px);
}
{% elsif nav_range == 3 %}
.dawn-product-slider .carousel-cell {
width: calc(32% - 10px);
}
{% elsif nav_range == 4 %}
.dawn-product-slider .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 %}
{% schema %}
{
“name”: “Products slider”,
“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”
},
{
“type”: “text”,
“id”: “title”,
“default”: “Products slider”,
“label”: “t:sections.featured-collection.settings.title.label”
}
] ,
“blocks”: [
{
“type”: “card”,
“name”: “Product card”,
“settings”: [
{
“type”: “product”,
“id”: “product_item”,
“label”: “Choose the product you want to displayed”
}
]
}
] ,
“presets”: [
{
“name”: “Product slider”,
“category”:“Custom”
}
]
}
{% endschema %}
However, the background colour does not come up (cover) the tile. I want it to INCLUDE the title. See image:
I want the background colour (#F3F3F3) of the slider to apply to the whole of that section not just behind the carousel.
Thanks in advance! Best
