New Shopify Certification now available: Liquid Storefronts for Theme Developers

Focal points

Shopify Partner
17 0 0

How can i add focal point into my theme store image
it's give me an this message 
-> This section of your theme doesn’t support focal points 

Reply 1 (1)
2 0 1

Focal point adjustments for images are not natively supported in all Shopify themes apparently...
You need to use JS, if you want to know more let me know.


Add Custom JavaScript: You'll need to add JavaScript code to calculate and set the appropriate CSS properties to adjust the focal point of an image. For this, you could create a new JavaScript file (e.g., focal-point.js) in your theme's assets directory.

Here's a basic example of what the JavaScript code might look like:




// assets/focal-point.js
document.addEventListener('DOMContentLoaded', function () { var images = document.querySelectorAll('.focal-point-image'); images.forEach(function (image) { var focalX = parseFloat(image.getAttribute('data-focal-x')) || 0.5; var focalY = parseFloat(image.getAttribute('data-focal-y')) || 0.5; = (focalX * 100) + '% ' + (focalY * 100) + '%'; }); });