Hello all.
I am trying to add a shoppable image on our home page that can directly link to products. Is there anyone who can help me?
Hi,
Do you have any reference?
Thanks
Yes, like this website.
Yes!!
create a new section in shopify with name shoppable-image.liquid
and paste this code
{% schema %}
{
“name”: “Shoppable Image”,
“settings”: [
{
“type”: “image_picker”,
“id”: “main_image”,
“label”: “Main Image”
}
],
“blocks”: [
{
“type”: “product_point”,
“name”: “Product Point”,
“settings”: [
{
“type”: “product”,
“id”: “product”,
“label”: “Select Product”
},
{
“type”: “range”,
“id”: “top”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Top Position”,
“default”: 50
},
{
“type”: “range”,
“id”: “left”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Left Position”,
“default”: 50
}
]
}
],
“max_blocks”: 10,
“presets”: [
{
“name”: “Shoppable Image”
}
]
}
{% endschema %}{% if section.settings.main_image != blank %}{% endif %}
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product] %}
{% if product %}
[
]({{ product.url }}){% endif %}
{% endfor %}
.hotspot .dot { width: 16px; height: 16px; background: #000; border-radius: 50%; display: block; position: relative; } .hotspot .dot::after { content: ''; width: 30px; height: 30px; border: 2px solid #000; border-radius: 50%; position: absolute; top: -7px; left: -7px; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 1; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(0.8); opacity: 0; } }
now go to theme customizer and use this section and your work will be done
Hi @Lorena1217
You can do this either with a theme section (if your theme has its own “image hotspots” or “featured image with links” functionality) or use a shoppable image app such as PageFly, EComposer, or GemPages. The app route is quickest, and you can create clickable hotspots on the image that link directly to products.