How can I make a slideshow in the Venue Theme clickable?

Store Design
1

Hi i want help to make my slideshow in home page clickable to my collection

shop link:shoko-shop.com

2

Hi @manos_vouteris

Can you please share the full code for slider section to amend the code to get a solution what you want?

Thanks

3

i have my slideshow photo in home page but i dont like the factory button so i want to make it clickable and link it to my new collection

.section--{{ section.id }} .home-carousel__bg--overlay:before, .section--{{ section.id }} .home-carousel__bg:before, .section--{{ section.id }} .home-carousel__video:before { {% if section.settings.overlay_strength == 100 %} opacity: 1; {% else %} opacity: .{{ section.settings.overlay_strength }}; {% endif %} } /* Loading states */ .home-carousel-wrapper--loading { position: relative; overflow: hidden; } .home-carousel-wrapper--loading::before { content: ""; display: block; float: left; position: relative; width: 100%; } .home-carousel-wrapper--loading--small::before { padding-bottom: 40%; } .home-carousel-wrapper--loading--medium::before { padding-bottom: 50%; } .home-carousel-wrapper--loading--large::before { padding-bottom: 62.5%; } .home-carousel--loading { position: absolute; left: 0; top: 0; width: 100%; } @media screen and (max-width: 980px) { .home-carousel-wrapper--loading--small::before { padding-bottom: 100%; } .home-carousel-wrapper--loading--medium::before { padding-bottom: 125%; } .home-carousel-wrapper--loading--large::before { padding-bottom: 140%; } }

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

{% if section.settings.slideshow_width == ‘contained’ %}

{% endif %}

{% for block in section.blocks %}

{% if block.settings.video_link != blank or block.settings.yt_link != blank %}

{% if block.settings.video_link != blank %}

{% elsif block.settings.yt_link != blank %}

{% endif %}
{% else %} {% unless block.settings.image == blank %}
{{ block.settings.image.alt }}

{% else %}

{% capture current %}{% cycle 1, 2 %}{% endcapture %} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endunless %} {% endif %}

{% 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 %}
{% if section.settings.slideshow_width == 'contained' %}
{% endif %}
{% 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”: “minimal”,
“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”: 5,
“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.”,
“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”: “video”,
“name”: “Video slide”,
“settings”: [
{
“type”: “text”,
“id”: “video_link”,
“label”: “MP4 video link”,
“info”: “Accepts self-hosted MP4 video links. Learn more”
},
{
“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”,
“settings”: {
“autoplay”: true,
“autoplay_speed”: 8
},
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
}
]
}
]
}
{% endschema %}

4

Hi @manos_vouteris

Thanks for sharing the code. I modified the code slightly to add the link to the image as well.

Kindly copy below code and replace all existing 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": "minimal",
"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": 5,
"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": "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",
"settings": {
"autoplay": true,
"autoplay_speed": 8
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}

Let me know if this solves your issue.

Thanks for being awesome.

5

Hi again and thank you but nothing change this is the link for the slideshow

https://shoko-shop.com/collections/major-tom

6

Hi @manos_vouteris

As advised, just copy and paste the above code and then go to customize and add link. It’s working fine at my end.

As you can check this link, the image has same link as More Info.

https://salesrw.myshopify.com/

Let me know if you need any help to implement this code.

Thanks

7

Hi i make it so if you want to see the solution

Thank you for your help :slightly_smiling_face:

.section--{{ section.id }} .home-carousel__bg--overlay:before, .section--{{ section.id }} .home-carousel__bg:before, .section--{{ section.id }} .home-carousel__video:before { {% if section.settings.overlay_strength == 100 %} opacity: 1; {% else %} opacity: .{{ section.settings.overlay_strength }}; {% endif %} } /* Loading states */ .home-carousel-wrapper--loading { position: relative; overflow: hidden; } .home-carousel-wrapper--loading::before { content: ""; display: block; float: left; position: relative; width: 100%; } .home-carousel-wrapper--loading--small::before { padding-bottom: 40%; } .home-carousel-wrapper--loading--medium::before { padding-bottom: 50%; } .home-carousel-wrapper--loading--large::before { padding-bottom: 62.5%; } .home-carousel--loading { position: absolute; left: 0; top: 0; width: 100%; } @media screen and (max-width: 980px) { .home-carousel-wrapper--loading--small::before { padding-bottom: 100%; } .home-carousel-wrapper--loading--medium::before { padding-bottom: 125%; } .home-carousel-wrapper--loading--large::before { padding-bottom: 140%; } }

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

{% if section.settings.slideshow_width == ‘contained’ %}

{% endif %}

{% for block in section.blocks %}

{% unless block.settings.slide_link == blank %} {% endunless %}

{% if block.settings.video_link != blank or block.settings.yt_link != blank %}

{% if block.settings.video_link != blank %}

{% elsif block.settings.yt_link != blank %}

{% endif %}
{% else %} {% unless block.settings.image == blank %}
{{ block.settings.image.alt }}

{% else %}

{% capture current %}{% cycle 1, 2 %}{% endcapture %} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endunless %} {% endif %}

{% unless block.settings.title == blank and block.settings.text == blank and block.settings.link == blank %}

 {% endunless %}
{% unless block.settings.slide_link == blank %} {% endunless %}
{% endfor %}
{% if section.settings.slideshow_width == 'contained' %}
{% endif %}
{% 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”: “minimal”,
“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”: 5,
“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.”,
“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”: “slide_link”,
“label”: “Slide 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”
},
{
“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”
},
{
“type”: “url”,
“id”: “slide_link”,
“label”: “Slide link”
}
]
}
],
“presets”: [
{
“name”: “Slideshow”,
“settings”: {
“autoplay”: true,
“autoplay_speed”: 8
},
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
}
]
}
]
}
{% endschema %}