Hello,
I’m trying to make my Pipeline Slideshow images full clickable, instead having a button label on them.
The option inside the theme editor says “leave button text blank to link the entire image”, but this doesn’t work since it links all slideshow images to the homepage, instead leading to the indicated pages.
I checked similar questions/tutorials but no results with Pipeline Theme.
I’d be very glad if someone could help, thank you in advance!!
Hi @leapy ,
Go to Online Store → Themes → Actions → Edit Code → Section → slideshow.liquid
then change anchor from button to above element.
Hello Pankaj,
Thanks for the reply. Unluckily I didn’t resolved the problem.
“slideshow.liquid” is “index.slideshow.liquid” in Pipeline theme: is the same?
What do you mean change anchor from button to above element? I didn’t find any of these terms inside the “index.slideshow.liquid”.
This is the actual code inside “index.slideshow.liquid”
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% unless block.settings.title == '' %}
# {{ block.settings.title | escape }}
{% endunless %}
{% unless block.settings.description == '' %}
{{ block.settings.description }}
{% endunless %}
{% unless block.settings.link_text == '' %}
{{ block.settings.link_text | escape }}
{% endunless %}
{% render 'hero', img_object: block.settings.image, frame_height_class: section.settings.height %}
{% if block.settings.link_text == '' and block.settings.link %}
{% endif %}
{% if section.settings.height == 'use_screen_full' %}
{% endif %}
{% endfor %}
{% endif %}
{% render 'icon-arrow-left' %}
{% render 'icon-arrow-right' %}
{% if section.blocks.size == 0 %}
{{ 'home_page.onboarding.no_content' | t }}
{% endif %}
{% schema %}
{
"name": "Slideshow",
"settings": [
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-rotate slides",
"default": false
},
{
"type": "range",
"id": "autoplay_speed",
"min": 1,
"max": 15,
"step": 1,
"unit": "sec",
"label": "Change slides every",
"default": 8
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "use_screen_two_thirds",
"options": [
{ "value": "use_screen_full", "label": "Full screen height"},
{ "value": "use_screen_three_quarters", "label": "Three quarters of screen height"},
{ "value": "use_screen_two_thirds", "label": "Two thirds of screen height"},
{ "value": "use_screen_one_half", "label": "One half of screen height"},
{ "value": "use_screen_one_third", "label": "One third of screen height"},
{ "value": "use_pixels_800", "label": "800px" },
{ "value": "use_pixels_650", "label": "650px" },
{ "value": "use_pixels_500", "label": "500px" },
{ "value": "use_image", "label": "Image height"}
]
},
{
"type": "select",
"id": "color",
"label": "Text color",
"default": "palette--contrast--dark",
"options": [
{ "value": "palette--contrast--dark", "label": "White"},
{ "value": "palette--primary", "label": "Primary accent"},
{ "value": "palette--secondary", "label": "Secondary accent"},
{ "value": " ", "label": "Text color"},
{ "value": "palette--contrast", "label": "Black"},
{ "value": "palette--primary--dark", "label": "Primary dark accent"},
{ "value": "palette--secondary--dark", "label": "Secondary dark accent"},
{ "value": "palette--dark", "label": "Inverted text color"}
]
}
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Match size to other slides"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 5,
"label": "Image overlay opacity",
"info": "Increase contrast for legible text.",
"default": 15
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image slide"
},
{
"type": "textarea",
"id": "description",
"label": "Subheading",
"default": "Tell your brand's story through images."
},
{
"type": "select",
"id": "text_align",
"label": "Alignment",
"default": "align--middle-center",
"options": [
{ "value": "align--top-left", "label": "Top left"},
{ "value": "align--top-center", "label": "Top center"},
{ "value": "align--top-right", "label": "Top right"},
{ "value": "align--middle-left", "label": "Middle left"},
{ "value": "align--middle-center", "label": "Absolute center"},
{ "value": "align--middle-right", "label": "Middle right"},
{ "value": "align--bottom-left", "label": "Bottom left"},
{ "value": "align--bottom-center", "label": "Bottom center"},
{ "value": "align--bottom-right", "label": "Bottom right"}
]
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "View products",
"info": "Leave blank to link entire image"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "btn",
"options": [
{ "value": "btn", "label": "Solid button"},
{ "value": "btn--soft", "label": "Soft button"},
{ "value": "btn--outline", "label": "Outlined button"}
]
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Image",
"settings": {
"height": "use_screen_two_thirds"
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}]
}
{% endschema %}
I’m sorry that my html/css knowledge is not so wide, I’d need a more step-by-step solution, I’d be very glad if you could help me!
Thank you in advance.
Hi @leapy ,
As I am checking this above code, Link code is already there.
Please add link in the each slide and then please share store url.
I will check and will share some css code if required.
Hi @Pankaj_Gupta ,
Thank you very much for your help. My store url is: www.leaphere.art
As you can notice, homepage slideshow images redirect all to the homepage, even if I insert collections links in each slide.
Thank you very much in advance for your help!
Hi @leapy ,
Please change some code
{% if block.settings.link_text == '' and block.settings.link %}
<a class="link-over-image" href="{{ section.settings.link }}" aria-label="{{ block.settings.title }}"></a>
{% endif %}
Replace with
{% if block.settings.link_text == ‘’ and block.settings.link %}
{% endif %}
Thank you very much for your kind reply and time!!
This worked perfectly.
Thanks again!