How can i implement focal point on images through liquid coding in shopify

AK71
Shopify Partner
20 0 0

I want to implement focal point on image tag through liquid coding. I don't know How to add this. please help me t solve this issue.

 

Thanks

 

focal.png

 

 

Ahmad
Replies 2 (2)

GemPages
Shopify Partner
5588 1261 1203

Hello @AK71 

I would like to give you some recommendations to support you
Let's try adding this code :

<a data-caption="image 1" data-fancybox="gallery1" href="https://ucarecdn.com/d4804a30-1dff-4860-adbd-98298394eac2/-/format/auto/-/preview/3000x3000/-/quality/lighter/slider-show-1_07c3288f-0efb-40f3.jpg" target=""><img src="https://ucarecdn.com/d4804a30-1dff-4860-adbd-98298394eac2/-/format/auto/-/preview/3000x3000/-/quality/lighter/slider-show-1_07c3288f-0efb-40f3.jpg" alt="Mobile image 1" class="gf_image" data-gemlang="en" width="1170" height="600" data-width="100%" data-height="auto" title="" natural-width="1170" natural-height="600"></a>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"
      integrity="sha512-j7/1CJweOskkQiS5RD9W8zhEG9D9vpgByNGxPIqkO5KrXrwyDAroM9aQ9w8J7oRqwxGyz429hPVk/zR6IOMtSA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css"
      integrity="sha512-nNlU0WK2QfKsuEmdcTwkeh+lhGs6uyOxuUs+n+0oXSYDok5qy0EI0lt01ZynHq6+p/tbgpZ7P+yUb+r71wqdXg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    >

I hope the above is useful to you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
AK71
Shopify Partner
20 0 0

Hi @GemPages 

Thanks for reply

 

i try but never get results using this code but As i want i replaced "image_tag" and "image_url" to "img_tag" and "img_url" after this focal point implemented from storefront.

 

 

AK71_0-1675420507952.png

 

Ahmad