How can I effectively add a link to a banner grid?

[dsmallwood82]

Is there any way to add a working link to banner grid? It doesn’t seem to be working. I’m hoping there is a code I can put to make it happen. I’ve already checked to see if the apps was stopping it from showing up and I double checked to make sure the links are there. Does anyone have any idea to make this work?

https://www.natural-ish.com the site is live.

[NomtechSolution]

The issue is due to code in theme file for the link.

[zaczee]

Hi,

To make the entire image clickable we need to customize the slideshow.liquid file

[dsmallwood82]

Thank you, I thought it would be the banner grid file that need to edited. banner-grid.liquid since that is the name of it.

Do you or anyone know how to make it clickable?

{% for block in section.blocks %}

{%if block.settings.banner_title != '' %}

{{ block.settings.banner_title }}

{%endif%}

{%if block.settings.banner_button_text != ‘’ %}
{{ block.settings.banner_button_text }}
{% endif %}

{% endfor %} {% schema %} { "name": "Banner Grid1", "settings": [ { "type": "header", "content": "Section Padding" }, { "type" : "paragraph", "content" : "Desktop / Laptop / tablet" }, { "type": "range", "id": "banner1_padding_top", "label": "Section Padding Top", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 60 }, { "type": "range", "id": "banner1_padding_bottom", "label": "Section Padding Bottom", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 60 }, { "type" : "paragraph", "content" : "Mobile" }, { "type": "range", "id": "banner1_padding_top_xs", "label": "Section Padding Top", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 40 }, { "type": "range", "id": "banner1_padding_bottom_xs", "label": "Section Padding Bottom", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 40 } ], "blocks":[ { "type": "full_width_banner", "name": "Banner Grid", "settings": [ { "type": "image_picker", "id": "banner_img", "label": "Banner BG Image", "info": "Recommended Size: 1080px x 600px" }, { "type": "paragraph", "content": "Banner Title" }, { "type": "text", "id": "banner_title", "label": "Banner Title", "default": "Chair Collection" }, { "type": "color", "id": "banner_title_color", "label": "Banner Title Color", "default": "#67381a" }, { "type": "paragraph", "content": "Banner Label" }, { "type": "paragraph", "content": "Banner Button" }, { "type": "text", "id": "banner_button_text", "label": "Button Text", "default": "Shop Now" }, { "type": "url", "id": "banner_url", "label": "Button URL" }, { "type": "radio", "id": "banner_content_position", "label": "Content Position", "options": [ { "label": "Content Left", "value": "left" }, { "label": "Content Right", "value": "right" }, { "label": "Content Center", "value": "center" } ], "default": "left" }, { "type": "radio", "id": "banner_text_position", "label": "Text Position", "options": [ { "label": "Text Left", "value": "left" }, { "label": "Text Right", "value": "right" }, { "label": "Text Center", "value": "center" } ], "default": "left" } ] } ], "presets":[ { "name": "Banner Grid1", "category": "Banner Grid", "blocks":[ { "type": "full_width_banner" }, { "type": "full_width_banner" } ] } ] } {% endschema %} .banner1{ padding-top: {{ section.settings.banner1_padding_top }}px; padding-bottom: {{ section.settings.banner1_padding_bottom }}px; }

@media(max-width: 767px){
.banner1{
padding-top: {{ section.settings.banner1_padding_top_xs }}px;
padding-bottom: {{ section.settings.banner1_padding_bottom_xs }}px;
}
.banner-grid.banner1 .nth-child{
margin-top: 20px;
}
.banner-grid.banner1 .nth-child:first-child{
margin-top: 0px;
}
}

.banner1 .banner-block{
position: relative;
}
.banner-grid.banner1{
display: flex;
padding-left: 45px;
padding-right: 45px;
}
.banner-grid.banner1 .banner-block:last-child {
margin: 0;
}
.banner-grid.banner1 .banner-block {
width: 50%;
margin-right: 45px;
}
.banner1 .banner-block .banner-content{
width: 50%;
position: absolute;
bottom: 20px;
z-index: 1;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
}
.banner-grid.banner1 .banner-block:before {
position: absolute;
content: “”;
left: 0;
top: 0;
background: rgba(0, 0, 0, .3);
width: 100%;
height: 100%;
}
.banner-grid.banner1 .banner-block:after {
position: absolute;
content: “”;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
z-index: 1;
border: 1px solid #fff;
transition: all 300ms linear;
opacity: 0;
}
.banner-grid.banner1 .banner-block:hover:after{
opacity: 1;
}
@media (max-width: 1199px) {
.banner1 .banner-block .banner-content{
width: 50%;
}
}

.banner1 .banner-block .banner-content.banner-content-left{
{%- if settings.enable_rtl -%}
right: 50px;
{%- else -%}
left: 50px;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-content-right{
{%- if settings.enable_rtl -%}
left: 60px;
{%- else -%}
right: 60px;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-content-center{
left: 0px;
right: 0px;
margin: 0 auto;
}
.banner1 .banner-block .banner-content.banner-text-left{
{%- if settings.enable_rtl -%}
text-align: right;
{%- else -%}
text-align: left;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-text-right{
{%- if settings.enable_rtl -%}
text-align: left;
{%- else -%}
text-align: right;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-text-center{
text-align: center;
}
@media (max-width: 1199px) {
.banner1 .banner-block .banner-content.banner-content-left{
{%- if settings.enable_rtl -%}
right: 15px;
{%- else -%}
left: 15px;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-content-right{
{%- if settings.enable_rtl -%}
left: 15px;
{%- else -%}
right: 15px;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-content-center{
left: 15px;
right: 15px;
margin: 0 auto;
}
}

/* banner text css */
.banner1 .banner-block .banner-content h2 {
font-size: 42px;
font-weight: 500;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
}
.banner1 .banner-block .banner-content a.btn{
padding: 0 0px 5px;
background: transparent;
border: none;
border-bottom: 2px solid;
margin-top: 20px;
opacity: 0;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
}
.banner1 .banner-block:hover .banner-content a.btn {
opacity: 1;
}
.banner1 .banner-block:hover .banner-content {bottom: 50px;}
.banner-grid.banner1 .banner-block:hover:after {
opacity: 1;
}
@media (max-width: 1199px) {
.banner1 .banner-block .banner-content h2{
font-size: 20px;
}
}
@media (max-width: 767px) {
.banner-grid.banner1 {
flex-direction: column;
}
.banner-grid.banner1 .banner-block{
width: 100%;
}
.banner-grid.banner1 .banner-block:last-child{
margin-top: 15px
}
}