How can I incorporate focal points in my theme store image?

How can I incorporate focal points in my theme store image?

Joy_Matubber
Shopify Partner
28 0 1

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)

oli_dev
Visitor
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; image.style.objectPosition = (focalX * 100) + '% ' + (focalY * 100) + '%'; }); });