Different before and after slide for each product page

[lenssis2025]

Hi, I found a few apps that have before-and-after slide, however it applies to all product pages.

I want to make separate before-and-after slide for each product page. 

How can I do that? 

[Dan-From-Ryviu]

Hi @lenssis2025 

Please check if the app can apply slides to selected products. If it does not, I guess you will need to create a separate product template for each product and then add a separate slide to them. 

You can check this to learn how to create a separate product template.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

Best regards,

Dan

[oscprofessional]

Hi @lenssis2025 ,

To create a before-and-after slider specific to each product page in Shopify:

Using Metafields 

1. Add Metafields

   • Go to Settings > Custom Data > Products
   • Create two metafields: before_image & after_image (File type).
   • Upload images per product.

2. Edit Theme Code

   • Open product.liquid and add:

{% if product.metafields.custom.before_image and product.metafields.custom.after_image %}
  <div class="before-after-slider">
    <div class="before" style="background-image: url('{{ product.metafields.custom.before_image | img_url: 'large' }}');"></div>
    <div class="after" style="background-image: url('{{ product.metafields.custom.after_image | img_url: 'large' }}');"></div>
    <input type="range" min="0" max="100" value="50" class="slider">
  </div>
  <script>
    document.querySelector(".slider").addEventListener("input", function () {
      document.querySelector(".after").style.clipPath = `inset(0 ${100 - this.value}% 0 0)`;
    });
  </script>
{% endif %}

     3.Save & Check – Each product will display its own unique before-and-after slider.