I'm currently using a Luna theme from the big cartel website template. I am wondering if there is any way or coding I can use to make my image on the slide show clickable. I specially want it to lead my customers to certain product pages.
Asked
Active
Viewed 350 times
1 Answers
0
Yep! Hope this helps! :)
Copy and paste this into the custom code for your Home page. Change the links to your product pages that you'd like. Also, you can add more slides with links by repeating the code like I did.
{% if theme.image_sets.slideshow.size > 0 %}
<div class="flexslider home-slideshow">
<ul class="slides">
{% for image in theme.image_sets.slideshow %}
<li>
<a href="LINK GOES HERE 1"><img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}"></a>
</li>
<li>
<a href="LINK GOES HERE 2"><img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}"></a>
</li>
<li>
<a href="LINK GOES HERE 3"><img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}"></a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if theme.max_products_per_row == 4 %}
{% assign product_image_constrain_width = 255 %}
{% assign product_image_constrain_height = 255 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 3 %}
{% assign product_image_constrain_width = 346 %}
{% assign product_image_constrain_height = 346 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 2 %}
{% assign product_image_constrain_width = 526 %}
{% assign product_image_constrain_height = 526 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 1 %}
{% assign product_image_constrain_width = 1068 %}
{% assign product_image_constrain_height = 1068 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% endif %}
{% assign thumb_constrain_width = 30 %}
{% assign thumb_constrain_height = 30 %}
<h1 class="visually-hidden">Featured Products</h1>
{% if theme.featured_items > 0 %}
{% get products from products.all limit:theme.featured_items order:theme.featured_order %}
{% if products != blank %}
<div class="product-list-container">
<div class="product-list">
{% for product in products %}
{% assign product_status = '' %}
{% case product.status %}
{% when 'active' %}
{% if product.on_sale %}{% assign product_status = 'On sale' %}{% endif %}
{% when 'sold-out' %}
{% assign product_status = 'Sold out' %}
{% when 'coming-soon' %}
{% assign product_status = 'Coming soon' %}
{% endcase %}
{% capture image_class %}
{% if product.image.height > product.image.width %}
image-tall
{% if theme.grid_image_style == 'crop-to-square' %}
{% assign product_image_constrain_height = '' %}
{% assign product_image_constrain_height_large = '' %}
{% assign thumb_constrain_height = '' %}
{% endif %}
{% elsif product.image.height < product.image.width %}
image-wide
{% if theme.grid_image_style == 'crop-to-square' %}
{% assign product_image_constrain_width = '' %}
{% assign product_image_constrain_width_large = '' %}
{% assign thumb_constrain_width = '' %}
{% endif %}
{% else %}
image-square
{% endif %}
{% endcapture %}
<div class="product-list-thumb {{ theme.grid_image_style }} {{ theme.show_overlay }}">
<a class="product-list-link" href="{{ product.url }}" title="View {{ product.name | escape }}">
<div class="product-list-thumb-container">
<figure class="product-list-image-container">
<div class="image-wrapper">
<img alt="" class="lazy product-list-image {{ image_class }}" src="{{ product.image | product_image_url | constrain: thumb_constrain_width,thumb_constrain_height }}" data-src="{{ product.image | product_image_url | constrain: product_image_constrain_width, product_image_constrain_height }}" data-srcset="{{ product.image | product_image_url | constrain: product_image_constrain_width_large, product_image_constrain_height_large }} 2x, {{ product.image | product_image_url | constrain: product_image_constrain_width, product_image_constrain_height }} 1x">
</div>
</figure>
</div>
<div class="product-list-thumb-info">
<div class="product-list-item-background"></div>
<div class="product-list-thumb-info-headers">
<div class="product-list-thumb-name">{{ product.name }}</div>
<div class="product-list-thumb-price">
{% if product.variable_pricing %}
{{ product.min_price | money: theme.money_format }} - {{ product.max_price | money: theme.money_format }}
{% else %}
{{ product.default_price | money: theme.money_format }}
{% endif %}
{% if product_status != blank %}
<div class="product-list-thumb-status">{{ product_status }}</div>
{% endif %}
</div>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div class="empty-products centered-message">No products found.</div>
{% endif %}
{% endget %}
{% endif %}