Different before and after slide for each product page

Shopify Discussion
1

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?

1 Like
2

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

3

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 %}
  
    

    

    
  

  
{% endif %}

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

1 Like