Hello, Im using the debutify theme on shopify and I added in a slideshow section as my banner on my homepage. I want to make the entire image be a clickable link to my collection page. I know that there's a button option, but it is right in the middle of the image and looks unappealing
Kindly share your store URL so,
I can solve it perfectly.
Thank You.
2 Likes
1 Like
Hi here’s my url: www.dogstrom.co
1 Like
thanks i have update code please check also if someone some issue please try this code
hero.liquid Section code
{% if section.blocks.size > 0 %}
{% if section.blocks.size > 1 %}
{% assign hero_slick = true %}
{% else %}
{% assign hero_slick = false %}
{% endif %}
{% include 'hero-header' %}
{% for block in section.blocks %}
{% if block.settings.image == blank %}
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.img_link != blank %}
{% endif %}
{% if block.settings.title != blank %}
## {{ block.settings.title | escape }}
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_label != blank and block.settings.button_link != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% unless block.settings.overlay %}
{% endunless %}
{% endfor %}
{% endif %}
{% schema %}
{
"name": "Slideshow",
"class": "hero-section",
"max_blocks": 4,
"settings": [
{
"type": "select",
"id": "section_height",
"label": "Section height (desktop)",
"default": "xlarge",
"options": [
{
"label": "Extra Small",
"value": "xsmall"
},
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
},
{
"label": "Full",
"value": "xlarge"
}
]
},
{
"type": "select",
"id": "section_height_mobile",
"label": "Section height (mobile)",
"default": "xlarge",
"options": [
{
"label": "Extra Small",
"value": "xsmall"
},
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
},
{
"label": "Full",
"value": "xlarge"
}
]
},
{
"type": "header",
"content": "Slider options"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto rotate",
"default": true
},
{
"type": "checkbox",
"id": "dots",
"label": "Show dots",
"default": true
},
{
"type": "checkbox",
"id": "arrows",
"label": "Show arrows",
"default": true
},
{
"type": "range",
"id": "autoplayspeed",
"label": "Slide changes every",
"min": 3,
"max": 10,
"step": 1,
"unit": "s",
"default": 5
}
],
"blocks" : [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "img_link",
"label": "Image link"
},
{
"type": "select",
"id": "image_position",
"label": "Image position",
"default": "center center",
"options": [
{
"label": "Top left",
"value": "top left"
},
{
"label": "Top center",
"value": "top center"
},
{
"label": "Top right",
"value": "top right"
},
{
"label": "Middle left",
"value": "center left"
},
{
"label": "Middle center",
"value": "center center"
},
{
"label":"Middle right",
"value": "center right"
},
{
"label":"Bottom left",
"value": "bottom left"
},
{
"label": "Bottom center",
"value": "bottom center"
},
{
"label": "Bottom right",
"value": "bottom right"
}
]
},
{
"type": "checkbox",
"id": "overlay",
"label": "Show overlay",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Slideshow."
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.
"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"default": "text-center",
"options": [
{
"value": "",
"label": "Left"
},
{
"value": "text-center",
"label": "Center"
},
{
"value": "text-right",
"label": "Right"
}
]
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Shop now"
},
{
"type": "url",
"id": "button_link",
"label": "Button link",
"default": "/collections/all"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "btn--primary",
"options": [
{
"value": "",
"label": "Default"
},
{
"value": "btn--primary",
"label": "Full"
},
{
"value": "btn-outline-primary",
"label": "Outline"
}
]
}
]
}
],
"presets": [
{
"name": "Slideshow",
"category": "Image",
"blocks": [
{
"type": "slide"
}
]
}
]
}
{% endschema %}
1 Like
Thank you very much. Works perfectly
1 Like
its my pleasure to help us