Why are slideshow buttons unclickable on my website?

Hello, the slideshow button are unclickable (can’t left click it) but it opens if you right click and open on a new tab.

Apparently the buttons in themes is set up to “open popup” type. However, I can’t find this setting.

Any advise on how to fix this? @Litos Thank you!

store url:

https://demor.com.au/

@demor_support - did you add links from customize settings? I checked console it shows all these errors as if you have wrong url for few buttons

book selection opens blank

I added the links on the customize page.

For the book selection, I haven’t added any link yet but for the others it should be clickable but it isn’t. Any advise on how to fix this? @suyash1

@demor_support - that pop up has javascript conflict, check if you have any option in customize settings to disable pop up and have normal link working

else need to contact theme support

Hi @demor_support ,

You want it to go to the selected link?

Please send me the code of slideshow.liquid file, I will help you add option to make it normal button or popup button.

@demor_support

Open Theme > Edit code > Layout > theme.liquid file and comment or remove this code


Try it and let me know

@ExpertRookie have tried the code but still can’t click the buttons in the slideshow

@Litos here’s the code for the index-slideshow.liquid

{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{%- if block.settings.image -%} {%- assign img_object = block.settings.image -%} {%- assign img_small = block.settings.image | img_url: '18x' -%} {%- assign img_api = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {%- else -%} {%- assign img_object = 'blank.svg' | asset_url -%} {%- assign img_small = 'blank.svg' | asset_url -%} {%- assign img_api = 'blank.svg' | asset_url -%} {%- endif -%}

{% if block.settings.link_text == ‘’ and block.settings.link and block.settings.button_image == nil %}

{% endif %}

{% if block.settings.button_image %} {%- assign img_button = block.settings.button_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {{ block.settings.button_image.alt | default: block.settings.link_text }} {% else %} {% unless block.settings.title == '' %}

{{ block.settings.title | escape }}

{% endunless %} {% unless block.settings.description == '' %}

{{ block.settings.description }}

{% endunless %} {% unless block.settings.link_text == '' %}{{ block.settings.link_text | escape }}{% endunless %}
{% unless block.settings.link_text_second == '' %}{{ block.settings.link_text_second | escape }}{% endunless %}
{% endif %}
{% if section.settings.height == 'use_image' %} {{ block.settings.image.alt | default: block.settings.title }} {% else %}
{% endif %} {% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %} {% endif %}

{% if section.settings.height == ‘use_screen_full’ %}

{% endif %}
{% endfor %}
{% endif %}

{% if section.blocks.size == 0 %}

{{ 'home_page.onboarding.no_content' | t }}
{% endif %}

{% for block in section.blocks %}

{{ block.settings.image.alt | default: section.settings.title }}

{% if block.settings.button_image %}

{{ block.settings.button_image.alt | default: block.settings.link_text }}
{% endif %} {% endfor %}
/* -- style code for pop-up window -- */ .display__popup { position: relative; background: #FFFFFF; padding: 25px; width:auto; max-width: 600px; margin: 2rem auto; } /* - end - */

{% schema %}
{
“name”: “Slideshow”,
“settings”: [
{
“type”: “checkbox”,
“id”: “autoplay”,
“label”: “Auto-rotate slides”,
“default”: false
},
{
“type”: “range”,
“id”: “autoplay_speed”,
“min”: 1,
“max”: 15,
“step”: 1,
“unit”: “sec”,
“label”: “Change slides every”,
“default”: 8
},
{
“type”: “select”,
“id”: “height”,
“label”: “Section height”,
“default”: “use_screen_two_thirds”,
“options”: [
{ “value”: “use_screen_full”, “label”: “Full screen height”},
{ “value”: “use_screen_two_thirds”, “label”: “Tall”},
{ “value”: “use_screen_one_half”, “label”: “Medium”},
{ “value”: “use_screen_one_third”, “label”: “Short”},
{ “value”: “use_image”, “label”: “Image height”}
]
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Slide”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “Match size to other slides”
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 5,
“label”: “Image overlay opacity”,
“info”: “Increase contrast for legible text.”,
“default”: 15
},
{
“type”: “header”,
“content”: “Text”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Image slide”
},
{
“type”: “textarea”,
“id”: “description”,
“label”: “Subheading”,
“default”: “Tell your brand’s story through images.”
},
{
“type”: “select”,
“id”: “text_align”,
“label”: “Alignment”,
“default”: “text-center”,
“options”: [
{ “value”: “text-left”, “label”: “Align Left”},
{ “value”: “text-center”, “label”: “Align Center”},
{ “value”: “text-right”, “label”: “Align Right”}
]
},
{
“type”: “select”,
“id”: “color”,
“label”: “Text color”,
“default”: “homepage–white”,
“options”: [
{ “value”: “homepage–white”, “label”: “White”},
{ “value”: “homepage–light”, “label”: “Light”},
{ “value”: “homepage–splash”, “label”: “Accent”},
{ “value”: “homepage–dark”, “label”: “Dark”}
]
},
{
“type”: “header”,
“content”: “Button”
},
{
“type”: “text”,
“id”: “link_text”,
“label”: “Text”,
“default”: “View products”,
“info”: “Leave blank to link entire image”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Slide link”
},
{
“type”: “select”,
“id”: “button_style”,
“label”: “Button style”,
“default”: “btn btn–large btn–clear btn–square uppercase”,
“options”: [
{ “value”: “btn btn–large btn–splash uppercase”, “label”: “Round”},
{ “value”: “btn btn–large btn–splash btn–square uppercase”, “label”: “Square”},
{ “value”: “btn btn–large btn–clear uppercase”, “label”: “Transparent round”},
{ “value”: “btn btn–large btn–clear btn–square uppercase”, “label”: “Transparent square”},
{ “value”: “btn btn–large btn–outline btn–square uppercase”, “label”: “Outlined square”}
]
},
{
“type”: “header”,
“content”: “Button image (optional)”
},
{
“type”: “image_picker”,
“id”: “button_image”,
“label”: “Button image”,
“info”: “1000 x 1000px .png max”
},
{
“type”: “header”,
“content”: “Button 2”
},
{
“type”: “text”,
“id”: “link_text_second”,
“label”: “Text”,
“default”: “Book a quote”,
“info”: “Leave blank to link entire image”
},
{
“type”: “url”,
“id”: “link_second”,
“label”: “Slide link”
},
{
“type”: “select”,
“id”: “button_style_second”,
“label”: “Button style”,
“default”: “btn btn–large btn–clear btn–square uppercase”,
“options”: [
{ “value”: “btn btn–large btn–splash uppercase”, “label”: “Round”},
{ “value”: “btn btn–large btn–splash btn–square uppercase”, “label”: “Square”},
{ “value”: “btn btn–large btn–clear uppercase”, “label”: “Transparent round”},
{ “value”: “btn btn–large btn–clear btn–square uppercase”, “label”: “Transparent square”},
{ “value”: “btn btn–large btn–outline btn–square uppercase”, “label”: “Outlined square”}
]
},
{
“type”: “header”,
“content”: “Button image (optional)”
},
{
“type”: “image_picker”,
“id”: “button_image_second”,
“label”: “Button image”,
“info”: “1000 x 1000px .png max”
}
]
}
],
“presets”: [{
“name”: “Slideshow”,
“category”: “Image”,
“settings”: {
“height”: “use_screen_two_thirds”
},
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
}
]
}]
}
{% endschema %}

