Hello community,
The website in question is: https://garagecollective.myshopify.com/
I was wondering if there was a way to make the video hero in my spark theme clickable to page: https://garagecollective.myshopify.com/pages/membership
I have the button added, and linked but it doesn’t seem to work the way the other blocks do.
Any help would be greatly appreciated!
DB
Hi @Dbarry ,
Please send me the code of slideshow.liquid file, I will check it.
{%- liquid
assign dot_count = section.blocks.size
if block_id
assign dot_count = 0
endif
if slide_1_desktop_image != blank or slide_1_mobile_image != blank
assign dot_count = dot_count | plus: 1
endif
if slide_2_desktop_image != blank or slide_2_mobile_image != blank
assign dot_count = dot_count | plus: 1
endif
-%}
{%- for block in section.blocks -%}
{%- render 'slideshow-item' with
block: block,
forloop: forloop,
image_aspect: section.settings.image_aspect,
desktop_image: block.settings.desktop_image,
mobile_image: block.settings.mobile_image,
focal_point: block.settings.focal_point,
mobile_focal_point: block.settings.mobile_focal_point,
alignment: block.settings.alignment,
heading: block.settings.title,
subheading: block.settings.subheading,
link: block.settings.link,
link_text: block.settings.link_text,
max_width_subheading: block.settings.max_width_subheading,
heading_text_size: block.settings.heading_text_size,
overlay_shadow: block.settings.overlay_shadow,
color_text: block.settings.color_text,
color_text_button: block.settings.color_text_button,
color_background_button: block.settings.color_background_button,
color_overlay: block.settings.color_overlay,
overlay_opacity: block.settings.overlay_opacity,
-%}
{%- endfor -%}
{%- render 'navigation-dots' with dot_count: dot_count -%}
{% schema %}
{
"name": "t:sections.slideshow.name",
"tag": "section",
"class": "shopify-section--stackable shopify-section--contrast offset-section",
"settings": [
{
"type": "radio",
"id": "image_aspect",
"label": "t:sections.slideshow.settings.image_aspect.label",
"options": [
{ "value": "custom", "label": "t:sections.slideshow.settings.image_aspect.option_1" },
{ "value": "original", "label": "t:sections.slideshow.settings.image_aspect.option_2" }
],
"default": "custom"
},
{
"type": "range",
"id": "desktop_height",
"label": "t:sections.slideshow.settings.height.label",
"unit": "%",
"min": 50,
"max": 100,
"step": 5,
"default": 100
},
{
"type": "range",
"id": "mobile_height",
"label": "t:sections.slideshow.settings.mobile_height.label",
"unit": "%",
"min": 50,
"max": 100,
"step": 5,
"default": 100
},
{
"type": "paragraph",
"content": "t:sections.slideshow.settings.height_paragraph.content"
},
{
"type": "range",
"id": "duration_autoplay",
"label": "t:sections.slideshow.settings.duration_autoplay.label",
"unit": "s",
"min": 0,
"max": 10,
"step": 2,
"default": 6
},
{
"id": "color_dot",
"type": "color",
"label": "t:sections.slideshow.settings.color_dot.label",
"default": "#fff"
}
],
"blocks": [
{
"type": "slide",
"name": "t:sections.slideshow.blocks.slide.name",
"limit": 5,
"settings": [
{
"id": "desktop_image",
"type": "image_picker",
"label": "t:sections.slideshow.blocks.slide.settings.desktop_image.label"
},
{
"id": "mobile_image",
"type": "image_picker",
"label": "t:sections.slideshow.blocks.slide.settings.mobile_image.label"
},
{
"id": "focal_point",
"type": "select",
"label": "t:sections.slideshow.blocks.slide.settings.focal_point.label",
"options": [
{ "label": "t:sections.slideshow.blocks.slide.settings.focal_point.options__1.label", "value": "left_top" },
{ "label": "t:sections.slideshow.blocks.slide.settings.focal_point.options__2.label", "value": "center_top" },
{ "label": "t:sections.slideshow.blocks.slide.settings.focal_point.options__3.label", "value": "right_top" },
{ "label": "t:sections.slideshow.blocks.slide.settings.focal_point.options__4.label", "value": "left_center" },
{ "label": "t:sections.slideshow.blocks.slide.settings.focal_point.options__5.label", "value": "center_center" },
{ "label": "t:sections.slideshow.blocks.slide.settings.focal_point.options__6.label", "value": "right_center" },
{ "label": "t:sections.slideshow.blocks.slide.settings.focal_point.options__7.label", "value": "left_bottom" },
{ "label": "t:sections.slideshow.blocks.slide.settings.focal_point.options__8.label", "value": "center_bottom" },
{ "label": "t:sections.slideshow.blocks.slide.settings.focal_point.options__9.label", "value": "right_bottom" }
],
"default": "center_center"
},
{
"id": "mobile_focal_point",
"type": "select",
"label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.label",
"options": [
{ "label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.options__1.label", "value": "left_top" },
{ "label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.options__2.label", "value": "center_top" },
{ "label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.options__3.label", "value": "right_top" },
{ "label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.options__4.label", "value": "left_center" },
{ "label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.options__5.label", "value": "center_center" },
{ "label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.options__6.label", "value": "right_center" },
{ "label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.options__7.label", "value": "left_bottom" },
{ "label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.options__8.label", "value": "center_bottom" },
{ "label": "t:sections.slideshow.blocks.slide.settings.mobile_focal_point.options__9.label", "value": "right_bottom" }
],
"default": "center_center"
},
{
"id": "title",
"type": "text",
"label": "t:sections.slideshow.blocks.slide.settings.title.label",
"default": "Slideshow"
},
{
"id": "subheading",
"type": "richtext",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label",
"default": "
Use this section to make a bold statement
"
},
{
"id": "heading_text_size",
"type": "range",
"label": "t:sections.slideshow.blocks.slide.settings.heading_text_size.label",
"unit": "px",
"min": 48,
"max": 72,
"step": 2,
"default": 64
},
{
"type": "range",
"id": "overlay_shadow",
"label": "t:sections.slideshow.blocks.slide.settings.overlay_shadow.label",
"unit": "%",
"min": 0,
"max": 60,
"step": 5,
"default": 10
},
{
"id": "max_width_subheading",
"type": "range",
"label": "t:sections.slideshow.blocks.slide.settings.max_width_subheading.label",
"min": 20,
"max": 50,
"step": 2,
"default": 40
},
{
"id": "link_text",
"type": "text",
"label": "t:sections.slideshow.blocks.slide.settings.link_text.label",
"default": "Learn more"
},
{
"id": "link",
"type": "url",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"id": "alignment",
"type": "select",
"label": "t:sections.slideshow.blocks.slide.settings.alignment.label",
"options": [
{ "label": "t:sections.slideshow.blocks.slide.settings.alignment.options__1.label", "value": "left_top" },
{ "label": "t:sections.slideshow.blocks.slide.settings.alignment.options__2.label", "value": "center_top" },
{ "label": "t:sections.slideshow.blocks.slide.settings.alignment.options__3.label", "value": "right_top" },
{ "label": "t:sections.slideshow.blocks.slide.settings.alignment.options__4.label", "value": "left_center" },
{ "label": "t:sections.slideshow.blocks.slide.settings.alignment.options__5.label", "value": "center_center" },
{ "label": "t:sections.slideshow.blocks.slide.settings.alignment.options__6.label", "value": "right_center" },
{ "label": "t:sections.slideshow.blocks.slide.settings.alignment.options__7.label", "value": "left_bottom" },
{ "label": "t:sections.slideshow.blocks.slide.settings.alignment.options__8.label", "value": "center_bottom" },
{ "label": "t:sections.slideshow.blocks.slide.settings.alignment.options__9.label", "value": "right_bottom" }
],
"default": "center_center"
},
{
"type": "header",
"content": "t:sections.slideshow.blocks.slide.settings.header.content"
},
{
"id": "color_text",
"type": "color",
"label": "t:sections.slideshow.blocks.slide.settings.color_text.label",
"default": "#ffffff"
},
{
"id": "color_text_button",
"type": "color",
"label": "t:sections.slideshow.blocks.slide.settings.color_text_button.label",
"default": "#181818"
},
{
"id": "color_background_button",
"type": "color",
"label": "t:sections.slideshow.blocks.slide.settings.color_background_button.label",
"default": "#FFFFFF"
},
{
"id": "color_overlay",
"type": "color",
"label": "t:sections.slideshow.blocks.slide.settings.color_overlay.label",
"default": "#000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "t:sections.slideshow.blocks.slide.settings.overlay_opacity.label",
"unit": "%",
"min": 0,
"max": 100,
"step": 1,
"default": 30
}
]
}
],
"presets": [
{
"name": "t:sections.slideshow.presets.name",
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
}
]
}
{% endschema %}
However I am using video-here.liquid - the code as follows:
{%- liquid
assign video_url = section.settings.video_url
assign image_overlay = section.settings.image
assign shadow_amount = section.settings.overlay_shadow | divided_by: 100.00
assign shadow_amount_lesser = shadow_amount | minus: 0.04
assign overlay_opacity = section.settings.overlay_opacity | divided_by: 100.00
assign align = section.settings.alignment | split: "_"
assign enable_text_overlay = true
assign video_aspect = section.settings.video_aspect
assign disable_style = true
if video_aspect == 'original' and video_url == blank
assign disable_style = false
endif
if shadow_amount == 0
assign enable_text_overlay = false
endif
assign brightness_button = section.settings.color_background_button | color_brightness
if brightness_button > 60
assign color_background_button_hover = section.settings.color_background_button | color_darken: 20
else
assign color_background_button_hover = section.settings.color_background_button | color_lighten: 20
endif
-%}
{%- if video_url != blank -%}
{%- if image_overlay != blank -%}
{% render 'image' with image: image_overlay, disable_style: disable_style, wrapper_class: 'video-hero__image' %}
{%- endif -%}
{% render 'video-pause' %}
{%- else -%}
{%- if image_overlay != blank -%}
{% render 'image' with image: image_overlay, disable_style: disable_style, wrapper_class: 'video-hero__image' %}
{%- else -%}
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- endif -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
####
{{ block.settings.title | newline_to_br }}
{%- when 'subheading' -%}
{{ block.settings.subheading }}
{%- when 'button' -%}
{%- if block.settings.link != blank and block.settings.link_text != blank -%}
{{ block.settings.link_text }}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.video_hero.name",
"tag": "section",
"class": "shopify-section--stackable shopify-section--contrast offset-section",
"settings": [
{
"type": "radio",
"id": "video_aspect",
"label": "t:sections.video_hero.settings.video_aspect.label",
"options": [
{ "value": "custom", "label": "t:sections.video_hero.settings.video_aspect.option_1" },
{ "value": "original", "label": "t:sections.video_hero.settings.video_aspect.option_2" }
],
"default": "custom"
},
{
"type": "range",
"id": "desktop_height",
"label": "t:sections.video_hero.settings.height.label",
"unit": "%",
"min": 50,
"max": 100,
"step": 5,
"default": 100
},
{
"type": "range",
"id": "mobile_height",
"label": "t:sections.video_hero.settings.mobile_height.label",
"unit": "%",
"min": 50,
"max": 100,
"step": 5,
"default": 100
},
{
"type": "paragraph",
"content": "t:sections.video_hero.settings.height_paragraph.content"
},
{
"type": "url",
"id": "video_url",
"label": "Video link",
"label": "t:sections.video_hero.settings.video_url.label",
"info": "t:sections.video_hero.settings.video_url.info"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.video_hero.settings.image.label"
},
{
"id": "alignment",
"type": "select",
"label": "Text alignment",
"options": [
{ "label": "t:sections.video_hero.settings.alignment.options__1.label", "value": "left_top" },
{ "label": "t:sections.video_hero.settings.alignment.options__2.label", "value": "center_top" },
{ "label": "t:sections.video_hero.settings.alignment.options__3.label", "value": "right_top" },
{ "label": "t:sections.video_hero.settings.alignment.options__4.label", "value": "left_center" },
{ "label": "t:sections.video_hero.settings.alignment.options__5.label", "value": "center_center" },
{ "label": "t:sections.video_hero.settings.alignment.options__6.label", "value": "right_center" },
{ "label": "t:sections.video_hero.settings.alignment.options__7.label", "value": "left_bottom" },
{ "label": "t:sections.video_hero.settings.alignment.options__8.label", "value": "center_bottom" },
{ "label": "t:sections.video_hero.settings.alignment.options__9.label", "value": "right_bottom" }
],
"default": "left_center"
},
{
"type": "range",
"id": "overlay_shadow",
"label": "t:sections.video_hero.settings.overlay_shadow.label",
"unit": "%",
"min": 0,
"max": 60,
"step": 5,
"default": 20
},
{
"type": "header",
"content": "t:sections.video_hero.settings.header.content"
},
{
"id": "color_text",
"type": "color",
"label": "t:sections.video_hero.settings.color_text.label",
"default": "#ffffff"
},
{
"id": "color_background_button",
"type": "color",
"label": "t:sections.video_hero.settings.color_background_button.label",
"default": "#FFFFFF"
},
{
"id": "color_text_button",
"type": "color",
"label": "t:sections.video_hero.settings.color_text_button.label",
"default": "#181818"
},
{
"id": "color_overlay",
"type": "color",
"label": "t:sections.video_hero.settings.color_overlay.label",
"default": "#000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "t:sections.video_hero.settings.overlay_opacity.label",
"unit": "%",
"min": 0,
"max": 100,
"step": 1,
"default": 30
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.video_hero.blocks.heading.name",
"limit": 1,
"settings": [
{
"id": "title",
"type": "text",
"label": "t:sections.video_hero.blocks.heading.settings.heading.label",
"default": "Video Hero"
},
{
"id": "heading_text_size",
"type": "range",
"label": "t:sections.video_hero.blocks.heading.settings.heading_text_size.label",
"unit": "px",
"min": 48,
"max": 72,
"step": 2,
"default": 64
},
{
"id": "text_max_width",
"type": "range",
"label": "t:sections.video_hero.blocks.heading.settings.text_max_width.label",
"min": 20,
"max": 60,
"step": 2,
"default": 40
}
]
},
{
"type": "subheading",
"name": "t:sections.video_hero.blocks.subheading.name",
"limit": 1,
"settings": [
{
"id": "subheading",
"type": "richtext",
"label": "t:sections.video_hero.blocks.subheading.settings.subheading.label",
"default": "
Feature seamless auto-playing hero videos in this space.
"
},
{
"id": "text_max_width",
"type": "range",
"label": "t:sections.video_hero.blocks.subheading.settings.text_max_width.label",
"min": 20,
"max": 50,
"step": 2,
"default": 40
}
]
},
{
"type": "button",
"name": "t:sections.video_hero.blocks.button.name",
"limit": 1,
"settings": [
{
"id": "link_text",
"type": "text",
"label": "t:sections.video_hero.blocks.button.settings.link_text.label",
"default": "Shop now"
},
{
"id": "link",
"type": "url",
"label": "t:sections.video_hero.blocks.button.settings.link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.video_hero.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "subheading"
}
]
}
]
}
{% endschema %}
Hi @Dbarry ,
Please change all code:
{%- liquid
assign video_url = section.settings.video_url
assign image_overlay = section.settings.image
assign shadow_amount = section.settings.overlay_shadow | divided_by: 100.00
assign shadow_amount_lesser = shadow_amount | minus: 0.04
assign overlay_opacity = section.settings.overlay_opacity | divided_by: 100.00
assign align = section.settings.alignment | split: "_"
assign enable_text_overlay = true
assign video_aspect = section.settings.video_aspect
assign disable_style = true
if video_aspect == 'original' and video_url == blank
assign disable_style = false
endif
if shadow_amount == 0
assign enable_text_overlay = false
endif
assign brightness_button = section.settings.color_background_button | color_brightness
if brightness_button > 60
assign color_background_button_hover = section.settings.color_background_button | color_darken: 20
else
assign color_background_button_hover = section.settings.color_background_button | color_lighten: 20
endif
-%}
{%- if video_url != blank -%}
{%- if image_overlay != blank -%}
{% render 'image' with image: image_overlay, disable_style: disable_style, wrapper_class: 'video-hero__image' %}
{%- endif -%}
{% render 'video-pause' %}
{%- else -%}
{%- if image_overlay != blank -%}
{% render 'image' with image: image_overlay, disable_style: disable_style, wrapper_class: 'video-hero__image' %}
{%- else -%}
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- endif -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
####
{{ block.settings.title | newline_to_br }}
{%- when 'subheading' -%}
{{ block.settings.subheading }}
{%- when 'button' -%}
{%- if block.settings.link != blank and block.settings.link_text != blank -%}
{{ block.settings.link_text }}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.video_hero.name",
"tag": "section",
"class": "shopify-section--stackable shopify-section--contrast offset-section",
"settings": [
{
"type": "radio",
"id": "video_aspect",
"label": "t:sections.video_hero.settings.video_aspect.label",
"options": [
{ "value": "custom", "label": "t:sections.video_hero.settings.video_aspect.option_1" },
{ "value": "original", "label": "t:sections.video_hero.settings.video_aspect.option_2" }
],
"default": "custom"
},
{
"type": "range",
"id": "desktop_height",
"label": "t:sections.video_hero.settings.height.label",
"unit": "%",
"min": 50,
"max": 100,
"step": 5,
"default": 100
},
{
"type": "range",
"id": "mobile_height",
"label": "t:sections.video_hero.settings.mobile_height.label",
"unit": "%",
"min": 50,
"max": 100,
"step": 5,
"default": 100
},
{
"type": "paragraph",
"content": "t:sections.video_hero.settings.height_paragraph.content"
},
{
"type": "url",
"id": "video_url",
"label": "Video link",
"label": "t:sections.video_hero.settings.video_url.label",
"info": "t:sections.video_hero.settings.video_url.info"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.video_hero.settings.image.label"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"id": "alignment",
"type": "select",
"label": "Text alignment",
"options": [
{ "label": "t:sections.video_hero.settings.alignment.options__1.label", "value": "left_top" },
{ "label": "t:sections.video_hero.settings.alignment.options__2.label", "value": "center_top" },
{ "label": "t:sections.video_hero.settings.alignment.options__3.label", "value": "right_top" },
{ "label": "t:sections.video_hero.settings.alignment.options__4.label", "value": "left_center" },
{ "label": "t:sections.video_hero.settings.alignment.options__5.label", "value": "center_center" },
{ "label": "t:sections.video_hero.settings.alignment.options__6.label", "value": "right_center" },
{ "label": "t:sections.video_hero.settings.alignment.options__7.label", "value": "left_bottom" },
{ "label": "t:sections.video_hero.settings.alignment.options__8.label", "value": "center_bottom" },
{ "label": "t:sections.video_hero.settings.alignment.options__9.label", "value": "right_bottom" }
],
"default": "left_center"
},
{
"type": "range",
"id": "overlay_shadow",
"label": "t:sections.video_hero.settings.overlay_shadow.label",
"unit": "%",
"min": 0,
"max": 60,
"step": 5,
"default": 20
},
{
"type": "header",
"content": "t:sections.video_hero.settings.header.content"
},
{
"id": "color_text",
"type": "color",
"label": "t:sections.video_hero.settings.color_text.label",
"default": "#ffffff"
},
{
"id": "color_background_button",
"type": "color",
"label": "t:sections.video_hero.settings.color_background_button.label",
"default": "#FFFFFF"
},
{
"id": "color_text_button",
"type": "color",
"label": "t:sections.video_hero.settings.color_text_button.label",
"default": "#181818"
},
{
"id": "color_overlay",
"type": "color",
"label": "t:sections.video_hero.settings.color_overlay.label",
"default": "#000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "t:sections.video_hero.settings.overlay_opacity.label",
"unit": "%",
"min": 0,
"max": 100,
"step": 1,
"default": 30
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.video_hero.blocks.heading.name",
"limit": 1,
"settings": [
{
"id": "title",
"type": "text",
"label": "t:sections.video_hero.blocks.heading.settings.heading.label",
"default": "Video Hero"
},
{
"id": "heading_text_size",
"type": "range",
"label": "t:sections.video_hero.blocks.heading.settings.heading_text_size.label",
"unit": "px",
"min": 48,
"max": 72,
"step": 2,
"default": 64
},
{
"id": "text_max_width",
"type": "range",
"label": "t:sections.video_hero.blocks.heading.settings.text_max_width.label",
"min": 20,
"max": 60,
"step": 2,
"default": 40
}
]
},
{
"type": "subheading",
"name": "t:sections.video_hero.blocks.subheading.name",
"limit": 1,
"settings": [
{
"id": "subheading",
"type": "richtext",
"label": "t:sections.video_hero.blocks.subheading.settings.subheading.label",
"default": "
Feature seamless auto-playing hero videos in this space.
"
},
{
"id": "text_max_width",
"type": "range",
"label": "t:sections.video_hero.blocks.subheading.settings.text_max_width.label",
"min": 20,
"max": 50,
"step": 2,
"default": 40
}
]
},
{
"type": "button",
"name": "t:sections.video_hero.blocks.button.name",
"limit": 1,
"settings": [
{
"id": "link_text",
"type": "text",
"label": "t:sections.video_hero.blocks.button.settings.link_text.label",
"default": "Shop now"
},
{
"id": "link",
"type": "url",
"label": "t:sections.video_hero.blocks.button.settings.link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.video_hero.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "subheading"
}
]
}
]
}
{% endschema %}
I added option link for it, you can go to Customize and select link, it will work fine