How can I add an extra button to a slideshow in the AVENUE theme?

Store Design
1

Is there a simple way with code (for a beginner with some knowledge of coding) to add an extra button to a slideshow for AVENUE theme?

This is the liquid code for the slideshow.

{%- assign full_width = section.settings.full_width -%}

1 %} data-url="{{ 'script.slideshow.js' | asset_url }}" data-slideshow-type="image" data-carousel-type="slideshow" {% endif %} id="slideshow-{{ section.id }}" class="{% if section.settings.enable_padding %}margins-bottom-section {% endif %}{% if section.blocks.size > 1 %}glider-enabled {% endif %}{% if settings.animation_enable %}animate-section-div {% endif %}clearfix">

<div{% if section.blocks.size > 1 %} id=“glider-carousel-{{ section.id }}” data-glider-autoplay=“{{ section.settings.auto_rotate_every | times: 1000 }}” data-glider-autorotate=“{% if section.settings.auto_rotate %}true{% else %}false{% endif %}” class=“glider slideshow”{% endif %}>

{% capture section_onboarding_text %}

{{ 'homepage.onboarding.slide_no_title' | t }}

{{ 'homepage.onboarding.no_body' | t }}

{% endcapture %}

{%- liquid
if section.blocks.size == 0
echo section_onboarding_text
endif
-%}

{% for block in section.blocks %}

{%- liquid
if block.settings.block_img_d != blank or block.settings.block_img_m != blank
assign section_onboarding = false
else
assign section_onboarding = true
endif
-%}

1 %} data-gslide="{{ forloop.index0 }}"{% endif %} {{ block.shopify_attributes }}>
{%- liquid if section_onboarding echo section_onboarding_text else if block.settings.link != blank echo '' endif assign screen = '' if block.settings.block_img_d != blank capture alt_d if block.settings.block_img_d.alt != blank echo block.settings.block_img_d.alt else echo block.settings.block_img_d | split: '/' | last | replace: '-', ' ' | replace: '_', ' ' | split: '.' | first | capitalize endif endcapture if full_width assign size = 2560 else assign size = 1280 endif if block.settings.block_img_m != blank assign screen = 'desktop-image ' endif render 'image.load', id: block.settings.block_img_d.id, img_src: block.settings.block_img_d, size: size, alt: alt, screen: screen endif if block.settings.block_img_m != blank capture alt_d if block.settings.block_img_m.alt != blank echo block.settings.block_img_m.alt else echo block.settings.block_img_m | split: '/' | last | replace: '-', ' ' | replace: '_', ' ' | split: '.' | first | capitalize endif endcapture assign size = 600 if block.settings.block_img_d != blank assign screen = 'mobile-image ' endif render 'image.load', id: block.settings.block_img_m.id, img_src: block.settings.block_img_m, size: size, alt: alt, screen: screen endif if block.settings.link != blank echo '' endif endif -%}
{% endfor %}

{% if section.blocks.size > 1 %}
{% if section.settings.white_nav %}
{%- assign icon_class = ‘white’ -%}
{% endif %}

{%- render 'icons.theme', icon: 'left', size: '16', icon_class: icon_class -%} {%- render 'icons.theme', icon: 'right', size: '16', icon_class: icon_class -%}
{% endif %}

{% schema %}
{
“name”: “Slideshow with image”,
“max_blocks”: 4,
“settings”: [
{
“type”: “paragraph”,
“content”: “To add text, try the ‘Slideshow with Text’ section. Learn more”
},
{
“type”: “checkbox”,
“id”: “auto_rotate”,
“label”: “Auto-rotate slides”,
“default”: false
},
{
“type”: “range”,
“id”: “auto_rotate_every”,
“min”: 5,
“max”: 10,
“step”: 1,
“unit”: “sec”,
“label”: “Change slides every”,
“default”: 5
},
{
“type”: “checkbox”,
“id”: “full_width”,
“label”: “Full width”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_nav”,
“label”: “Enable multi slide navigation”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “white_nav”,
“label”: “White multi slide navigation”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “enable_padding”,
“label”: “Enable bottom padding”,
“default”: false
}
],
“blocks”: [
{
“type”: “slide”,
“name”: “Slide”,
“settings”: [
{
“type”: “header”,
“content”: “Slide”,
“info”: “If you want to add text, consider using the Slideshow with Text section”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
},
{
“type”: “header”,
“content”: “Background”
},
{
“type”: “image_picker”,
“id”: “block_img_d”,
“label”: “Desktop image”,
“info”: “1900px width recommended”
},
{
“type”: “image_picker”,
“id”: “block_img_m”,
“label”: “Mobile image”,
“info”: “600px width recommended”
}
]
}
],
“presets”: [
{
“name”: “Slideshow with image”,
“category”: “Image”,
“blocks”: [
{
“type”: “slide”
},
{
“type”: “slide”
},
{
“type”: “slide”
}
]
}
]
}
{% endschema %}

Thanks

1 Like
2

@GemmaBAB

thank for post if possible to share store url also

3

It will be for our new theme we are working on so shall I share preview link?

4

@GemmaBAB

yes, please