Hello!
I added a slide show to a featured collection in my home page uding Debut theme, but I’d like to make a change. At the moment you have a “view” button that appears when you select the photo you are interested in and to open the product you have to click that button (see the photo) so if you don’t click exactly on that button the product doesn’t open. I’d like not to have that button and just open the product by clicking on the photo like you normally do in theme Debut.
The code I’m using to modify the slide show is this one: (sorry for the long message!) If you want to have a look, my store is: https://inkitstore.com and psw is: inkit.
Can anybody help me doing this? Thank you in advance for the help!
.slick-dots li button:before, .slick-dots li a:before { color: #3a3a3a !important; } .section-header__title { text-align: center !important; } .box-wrapper{ width: {{ section.settings.card-width}}px; 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: 97%; 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; } }{%- if section.settings.arrows -%}
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; } }{%- endif -%}
{%- if section.settings.dots -%}
ul.slick-dots { display: block !important; }{%- endif -%}
{%- if section.settings.enable -%}
{%- for block in section.blocks -%} {{ collections[block.settings.collection].title }} {%- endfor -%}
{%- endif -%}-
{%- for block in section.blocks -%}
{%- for product in collections[block.settings.collection].products -%}
-
{{ product.price | money }}{{ product.title }} {{ product.vendor }}
{% else %}
The collection is empty!
{%- endfor -%}
{%- endfor -%}
{% 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 %}