Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Kindly share your store URL so,
I can solve it perfectly.
Thank You.
This is an accepted solution.
Kindly share your store URL so,
I can solve it perfectly.
Thank You.
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 %}
<div id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="hero-section">
{% include 'hero-header' %}
<div id="Hero-{{ section.id }}" class="hero-container hero-index hero-header{% if hero_slick %} hero-slick{% endif %}"
{% if hero_slick %}
data-hero-slick="{{ hero_slick }}"
data-autoplay="{{ section.settings.autoplay }}"
data-autoplayspeed="{{ section.settings.autoplayspeed | times: 1000 }}"
data-dots="{{ section.settings.dots }}"
data-arrows="{{ section.settings.arrows }}"
{% endif %}>
<!-- Blocks -->
{% for block in section.blocks %}
<div class="hero hero-{{ block.id }}
hero--{{ section.settings.section_height }}
hero-mobile-{{ section.settings.section_height_mobile }}
overlay
lazyload
hero-parallax
{% unless forloop.first == true %}lazypreload{% endunless %}
{% if hero_slick %}hero__slide slide--{{ block.id }}{% endif %}"
{% if block.settings.image %}
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ block.settings.image_position }}; background-image: url('{{ block.settings.image | img_url: 'medium' }});"
{% endif %}
{{ block.shopify_attributes }}>
{% if block.settings.image == blank %}
<div class="placeholder-background">
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
{% if block.settings.img_link != blank %}
<a href="{{ block.settings.img_link }}" class="img-link"></a>
{% endif %}
<div class="hero__inner">
<div class="hero__text-wrapper {{ block.settings.text_alignment }}">
<div class="grid">
<div class="grid__item large--eight-twelfths push--large--two-twelfths one-whole hero-content">
{% if block.settings.title != blank %}
<h2 class="hero__title">{{ block.settings.title | escape }}</h2>
{% endif %}
{% if block.settings.text != blank %}
<div class="rte hero__text">{{ block.settings.text }}</div>
{% endif %}
{% if block.settings.button_label != blank and block.settings.button_link != blank %}
<a href="{{ block.settings.button_link }}" class="btn {{ block.settings.button_style }} hero__btn">
{{ block.settings.button_label | escape }} <span class="fas fa-arrow-right" aria-hidden="true"></span>
</a>
{% endif %}
</div>
</div>
</div>
</div>
{% unless block.settings.overlay %}
<style>
.hero-{{ block.id }}.overlay:after{
background-color: transparent;
}
</style>
{% endunless %}
</div>
{% endfor %}
</div>
<div class="slick-navigation">
<button class="slick-arrows slick-prev">
<span class="fas fa-arrow-left"></span>
</button>
<div class="slick-dots-container"></div>
<button class="slick-arrows slick-next">
<span class="fas fa-arrow-right"></span>
</button>
</div>
</div>
{% endif %}
<style>
a.img-link {
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 100%;
z-index: 6666;
}
</style>
{% 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": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>"
},
{
"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 %}
Thank you very much. Works perfectly
its my pleasure to help us
Please share store URL!
Thanks!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024