The link for the banner grid is not working

Shopify Discussion
1

For some reason the link is not working for the banner grids. Is there a fix?

Screenshot (74).png
Screenshot (74).png714×798 154 KB

2

https://www.natural-ish.com

Still working on it but it is live

3

  1. Check Link URLs: Ensure that the URLs you have set for the banner grid’s links are valid and correctly formatted. Double-check for any typos or missing characters that might be causing the links to not work as intended. Everything was is correct, still not working.

  2. Verify Theme Settings: Navigate to your theme settings in the Shopify admin panel and confirm that the correct settings are configured for the banner grid and its associated links. Make sure the correct URL or page is selected, and check if there are any additional options that may affect the link functionality. Everything seems right

  3. Clear Cache and Cookies: Sometimes, cached files or cookies can interfere with website functionality. Clear your browser’s cache and cookies, then reload the page to see if the links start working again. Cleared It. Still didn’t work

  4. Disable Third-Party Apps or Scripts: If you have installed any third-party apps or added custom scripts to your Shopify store, temporarily disable them one by one to see if they are causing conflicts with the banner grid links. This will help identify if any specific app or script is causing the issue. I disables the apps and still not working

  5. Test on Different Browsers or Devices: Try accessing your Shopify store and testing the banner grid links on different browsers (Chrome, Firefox, Safari, etc.) and devices (desktop, mobile, tablet) to see if the issue is browser-specific or device-specific. Same

  6. Contact Shopify Support or Theme Developer: If none of the above solutions resolve the issue, reach out to Shopify support or the developer of your theme. They should be able to provide further assistance and guidance specific to your theme and setup.Remember to make backups or take screenshots before making any changes to your theme settings or code, just in case you need to revert any modifications. I will try this

Is there anything missing in the code to make the banner 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
}
}

4

Had the same issue.

I changed this css code:
.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;
}

by this one:
.banner-grid.banner1 .banner-block>a:before {
position: absolute;
content: “”;
left: 0;
top: 0;
background: rgba(0, 0, 0, .3);
width: 100%;
height: 100%;
}
.banner-grid.banner1 .banner-block>a: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;
}

This fixed the issue for me.