Copy-paste a Liquid snippet for product page - An interactive draggable divider over two images - shows the product's effect better than any bullet point.
Drag to compare - placeholder blocks stand in for the real photos.
1{%- comment -%}2 Pass before_image / after_image (product.media entries or metafield images).3 The handle is a range input so keyboard users can drag it too.4{%- endcomment -%}5{%- assign b = before_image | default: product.media[0].preview_image -%}6{%- assign a = after_image | default: product.media[1].preview_image -%}7{%- if b and a -%}8 <div class="gpl-ba" data-gpl-ba style="--gpl-accent: {{ accent | default: '#c8f542' }};">9 <img class="gpl-ba__img" src="{{ a | image_url: width: 1200 }}" alt="After" loading="lazy" width="1200" height="{{ 1200 | divided_by: a.aspect_ratio | round }}">10 <div class="gpl-ba__before" data-gpl-ba-before>11 <img class="gpl-ba__img" src="{{ b | image_url: width: 1200 }}" alt="Before" loading="lazy" width="1200" height="{{ 1200 | divided_by: b.aspect_ratio | round }}">12 </div>13 <input class="gpl-ba__range" type="range" min="0" max="100" value="50" step="0.5" aria-label="Reveal before and after comparison">14 <span class="gpl-ba__tag gpl-ba__tag--before">Before</span>
Full source is for members
One payment - every snippet, guide and bundle
