Seeking code to add 3rd button to home page slideshow (Impulse theme)

Technical Q&A

Topic summary

Adding a third CTA button to the Impulse theme’s homepage slideshow.

  • Initial request: The store owner asks how to add a third button to each slide (default has two). A helper requests the slideshow Liquid file and then provides a full replacement code block.

  • Provided solution: The replacement code renders three button labels via conditional checks for link_text, link_text_2, and link_text_3, indicating support for a third button. The helper’s post includes a substantial code snippet central to implementation.

  • New issues reported:
    • Original poster later notes the third button option is no longer available in the theme editor despite the code still being present, asking why it stopped working.
    • Another user confirms the code worked to add a third button but reports slideshow images became blurry and asks for a fix (resizing images did not help).

  • Status: No follow-up solutions or explanations yet for the missing third-button option or the image blurriness. Discussion remains open without a confirmed resolution.

Summarized with AI on December 31. AI used: gpt-5.
4

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