I’ve seen the code posted in these forums for other themes, but wonder if anyone knows the code specific to the Impulse theme. The default for each slide is two buttons. We’d like to add a third.
Thank you!
Hi @ACKPerfume ,
Please send me the code of slideshow.liquid file, I will help you to check and add it
Thank you. I’ve messaged you the liquid file.
Hi @ACKPerfume ,
Please change all code:
{%- if section.blocks.size > 0 -%}
{%- if section.settings.autoplay and section.settings.style == 'bars' and section.blocks.size > 1 -%}
{%- style -%}
[data-bars][data-autoplay="true"] .flickity-page-dots .dot:after {
animation-duration: {{ section.settings.autoplay_speed | times: 1000 }}ms;
}
{%- endstyle -%}
{%- endif -%}
{%- assign natural_height = false -%}
{%- assign natural_mobile_height = false -%}
{%- if section.settings.section_height == 'natural' or section.settings.mobile_height == 'auto' -%}
{% comment %}
Get first image's aspect ratio
{% endcomment %}
{%- for block in section.blocks limit: 1 -%}
{%- if block.settings.image != blank -%}
{%- if section.settings.section_height == 'natural' %}
{%- assign natural_height = true -%}
{%- capture natural_height_ratio -%}{{ 100 | divided_by: block.settings.image.aspect_ratio }}%{% endcapture %}
{%- endif -%}
{%- endif -%}
{%- if block.settings.image_mobile != blank -%}
{%- if section.settings.mobile_height == 'auto' -%}
{%- assign natural_mobile_height = true -%}
{%- capture natural_mobile_height_ratio -%}{{ 100 | divided_by: block.settings.image_mobile.aspect_ratio }}%{% endcapture %}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if natural_height -%}
{%- style -%}
@media only screen and (min-width: 769px) {
.hero-natural--{{ section.id }} {
height: 0;
padding-bottom: {{ natural_height_ratio }};
}
}
{%- endstyle -%}
{%- endif -%}
{%- if natural_mobile_height -%}
{%- style -%}
@media screen and (max-width: 768px) {
.hero-natural-mobile--{{ section.id }} {
height: 0;
padding-bottom: {{ natural_mobile_height_ratio }};
}
}
{%- endstyle -%}
{%- endif -%}
{%- for block in section.blocks -%}
{%- style -%}
.slideshow__slide--{{ block.id }} .hero__title {
font-size: {{ block.settings.title_size | times: 0.5 }}px;
}
@media only screen and (min-width: 769px) {
.slideshow__slide--{{ block.id }} .hero__title {
font-size: {{ block.settings.title_size }}px;
}
}
{%- assign button_alpha = block.settings.color_accent | color_extract: 'alpha' -%}
{% unless button_alpha == 0.0 %}
.slideshow__slide--{{ block.id }} .btn {
background: {{ block.settings.color_accent }} !important;
border: none;
{%- assign accent_brightness = block.settings.color_accent | color_extract: 'lightness' -%}
{% if accent_brightness > 40 %}
color: #000 !important;
{% endif %}
}
{% if settings.button_style == 'angled' %}
.slideshow__slide--{{ block.id }} .btn:before,
.slideshow__slide--{{ block.id }} .btn:after {
background: {{ block.settings.color_accent }} !important;
border: none;
}
{% endif %}
{% endunless %}
{% if block.settings.overlay_opacity > 0 %}
.slideshow__slide--{{ block.id }} .hero__image-wrapper:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 3;
background-color: #000;
opacity: {{ block.settings.overlay_opacity | divided_by: 100.0 }};
}
{% endif %}
{%- endstyle -%}
{%- liquid
assign hero_text = false
assign link_slide = false
if block.settings.top_subheading != blank or block.settings.title != blank or block.settings.subheading != blank or block.settings.link_text != blank
assign hero_text = true
endif
if block.settings.link != blank and block.settings.link_2 == blank
assign link_slide = true
endif
assign has_mobile_image = false
if block.settings.image_mobile != blank
assign has_mobile_image = true
endif
-%}
{%- if section.settings.parallax -%}
{%- endif -%}
{%- if block.settings.image != blank -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- if has_mobile_image -%}
{%- assign img_url_mobile = block.settings.image_mobile | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- else -%}
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if section.settings.parallax -%}
{%- endif -%}
{%- if link_slide -%}
{%- endif -%}
{%- if hero_text -%}
{%- unless block.settings.top_subheading == blank -%}
{{ block.settings.top_subheading | escape }}
{%- endunless -%}
{%- unless block.settings.title == blank -%}
##
{{ block.settings.title | newline_to_br }}
{%- endunless -%}
{%- if block.settings.subheading or block.settings.link or block.settings.link_2 -%}
{%- unless block.settings.subheading == blank -%}
{{ block.settings.subheading | escape }}
{%- endunless -%}
{%- if block.settings.link_text != blank or block.settings.link_text_2 != blank or block.settings.link_text_3 != blank -%}
{%- if block.settings.link_text != blank -%}
{{ block.settings.link_text }}
{%- endif -%}
{%- if block.settings.link_text_2 != blank -%}
{{ block.settings.link_text_2 }}
{%- endif -%}
{%- if block.settings.link_text_3 != blank -%}
{{ block.settings.link_text_3 }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if section.blocks.size == 0 -%}
{{ 'home_page.onboarding.no_content' | t }}
{%- endif -%}
{% schema %}
{
"name": "Slideshow",
"class": "index-section--hero",
"max_blocks": 5,
"settings": [
{
"type": "select",
"id": "section_height",
"label": "Desktop height",
"default": "650px",
"options": [
{
"label": "Natural",
"value": "natural"
},
{
"label": "450px",
"value": "450px"
},
{
"label": "550px",
"value": "550px"
},
{
"label": "650px",
"value": "650px"
},
{
"label": "750px",
"value": "750px"
},
{
"label": "Full screen",
"value": "100vh"
}
]
},
{
"type": "select",
"id": "mobile_height",
"label": "Mobile height",
"default": "auto",
"options": [
{
"label": "Auto",
"value": "auto"
},
{
"label": "250px",
"value": "250px"
},
{
"label": "300px",
"value": "300px"
},
{
"label": "400px",
"value": "400px"
},
{
"label": "500px",
"value": "500px"
},
{
"label": "Full screen",
"value": "100vh"
}
]
},
{
"type": "checkbox",
"id": "parallax",
"label": "Enable parallax",
"default": true
},
{
"type": "select",
"id": "style",
"label": "Slide navigation style",
"default": "bars",
"options": [
{
"value": "minimal",
"label": "Minimal"
},
{
"value": "arrows",
"label": "Arrows"
},
{
"value": "bars",
"label": "Bars"
},
{
"value": "dots",
"label": "Dots"
}
]
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-change slides",
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"label": "Change images every",
"default": 7,
"min": 5,
"max": 10,
"step": 1,
"unit": "s"
}
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "text",
"id": "top_subheading",
"label": "Subheading"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Two line\ntitle slide."
},
{
"type": "range",
"id": "title_size",
"label": "Heading text size",
"default": 80,
"min": 40,
"max": 100,
"unit": "px"
},
{
"type": "text",
"id": "subheading",
"label": "Text",
"default": "And optional subtext"
},
{
"type": "url",
"id": "link",
"label": "Slide link"
},
{
"type": "text",
"id": "link_text",
"label": "Slide link text",
"default": "Optional button"
},
{
"type": "url",
"id": "link_2",
"label": "Slide link 2"
},
{
"type": "text",
"id": "link_text_2",
"label": "Slide link text 2"
},
{
"type": "url",
"id": "link_3",
"label": "Slide link 3"
},
{
"type": "text",
"id": "link_text_3",
"label": "Slide link text 3"
},
{
"type": "color",
"id": "color_accent",
"label": "Buttons",
"default": "rgba(0,0,0,0)"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"default": "vertical-center horizontal-center",
"options": [
{
"value": "vertical-center horizontal-left",
"label": "Center left"
},
{
"value": "vertical-center horizontal-center",
"label": "Center"
},
{
"value": "vertical-center horizontal-right",
"label": "Center right"
},
{
"value": "vertical-bottom horizontal-left",
"label": "Bottom left"
},
{
"value": "vertical-bottom horizontal-center",
"label": "Bottom center"
},
{
"value": "vertical-bottom horizontal-right",
"label": "Bottom right"
}
]
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile image"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Text protection",
"info": "Darkens your image to ensure your text is readable",
"default": 0,
"min": 0,
"max": 100,
"step": 2,
"unit": "%"
},
{
"type": "select",
"id": "focal_point",
"label": "Image focal point",
"info": "Used to keep the subject of your photo in view.",
"default": "center center",
"options": [
{
"value": "20% 0",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "80% 0",
"label": "Top right"
},
{
"value": "20% 50%",
"label": "Left"
},
{
"value": "center center",
"label": "Center"
},
{
"value": "80% 50%",
"label": "Right"
},
{
"value": "20% 100%",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "80% 100%",
"label": "Bottom right"
}
]
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Image",
"settings": {
"autoplay": true,
"autoplay_speed": 5
},
"blocks": [
{
"type": "image",
"settings": {
"title": "Endless\npossibilities.",
"subheading": "Bring your brand to life"
}
},
{
"type": "image",
"settings": {
"title": "Two line\ntitle slide.",
"subheading": "And big, beautiful imagery"
}
}
]
}]
}
{% endschema %}
1 Like
Hello LitExtension, Can you think of why this code which worked originally no longer does? It’s still present in the theme code, but no third button option is available any more. Thank you
He there. My client wants a third button on his slideshow and your code worked great. The only issue I ran into was now my pictures are blurry. Not sure if you have a solution for this. I would love to use your code, thank you. But I won’t be able to if the pictures remain blurry. I tried resizing them already. Any input would be greatly appreciated.
-Mellissa