Hi @demor_support ,

Please change all code:


{% if section.blocks.size > 0 %}

{% for block in section.blocks %}

{%- if block.settings.image -%}
{%- assign img_object = block.settings.image -%}
{%- assign img_small = block.settings.image | img_url: '18x' -%}
{%- assign img_api = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- else -%}
{%- assign img_object = 'blank.svg' | asset_url -%}
{%- assign img_small = 'blank.svg' | asset_url -%}
{%- assign img_api = 'blank.svg' | asset_url -%}
{%- endif -%}

{% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}

{% endif %}

{% if block.settings.button_image %}
{%- assign img_button = block.settings.button_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% else %}
{% unless block.settings.title == '' %}# {{ block.settings.title | escape }}{% endunless %}
{% unless block.settings.description == '' %}

{{ block.settings.description }}

{% endunless %}
{% unless block.settings.link_text == '' %}
  {{ block.settings.link_text | escape }}
{% endunless %}
{% if block.settings.link_text_popup %}
  

    

  

{% endif %}
{% unless block.settings.link_text_second == '' %}
  {{ block.settings.link_text_second | escape }}
{% endunless %}
{% if block.settings.link_text_second_popup %}
  

    

  

{% endif %}
{% endif %}

{% if section.settings.height == 'use_image' %}

