{"product_id":"spotlight-reveal-hero-section-shopify","title":"Spotlight Reveal Hero Section for Shopify","description":"\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eSpotlight Reveal Hero is a premium Shopify section designed to turn static product images into an interactive visual experience.\u003cbr\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cdiv class=\"custom-video-embed\"\u003e\u003cvideo preload=\"metadata\" playsinline=\"\" loop=\"loop\" muted=\"\" autoplay=\"autoplay\" class=\"custom-video-embed__video\"\u003e\n    \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/ac0edad6929d4dbbb1d6f937fb56c8eb.mp4\"\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003cstyle\u003e\n  .custom-video-embed {\n    width: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    border-radius: 20px;\n    background: #f6f6f6;\n  }\n\n  .custom-video-embed__video {\n    display: block;\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n    border-radius: inherit;\n  }\n\n  @media screen and (max-width: 749px) {\n    .custom-video-embed {\n      border-radius: 14px;\n    }\n  }\n\u003c\/style\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eOn desktop, customers can move their cursor over the hero image to reveal a second image with a smooth spotlight effect. On mobile, the reveal is triggered naturally while scrolling, creating a clean top-to-bottom reveal experience without relying on hover.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eThis section is perfect for brands that want to showcase before\/after transformations, product details, packaging reveals, ingredient layers, hidden mechanisms, lifestyle changes, or premium product storytelling.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eUse it to create visual moments like a perfume bottle revealing its fragrance notes, a watch showing its inner mechanism, a product transforming into its packaged version, or a plain room becoming styled with your product.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eBuilt for Shopify theme customization, the section includes flexible image options, separate desktop and mobile content, editable colors, adjustable text positions, mobile-specific controls, overlay settings, button styling, and smooth responsive behavior.\u003cbr\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cdiv class=\"custom-gif-embed\"\u003e\u003cimg class=\"custom-gif-embed__image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0965\/7932\/2167\/files\/CleanShot_2026-06-30_at_10.16.50.gif?v=1782805109\" alt=\"Spotlight Reveal Hero Section preview\" loading=\"lazy\"\u003e\u003c\/div\u003e\n\u003cstyle\u003e\n  .custom-gif-embed {\n    width: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    border-radius: 20px;\n    background: #f6f6f6;\n  }\n\n  .custom-gif-embed__image {\n    display: block;\n    width: 100%;\n    height: auto;\n    border-radius: inherit;\n  }\n\n  @media screen and (max-width: 749px) {\n    .custom-gif-embed {\n      border-radius: 14px;\n    }\n  }\n\u003c\/style\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003e\u003cbr\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eKey Features:\u003c\/span\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003eDesktop hover reveal effect\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eMobile scroll reveal effect\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eSeparate desktop and mobile images\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eSeparate desktop and mobile text content\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eCustom text colors for desktop and mobile\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eAdjustable content position and spacing\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eSmooth reveal animation\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eDark overlay control\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eButton customization\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eMobile-friendly interaction\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eNo app required\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eEasy Shopify theme editor setup\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eIdeal for luxury, beauty, fashion, tech, decor, and premium product stores\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eBest Use Cases:\u003c\/span\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003eBefore \/ after product transformations\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eProduct packaging reveals\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ePerfume note layer reveals\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eWatch mechanism reveals\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eSkincare ingredient reveals\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eSneaker technology reveals\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eBag interior reveals\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eHome decor room transformations\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eProduct detail close-up reveals\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ePremium campaign hero banners\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"211 Creatives","offers":[{"title":"Default Title","offer_id":52578004730167,"sku":null,"price":19.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0965\/7932\/2167\/files\/11a15004-957c-4a33-9378-b282ccb4d215.png?v=1782804732","url":"https:\/\/211creatives.com\/products\/spotlight-reveal-hero-section-shopify","provider":"211 Creatives","version":"1.0","type":"link"}