Different before and after slide for each product page

Shopify Discussion

Topic summary

A user seeks to implement unique before-and-after image sliders for individual product pages, rather than applying the same slider across all products.

Two solutions proposed:

Option 1 - Separate Product Templates:

  • Create individual product templates for each product
  • Add distinct sliders to each template
  • Reference Shopify’s documentation on template creation

Option 2 - Metafields Approach (more scalable):

  • Navigate to Settings > Custom Data > Products
  • Create two custom metafields: before_image and after_image (File type)
  • Upload unique images for each product
  • Edit product.liquid theme file to conditionally display sliders using metafield data
  • Code snippet provided shows how to reference metafields in Liquid template

Status: The discussion provides actionable solutions but remains open—no confirmation yet on which approach the original poster will implement or whether either solution successfully resolved their need.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
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