{% else %}

{% endif %}
{% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}

{% endif %}

{% if section.settings.height == 'use_screen_full' %}

{% include 'svg-down' %}

{% endif %}

{% endfor %}

{% endif %}

{% if section.blocks.size == 0 %}

{{ 'home_page.onboarding.no_content' | t }}

{% endif %}

{% for block in section.blocks %}

{% if block.settings.button_image %}

{% endif %}
{% endfor %}

 

{% schema %}
{
"name": "Slideshow",
"settings": [
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-rotate slides",
"default": false
},
{
"type": "range",
"id": "autoplay_speed",
"min": 1,
"max": 15,
"step": 1,
"unit": "sec",
"label": "Change slides every",
"default": 8
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "use_screen_two_thirds",
"options": [
{ "value": "use_screen_full", "label": "Full screen height"},
{ "value": "use_screen_two_thirds", "label": "Tall"},
{ "value": "use_screen_one_half", "label": "Medium"},
{ "value": "use_screen_one_third", "label": "Short"},
{ "value": "use_image", "label": "Image height"}
]
}
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Match size to other slides"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 5,
"label": "Image overlay opacity",
"info": "Increase contrast for legible text.",
"default": 15
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image slide"
},
{
"type": "textarea",
"id": "description",
"label": "Subheading",
"default": "Tell your brand's story through images."
},
{
"type": "select",
"id": "text_align",
"label": "Alignment",
"default": "text-center",
"options": [
{ "value": "text-left", "label": "Align Left"},
{ "value": "text-center", "label": "Align Center"},
{ "value": "text-right", "label": "Align Right"}
]
},
{
"type": "select",
"id": "color",
"label": "Text color",
"default": "homepage--white",
"options": [
{ "value": "homepage--white", "label": "White"},
{ "value": "homepage--light", "label": "Light"},
{ "value": "homepage--splash", "label": "Accent"},
{ "value": "homepage--dark", "label": "Dark"}
]
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "View products",
"info": "Leave blank to link entire image"
},
{
"type": "checkbox",
"id": "link_text_popup",
"label": "Enable popup",
"default": false
},
{
"type": "url",
"id": "link",
"label": "Slide link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "btn btn--large btn--clear btn--square uppercase",
"options": [
{ "value": "btn btn--large btn--splash uppercase", "label": "Round"},
{ "value": "btn btn--large btn--splash btn--square uppercase", "label": "Square"},
{ "value": "btn btn--large btn--clear uppercase", "label": "Transparent round"},
{ "value": "btn btn--large btn--clear btn--square uppercase", "label": "Transparent square"},
{ "value": "btn btn--large btn--outline btn--square uppercase", "label": "Outlined square"}
]
},
{
"type": "header",
"content": "Button image (optional)"
},
{
"type": "image_picker",
"id": "button_image",
"label": "Button image",
"info": "1000 x 1000px .png max"
},
{
"type": "header",
"content": "Button 2"
},
{
"type": "text",
"id": "link_text_second",
"label": "Text",
"default": "Book a quote",
"info": "Leave blank to link entire image"
},
{
"type": "checkbox",
"id": "link_text_second_popup",
"label": "Enable popup",
"default": false
},
{
"type": "url",
"id": "link_second",
"label": "Slide link"
},
{
"type": "select",
"id": "button_style_second",
"label": "Button style",
"default": "btn btn--large btn--clear btn--square uppercase",
"options": [
{ "value": "btn btn--large btn--splash uppercase", "label": "Round"},
{ "value": "btn btn--large btn--splash btn--square uppercase", "label": "Square"},
{ "value": "btn btn--large btn--clear uppercase", "label": "Transparent round"},
{ "value": "btn btn--large btn--clear btn--square uppercase", "label": "Transparent square"},
{ "value": "btn btn--large btn--outline btn--square uppercase", "label": "Outlined square"}
]
},
{
"type": "header",
"content": "Button image (optional)"
},
{
"type": "image_picker",
"id": "button_image_second",
"label": "Button image",
"info": "1000 x 1000px .png max"
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Image",
"settings": {
"height": "use_screen_two_thirds"
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}]
}
{% endschema %}

I helped you to add option ‘Enable popup’, if you want the button to go to the link and not show the popup, you just need to disable this option.

Hope it helps!

1 Like

it’s working now. Thanks a lot!! @Litos

1 Like