Hello
I am using the Venue theme.
I have a slideshow which I want to make clickable - the whole section. - there is no option to do this in the customisation, so I am looking to do this by code.
Is anyone please able to point me in the right direction?
100% Arabica Bean Speciality Coffee | Roast’d Fika (roastdfika.com)
It’s the orange banner half way down
Hi @Javahub
Sorry you are facing this issue. Please follow the steps to make whole banner clickable. Go to your edit code and find the home slider section, In this file search “home-carousel__btn” where your link is added. Copy url from the anchor tag and create a new anchor tag above the img tag and paste the Url, Now cut the whole img tag and paste the in between created anchor tag.
If its helpful for you please like and if it works please accept my solution.
Thanks,
Hello
Thank you for your time…
I understand what you’re saying but not quite how to do it haha
This is the code shown when I search for “home-carousel__btn”
I’m just a bit confused what I’m adding and where
{% unless block.settings.title == blank and block.settings.text == blank and block.settings.link == blank %}
{% unless block.settings.title == blank %}
# {{ block.settings.title | escape }}
{% endunless %}
{% unless block.settings.text == blank %}
{{ block.settings.text }}
{% endunless %}
{% unless block.settings.link == blank %}
{{ block.settings.link_title | escape }}
{% endunless %}
{% endunless %}
{% endfor %}
Can you please share the all code.
{% if section.blocks.size > 0 %}
{% endif %}
{% if section.blocks.size == 0 %}
{{ 'homepage.onboarding.no_content' | t }}
{% endif %}
{% schema %}
{
"name": "Slideshow",
"class": "js-section__home-slider",
"max_blocks": 5,
"settings": [
{
"type": "select",
"id": "slideshow_style",
"label": "Style",
"default": "default",
"options": [
{
"label": "Default",
"value": "default"
},
{
"label": "Semi-opaque",
"value": "semi"
},
{
"label": "Minimal",
"value": "minimal"
}
]
},
{
"type": "range",
"id": "title_size",
"label": "Heading size",
"min": 1,
"max": 6,
"step": 1,
"default": 3
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-rotate slides",
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"label": "Change slides every",
"unit": "sec",
"min": 5,
"max": 10,
"step": 1,
"default": 8
},
{
"type": "select",
"id": "slideshow_height",
"label": "Section height",
"default": "medium",
"info": "For information on image cropping [click here](https://support.safeasmilk.co/article/138-slideshow-image-sizes-cropping).",
"options": [
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
]
},
{
"type": "select",
"id": "slideshow_width",
"label": "Section width",
"default": "contained",
"options": [
{
"label": "Contained",
"value": "contained"
},
{
"label": "Full",
"value": "full"
}
]
},
{
"type": "range",
"id": "overlay_strength",
"label": "Overlay strength",
"unit": "%",
"min": 0,
"max": 100,
"step": 10,
"default": 10
}
],
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2200px width recommended."
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile image",
"info": "Alternative image for mobile devices. 1200px width and portrait ratio recommended."
},
{
"type": "select",
"id": "image_alignment",
"label": "Image alignment",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "default",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "dark",
"label": "Dark"
},
{
"value": "white",
"label": "Light"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image slide"
},
{
"type": "richtext",
"id": "text",
"label": "Subheading",
"default": "
Use these slides to tell the world about your brand. Use images or background video along with text and links.
"
},
{
"type": "text",
"id": "link_title",
"label": "Button label",
"default": "More info"
},
{
"type": "url",
"id": "link",
"label": "Button link"
},
{
"type": "url",
"id": "image_link",
"label": "Image link"
}
]
},
{
"type": "video",
"name": "Video slide",
"settings": [
{
"type": "text",
"id": "video_link",
"label": "MP4 video link",
"info": "Accepts self-hosted MP4 video links. [Learn more](https://support.safeasmilk.co/article/134-slideshow-video-background)"
},
{
"type": "video_url",
"id": "yt_link",
"label": "YouTube video link",
"accept": [
"youtube"
]
},
{
"type": "select",
"id": "alignment",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "default",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "dark",
"label": "Dark"
},
{
"value": "white",
"label": "Light"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": "Subheading",
"default": "
Use these slides to tell the world about your brand. Use images or background video along with text and links.
"
},
{
"type": "text",
"id": "link_title",
"label": "Button label",
"default": "More info"
},
{
"type": "url",
"id": "link",
"label": "Button link"
}
]
}
],
"presets": [
{
"name": "Slideshow",
"category": "Image",
"settings": {
"autoplay": true,
"autoplay_speed": 8
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
Please replace your file code with this
{% if section.blocks.size > 0 %}
{% endif %}
{% if section.blocks.size == 0 %}
{{ 'homepage.onboarding.no_content' | t }}
{% endif %}
{% schema %}
{
"name": "Slideshow",
"class": "js-section__home-slider",
"max_blocks": 5,
"settings": [
{
"type": "select",
"id": "slideshow_style",
"label": "Style",
"default": "default",
"options": [
{
"label": "Default",
"value": "default"
},
{
"label": "Semi-opaque",
"value": "semi"
},
{
"label": "Minimal",
"value": "minimal"
}
]
},
{
"type": "range",
"id": "title_size",
"label": "Heading size",
"min": 1,
"max": 6,
"step": 1,
"default": 3
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-rotate slides",
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"label": "Change slides every",
"unit": "sec",
"min": 5,
"max": 10,
"step": 1,
"default": 8
},
{
"type": "select",
"id": "slideshow_height",
"label": "Section height",
"default": "medium",
"info": "For information on image cropping [click here](https://support.safeasmilk.co/article/138-slideshow-image-sizes-cropping).",
"options": [
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
]
},
{
"type": "select",
"id": "slideshow_width",
"label": "Section width",
"default": "contained",
"options": [
{
"label": "Contained",
"value": "contained"
},
{
"label": "Full",
"value": "full"
}
]
},
{
"type": "range",
"id": "overlay_strength",
"label": "Overlay strength",
"unit": "%",
"min": 0,
"max": 100,
"step": 10,
"default": 10
}
],
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2200px width recommended."
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile image",
"info": "Alternative image for mobile devices. 1200px width and portrait ratio recommended."
},
{
"type": "select",
"id": "image_alignment",
"label": "Image alignment",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "default",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "dark",
"label": "Dark"
},
{
"value": "white",
"label": "Light"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image slide"
},
{
"type": "richtext",
"id": "text",
"label": "Subheading",
"default": "
Use these slides to tell the world about your brand. Use images or background video along with text and links.
"
},
{
"type": "text",
"id": "link_title",
"label": "Button label",
"default": "More info"
},
{
"type": "url",
"id": "link",
"label": "Button link"
},
{
"type": "url",
"id": "image_link",
"label": "Image link"
}
]
},
{
"type": "video",
"name": "Video slide",
"settings": [
{
"type": "text",
"id": "video_link",
"label": "MP4 video link",
"info": "Accepts self-hosted MP4 video links. [Learn more](https://support.safeasmilk.co/article/134-slideshow-video-background)"
},
{
"type": "video_url",
"id": "yt_link",
"label": "YouTube video link",
"accept": [
"youtube"
]
},
{
"type": "select",
"id": "alignment",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "default",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "dark",
"label": "Dark"
},
{
"value": "white",
"label": "Light"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": "Subheading",
"default": "
Use these slides to tell the world about your brand. Use images or background video along with text and links.
"
},
{
"type": "text",
"id": "link_title",
"label": "Button label",
"default": "More info"
},
{
"type": "url",
"id": "link",
"label": "Button link"
}
]
}
],
"presets": [
{
"name": "Slideshow",
"category": "Image",
"settings": {
"autoplay": true,
"autoplay_speed": 8
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
Hello,
Thank you for the code, I have added it in my home-slideshow.liquid file but this doesn’t seem to have worked?
Hi @Javahub
Plaese add this css at your bottom of css file
.home-carousel__bg-wrapper a:hover{
opacity: 1 !important ;
}
.home-carousel__bg-wrapper .u-bg-contain{
position: relative !important;
}
Please like and accept solution if its work for you.
Thanks
Yes that works,
May I ask what you added to I know where to change the URL the banner links to?
I want it to link to this Speciality Coffee – Roast’d Fika (roastdfika.com)
so*
I have a similar problem with trying to make my entire video (one section) clickable.