Clickable Slideshow Images - Pipeline Theme

Solved
Highlighted
New Member
4 0 0

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!!

0 Likes
Highlighted
Shopify Partner
151 22 23

Hi @leapy,

Go to Online Store -> Themes -> Actions -> Edit Code -> Section -> slideshow.liquid

then change anchor from button to above element.

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
0 Likes
Highlighted
New Member
4 0 0

Hello Pankaj,
Thanks for the reply. Unluckily I didn't resolved the problem.

1) "slideshow.liquid" is "index.slideshow.liquid" in Pipeline theme: is the same?

2) 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"

<div class="homepage-slideshow {{ section.settings.color }}" data-section-id="{{ section.id }}" data-section-type="slideshow">
  {% if section.blocks.size > 0 %}
    <div class="slick-wrapper" id="slideshow-{{ section.id }}"
      data-autoplay="{{ section.settings.autoplay }}"
      data-speed="{{ section.settings.autoplay_speed | times: 1000 }}">
      {% for block in section.blocks %}
        <div class="slick-slide slideshow__slide slideshow__slide--{{ block.id }} preventOverflow section--image"
          data-overlay-header
          {{ block.shopify_attributes }}>
          <div class="flex-absolute {{ block.settings.text_align }}">
            <div class="wrapper preventOverflowContent">
              {% unless block.settings.title == '' %}
                <h1 class="title--overlay h2">{{ block.settings.title | escape }}</h1>
              {% endunless %}
              {% unless block.settings.description == '' %}
                <p class="content--overlay h5--body">{{ block.settings.description }}</p>
              {% endunless %}
              {% unless block.settings.link_text == '' %}
                <a class="{{ block.settings.button_style }} cta--overlay btn--large uppercase" href="{{ block.settings.link }}">{{ block.settings.link_text | escape }}</a>
              {% endunless %}
            </div>
          </div>
          <div class="image-overlay image-overlay-{{ block.settings.overlay_opacity }}"></div>

          {% render 'hero', img_object: block.settings.image, frame_height_class: section.settings.height %}

          {% 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 %}

          {% if section.settings.height == 'use_screen_full' %}
            <div class="scroll_icon_wrap">
              <button data-scroll-down class="scroll_link bloop" aria-label="{{ 'general.accessibility.scroll' | t }}">
                <span class="scroll_icon">{% render 'icon-scroll-down' %}</span>
              </button>
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% endif %}

  <div class="slideshow__arrow slideshow__arrow--prev" data-prev-arrow>{% render 'icon-arrow-left' %}</div>
  <div class="slideshow__arrow slideshow__arrow--next" data-next-arrow>{% render 'icon-arrow-right' %}</div>

  {% if section.blocks.size == 0 %}
    <div class="slideshow__slide">
      <div class="text-center vertical-align">{{ 'home_page.onboarding.no_content' | t }}</div>
      <div class="image-overlay section--dark image-overlay-15"></div>
    </div>
  {% endif %}

</div>

{% 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.

0 Likes
Highlighted
Shopify Partner
151 22 23

Hi @leapy,

1. "index.slideshow.liquid" is correct  file in Pipeline theme.

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.

 

 

 

 

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
0 Likes
Highlighted
New Member
4 0 0

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!

0 Likes
Highlighted
Shopify Partner
151 22 23

This is an accepted solution.

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 %}
<a class="link-over-image" href="{{ block.settings.link }}" aria-label="{{ block.settings.title }}"></a>
{% endif %} 

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
0 Likes
Highlighted
New Member
4 0 0

Thank you very much for your kind reply and time!!
This worked perfectly.

Thanks again!

0 Likes