{"product_id":"before-and-after-shopify-os-2-0-section","title":"Before and After  – Shopify OS 2.0 Section","description":"\u003cp class=\"p1\"\u003eShow the transformation in seconds. \u003cspan class=\"s1\"\u003e\u003cb\u003eTB – Before \/ After\u003c\/b\u003e\u003c\/span\u003e lets shoppers drag to compare images with a smooth, premium slider—perfect for product upgrades, redesigns, edits, restorations, and UGC improvements.\u003c\/p\u003e\n\u003cp class=\"p1\"\u003eIncludes \u003cspan class=\"s1\"\u003e\u003cb\u003esingle compare mode\u003c\/b\u003e\u003c\/span\u003e or \u003cspan class=\"s1\"\u003e\u003cb\u003emulti-slide comparisons\u003c\/b\u003e\u003c\/span\u003e, plus modern styling controls so it matches any theme.\u003c\/p\u003e\n\u003cp class=\"p1\"\u003e\u003cb\u003eBest for:\u003c\/b\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eProduct upgrades and refinements\u003c\/li\u003e\n\u003cli\u003e“Before vs After” results (beauty, fitness, home, detailing, cleaning)\u003c\/li\u003e\n\u003cli\u003eWebsite redesigns and design portfolios\u003c\/li\u003e\n\u003cli\u003ePhoto edits, restorations, retouching, UGC comparisons\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp class=\"p1\"\u003e\u003cb\u003eKey features:\u003c\/b\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eDrag-to-compare interaction (smooth + responsive)\u003c\/li\u003e\n\u003cli\u003e\n\u003cb\u003eOrientation options:\u003c\/b\u003e\u003cspan class=\"s1\"\u003e Horizontal (left\/right) \u003c\/span\u003e\u003cb\u003eor Vertical (top\/bottom)\u003c\/b\u003e\u003cspan class=\"s1\"\u003e compare\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003cspan class=\"s1\"\u003e\u003cb\u003eForce vertical dragging option\u003c\/b\u003e\u003c\/span\u003e (better UX on touch \/ avoids accidental horizontal drag)\u003c\/li\u003e\n\u003cli\u003eNo image distortion while dragging (clip-based reveal)\u003c\/li\u003e\n\u003cli\u003eSingle mode (simple before\/after) or multiple comparisons via blocks\u003c\/li\u003e\n\u003cli\u003eOptional labels (“Before” \/ “After”) + optional captions\u003c\/li\u003e\n\u003cli\u003eSlider UI options: dots + arrows (when using multiple blocks)\u003c\/li\u003e\n\u003cli\u003eStyling controls: colors, widths, shadows, spacing, and rounded UI presets\u003c\/li\u003e\n\u003cli\u003eTypography controls: font style + font weights (incl. label\/badge typography controls)\u003c\/li\u003e\n\u003cli\u003eOptional CTA button (toggle on\/off)\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp class=\"p3\"\u003e\u003cb\u003eWhy merchants love it\u003c\/b\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eNo app installs or monthly fees — just drop in the section and go\u003c\/li\u003e\n\u003cli\u003eMobile-friendly (touch drag optimized)\u003c\/li\u003e\n\u003cli\u003eFast setup: add the section, upload images, publish\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp class=\"p3\"\u003e\u003cb\u003eCompatibility\u003c\/b\u003e\u003c\/p\u003e\n\u003cp class=\"p1\"\u003eWorks with Shopify Online Store 2.0 themes and installs as a single section file (no theme rebuild required). Includes docs + email support.\u003c\/p\u003e\n\u003cp class=\"p3\"\u003e\u003cb\u003eLicense\u003c\/b\u003e\u003c\/p\u003e\n\u003cp class=\"p1\"\u003e1 store per purchase (agency license available for multiple stores).\u003c\/p\u003e\n\u003cp class=\"p1\"\u003e\u003cb\u003eWorks with Shopify Online Store 2.0 themes\u003c\/b\u003e\u003cspan class=\"s2\"\u003e and installs as a single section file.\u003c\/span\u003e\u003c\/p\u003e","brand":"Themeblocks.co","offers":[{"title":"Merchant (1 store)","offer_id":43551857573976,"sku":"TB-BEFOREAFTER-MERCHANT","price":19.0,"currency_code":"USD","in_stock":true},{"title":"Agency (25 stores + update)","offer_id":43551857606744,"sku":"TB-BEFOREAFTER-AGENCY","price":99.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0693\/1136\/5208\/files\/before-after-main.png?v=1766822725","url":"https:\/\/themeblocks.co\/products\/before-and-after-shopify-os-2-0-section","provider":"Themeblocks.co","version":"1.0","type":"link"}