Shopify themes, liquid, logos, and UX
Hello, I wanted to make the image clickable in the slideshow.
I added a code
from this page: https://www.ecommercethesis.com/how-to-make-slideshow-images-clickable-on-shopify/
and it works.
But when I put a link for an image then the products of my featured katerogy are no longer displayed in a row,
Solved! Go to the solution
This is an accepted solution.
thanks for clear
please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.grid--view-items .medium-up--one-quarter {
clear: none !important;
}
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
great
i have see both are clickable or give me screenshot section so i will
the lower product should be listed with above
This is an accepted solution.
thanks for clear
please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.grid--view-items .medium-up--one-quarter {
clear: none !important;
}
Hello,
I would like some help making the two images in my slideshow clickable/linkable to my candle collections. I tried following the coding instructions, however, I'm not good and understanding code.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
https://meiibabii.myshopify.com
In the homepage slideshow, I would like the two slides to take the customer to those collections. I have the link attached to the pictures, but for some reason it’s not clickable
can you please sent slideshow section code so i will update
{%- if section.settings.slideshow_height == 'adapt' -%}
{% comment %}
'min_aspect_ratio' is the minimum aspect ratio of images shown without
whitespace when 'slideshow_height' is set to 'adapt'.
The aspect ratio values for the first image in the slideshow will be used
unless it is blank, in that case a ratio of 2:1 will be used.
{% endcomment %}
{%- assign first_block = section.blocks[0] -%}
{%- if first_block.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
{%- endif -%}
{% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
{%- endif -%}
{%- assign text_alignments = section.settings.text_alignment | split: ' ' -%}
{%- assign text_horizontal_alignment = text_alignments.first -%}
{%- assign text_vertical_alignment = text_alignments.last | strip -%}
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{%- if section.blocks.size > 0 -%}
<div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-label="slideshow" aria-describedby="slideshow-info" tabindex="-1">
<div class="slideshow slideshow--{{ section.settings.slideshow_height }}{% if display_controls %} slideshow--display-controls{% endif %}"
id="Slideshow-{{ section.id }}"
data-autorotate="{{ section.settings.autorotate }}"
data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
data-adapt-height="{% if section.settings.slideshow_height == 'adapt' %}true{% else %}false{% endif %}"
data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
{% if section.settings.slideshow_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}"
style="height: {{- wrapper_height -}}vw"{% endif %}>
{%- for block in section.blocks -%}
{%- assign block_image = block.settings.image -%}
<div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}>
{% if block_image == blank %}
<div class="slideshow__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>
{% else %}
<div
{% unless block_image.alt == blank %}
role="img"
thanks for code but its not full code i need full code that section
User | RANK |
---|---|
76 | |
65 | |
64 | |
53 | |
49 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023