{"title":"Canvases","description":"","products":[{"product_id":"editorial-hover-grid","title":"Editorial Hover Grid","description":"\u003cp data-end=\"926\" data-start=\"675\"\u003e\u003cmeta charset=\"utf-8\"\u003eBuilt for designers who care about details. \u003c\/p\u003e\n\u003cp data-end=\"926\" data-start=\"675\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003eEditorial Hover Grid creates a high-end interactive image experience for your Showit website with floating hover previews, responsive scaling, and movement. Designed to feel elevated and immersive, this component helps you showcase more imagery in a more engaging way encouraging visitors to explore, interact, and click deeper into your website.\u003cbr\u003e\u003c\/p\u003e\n\u003cp data-end=\"1410\" data-start=\"1395\"\u003eYOU CAN ADJUST:\u003c\/p\u003e\n\u003cul\u003e\n\u003cli data-end=\"1427\" data-start=\"1412\"\u003e\n\u003cstrong data-end=\"1427\" data-start=\"1412\"\u003eImage Ratios - \u003c\/strong\u003eFor background images and hover images\u003c\/li\u003e\n\u003cli data-end=\"1427\" data-start=\"1412\"\u003e\n\u003cstrong data-end=\"1471\" data-start=\"1454\"\u003eHover Zoom Effect - \u003c\/strong\u003eControl how much the background images zoom when hovered\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cp data-section-id=\"170ewvu\" data-start=\"62\" data-end=\"82\"\u003e\u003cspan role=\"text\"\u003eWHAT'S INCLUDED:\u003c\/span\u003e\u003c\/p\u003e\n\u003cp data-start=\"672\" data-end=\"727\"\u003eInstall the canvas in minutes using Showit’s Share Key. A detailed instruction guide is included. (Please note the cursor effect is not included. It can be purchased \u003ca rel=\"noopener\" href=\"https:\/\/showcodestudio.com\/products\/icon-cursor-circle\" target=\"_blank\"\u003ehere\u003c\/a\u003e.)\u003c\/p\u003e\n\u003cp data-start=\"921\" data-end=\"1005\"\u003eDesigned to be simple to customize while still feeling fully custom on your website.\u003c\/p\u003e\n\u003cp data-end=\"1734\" data-start=\"1719\" data-section-id=\"188ofbi\"\u003ePERFECT FOR:\u003c\/p\u003e\n\u003cul data-end=\"1877\" data-start=\"1735\"\u003e\n\u003cli data-end=\"1750\" data-start=\"1735\" data-section-id=\"1f9ugc\"\u003ePhotographers\u003c\/li\u003e\n\u003cli data-end=\"1769\" data-start=\"1751\" data-section-id=\"1or9j74\"\u003eCreative studios\u003c\/li\u003e\n\u003cli data-end=\"1781\" data-start=\"1770\" data-section-id=\"ul1b5q\"\u003eDesigners\u003c\/li\u003e\n\u003cli data-end=\"1791\" data-start=\"1782\" data-section-id=\"5snorc\"\u003eCoaches\u003c\/li\u003e\n\u003cli data-end=\"1822\" data-start=\"1792\" data-section-id=\"17y9iai\"\u003eFashion and editorial brands\u003c\/li\u003e\n\u003cli data-end=\"1843\" data-start=\"1823\" data-section-id=\"8kn3x6\"\u003ePortfolio websites\u003c\/li\u003e\n\u003cli data-end=\"1877\" data-start=\"1844\" data-section-id=\"vwb9iq\"\u003eLuxury-inspired Showit websites\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45074056249414,"sku":null,"price":10.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/Editorial_Hover_Grid.gif?v=1779408767"},{"product_id":"split-reveal-scroll","title":"Split Reveal Scroll","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv data-is-intersecting=\"true\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection data-turn=\"assistant\" data-scroll-anchor=\"false\" data-testid=\"conversation-turn-8\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" data-turn-id=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv data-turn-start-message=\"true\" class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" data-message-model-slug=\"gpt-5-5\" dir=\"auto\" data-message-id=\"649d8f4d-0d8f-4843-b158-c20b316a120c\" data-message-author-role=\"assistant\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cp data-end=\"421\" data-start=\"51\"\u003eSplit Reveal Scroll creates a cinematic scroll-based reveal effect for your Showit website where elements slide apart as visitors scroll, uncovering hidden content underneath. This component transforms static sections into interactive moments that encourage visitors to slow down, engage, and explore deeper into your website.\u003c\/p\u003e\n\u003cp data-end=\"564\" data-start=\"423\"\u003ePerfect for showcasing headlines, imagery, offers, portfolio content, videos, or layered brand messaging in a more elevated and high-end way.\u003c\/p\u003e\n\u003cp data-end=\"582\" data-start=\"567\"\u003eYOU CAN ADJUST:\u003c\/p\u003e\n\u003cp data-end=\"939\" data-start=\"584\"\u003e\u003cmeta charset=\"utf-8\"\u003eStart Delay - Control when the movement begins during scroll\u003cbr data-end=\"80\" data-start=\"77\"\u003eScroll Length - Adjust how quickly or slowly the animation completes\u003cbr data-end=\"151\" data-start=\"148\"\u003eDistance - Control how far the elements move apart horizontally\u003cbr data-end=\"776\" data-start=\"773\"\u003eContent Behind Reveal - Adjust or add text, buttons, images, or video behind the moving images\u003cbr\u003e\u003c\/p\u003e\n\u003cp data-end=\"958\" data-start=\"942\"\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp data-end=\"1057\" data-start=\"960\"\u003eInstall the canvas in minutes using Showit’s Share Key. A detailed instruction guide is included.\u003cbr\u003e\u003c\/p\u003e\n\u003cp data-end=\"1143\" data-start=\"1059\"\u003eDesigned to be simple to customize while still feeling fully custom on your website.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"z-0 flex min-h-[46px] justify-start\"\u003ePLEASE NOTE: The other canvases shown in the video are not included. They're just shown so you can see the effect. The circle cursor is not included but can be purchased \u003ca rel=\"noopener\" href=\"https:\/\/showcodestudio.com\/products\/icon-cursor-circle\" target=\"_blank\"\u003ehere\u003c\/a\u003e.\u003c\/div\u003e\n\u003cdiv class=\"mt-3 w-full empty:hidden\"\u003e\n\u003cdiv class=\"text-center\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cdiv class=\"contents\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"pointer-events-none -mt-px h-px translate-y-[calc(var(--scroll-root-safe-area-inset-bottom)-14*var(--spacing))]\" aria-hidden=\"true\"\u003e\u003cbr\u003e\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45074601902150,"sku":null,"price":12.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/Split-Reveal-Scroll.gif?v=1779429906"},{"product_id":"image-stack-peel","title":"Image Stack Peel","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv data-is-intersecting=\"true\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection data-turn=\"assistant\" data-scroll-anchor=\"false\" data-testid=\"conversation-turn-8\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" data-turn-id=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv data-turn-start-message=\"true\" class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" data-message-model-slug=\"gpt-5-5\" dir=\"auto\" data-message-id=\"649d8f4d-0d8f-4843-b158-c20b316a120c\" data-message-author-role=\"assistant\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cp data-end=\"1143\" data-start=\"1059\"\u003eDEMO LINK: \u003ca href=\"https:\/\/image-stack-peel.showit.site\/\"\u003ehttps:\/\/image-stack-peel.showit.site\/\u003c\/a\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"mt-3 w-full empty:hidden\"\u003e\n\u003cdiv class=\"text-center\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cp data-start=\"51\" data-end=\"194\"\u003eImage Stack Peel creates a layered scroll-based animation for your Showit website where stacked images peel away one-by-one as visitors scroll.\u003c\/p\u003e\n\u003cp data-start=\"196\" data-end=\"453\"\u003eInstead of building multiple overlapping canvases in Showit and manually adjusting spacing, layering, and responsiveness yourself, this component is already pre-configured for you. Simply replace the 4 image links with your own photos and publish your site.\u003c\/p\u003e\n\u003cp data-start=\"455\" data-end=\"629\"\u003eDesigned to feel cinematic, tactile, and editorial, this component transforms static imagery into a more immersive interactive experience without the usual setup frustration.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"pointer-events-none -mt-px h-px translate-y-[calc(var(--scroll-root-safe-area-inset-bottom)-14*var(--spacing))]\" aria-hidden=\"true\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cp data-end=\"2029\" data-start=\"2009\" data-section-id=\"q1y7di\"\u003eYOU CAN CUSTOMIZE:\u003c\/p\u003e\n\u003cul data-end=\"2137\" data-start=\"2031\"\u003e\n\u003cli data-end=\"2067\" data-start=\"2031\" data-section-id=\"1g0z4ss\"\u003eReplace the 4 images with your own\u003c\/li\u003e\n\u003cli data-end=\"2137\" data-start=\"2068\" data-section-id=\"1ovodf2\"\u003eCorner Radius — Adjust image rounding to match your website style\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp data-section-id=\"1hm8c6y\" data-start=\"2144\" data-end=\"2162\"\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp data-start=\"2164\" data-end=\"2305\"\u003eInstall the Showit page in minutes using Showit’s Share Key. A detailed instruction guide is included to walk you through setup and customization. \u003c\/p\u003e\n\u003cp data-start=\"2164\" data-end=\"2305\"\u003e\u003cmeta charset=\"utf-8\"\u003ePLEASE NOTE: The other canvases shown in the video are an example. They do not have to be used. They're just shown so you can see the effect. \u003c\/p\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45080162172998,"sku":null,"price":9.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-ImageStackPeel.gif?v=1779604626"},{"product_id":"split-collage-scroll","title":"Split Collage Scroll","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv data-is-intersecting=\"true\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection data-turn=\"assistant\" data-scroll-anchor=\"false\" data-testid=\"conversation-turn-8\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" data-turn-id=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv data-turn-start-message=\"true\" class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" data-message-model-slug=\"gpt-5-5\" dir=\"auto\" data-message-id=\"649d8f4d-0d8f-4843-b158-c20b316a120c\" data-message-author-role=\"assistant\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cp data-start=\"47\" data-end=\"369\"\u003e\u003ca rel=\"noopener\" href=\"https:\/\/split-collage-scroll.showitpreview.com\/split-collage-scroll-image-zoom\" target=\"_blank\"\u003eDEMO LINK - IMAGE\u003c\/a\u003e\u003cbr\u003e\u003ca rel=\"noopener\" href=\"https:\/\/split-collage-scroll.showitpreview.com\/split-collage-scroll-text-zoom\" target=\"_blank\"\u003eDEMO LINK - TEXT\u003c\/a\u003e \u003cbr\u003e\u003cbr\u003eScroll Collage Reveal transforms static sections into layered, cinematic moments using scroll-based movement andddd depth! As visitors scroll, collage elements drift left and right at varying speeds while the center content gradually reveals itself through scale and motion, creating a more immersive and editorial-style experience.\u003cbr\u003e\u003cbr\u003e\u003cmeta charset=\"utf-8\"\u003eAnd the best part...To customize, simply replace the images, video and text directly in Showit.\u003c\/p\u003e\n\u003cp data-end=\"958\" data-start=\"942\"\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp data-end=\"1057\" data-start=\"960\"\u003eTwo Design Options - Zoom Image Background and Zoom Text Background\u003cbr\u003eInstall the pages in minutes using Showit’s Share Key. A detailed instruction guide is included.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"z-0 flex min-h-[46px] justify-start\"\u003ePLEASE NOTE: The other canvases shown in the video are included for design purposes and to see the scrolling effect. This canvas should not be used as a header as you will not get the full effect on the scroll. \u003c\/div\u003e\n\u003cdiv class=\"mt-3 w-full empty:hidden\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"pointer-events-none -mt-px h-px translate-y-[calc(var(--scroll-root-safe-area-inset-bottom)-14*var(--spacing))]\" aria-hidden=\"true\"\u003e\u003cbr\u003e\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45086509367366,"sku":null,"price":14.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-Split-Collage-Scroll.gif?v=1779927132"},{"product_id":"deboss-text","title":"Deboss Text","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" dir=\"auto\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cmeta charset=\"utf-8\"\u003eDEMO LINK - \u003ca href=\"https:\/\/deboss-text.showit.site\/\"\u003ehttps:\/\/deboss-text.showit.site\/\u003c\/a\u003e\u003cbr\u003ePlease note this effect is hard to see on small thumbnails. Visit the demo link to get the full effect.\u003cbr\u003e\u003cbr\u003e\u003cmeta charset=\"utf-8\"\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e \u003cmeta charset=\"utf-8\"\u003e \u003cspan style=\"font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 0.875rem;\"\u003e\u003c\/span\u003e\n\u003cp\u003eDeboss Text Effect brings a popular logo design technique onto your Showit website.\u003c\/p\u003e\n\u003cp\u003eYou've seen this effect in luxury branding where text appears pressed directly into the surface rather than sitting on top of it. It's subtle, but it instantly creates more depth, dimension, and visual interest.\u003c\/p\u003e\n\u003cp\u003eNow you can achieve that same look on your Showit website.\u003c\/p\u003e\n\u003cp\u003eInstead of flat typography, your headings and any other text can take on a soft engraved appearance that feels intentional, polished, and beautifully integrated into the design itself.\u003c\/p\u003e\n\u003cp\u003eYou simply add the provided code, apply a CS Selector, and the effect is ready to go.\u003c\/p\u003e\n\u003cp\u003eYOU CAN CUSTOMIZE:\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eMultiple deboss intensity options included\u003c\/li\u003e\n\u003cli\u003eApply the effect to any text element\u003c\/li\u003e\n\u003cli\u003eTwo paper overlay backgrounds (light and dark)\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e**Recommended for use only on darker text colors on either the same dark background or a light background (See examples) \u003c\/p\u003e\n\u003cp\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp\u003eA simple step-by-step PDF guide is included with your purchase.\u003c\/p\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cp\u003eInstalls in minutes using Showit’s Custom Head Code area and CS Selectors.\u003c\/p\u003e\n\u003cp\u003eSimply copy and paste the provided code, apply the included selector to any text element, and the deboss effect is instantly applied.\u003c\/p\u003e\n\u003cp\u003eWorks seamlessly across desktop and mobile with no additional setup required.\u003c\/p\u003e\n\u003cp\u003eA small detail that can completely change how custom your typography feels.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45109412298822,"sku":null,"price":14.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-DebossText.gif?v=1780207254"},{"product_id":"trio-background-scroll","title":"Trio Background Scroll","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" dir=\"auto\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cp\u003eDEMO LINK: \u003ca href=\"https:\/\/trio-background-scroll.showitpreview.com\/\"\u003ehttps:\/\/trio-background-scroll.showitpreview.com\/\u003c\/a\u003e\u003cbr\u003e\u003cbr\u003eTrio Background Scroll creates a cinematic scrolling experience for your Showit website where imagery transitions behind your messaging as visitors move through the page.\u003c\/p\u003e\n\u003cp\u003eRather than breaking your story across multiple sections, this component keeps your message front and center while a sequence of images and videos creates movement, atmosphere, and visual depth around it.\u003c\/p\u003e\n\u003cp\u003eThe result feels immersive, editorial, and intentionally designed — transforming a simple section into a memorable moment that encourages visitors to slow down and engage with your content.\u003c\/p\u003e\n\u003cp\u003ePerfect for anyone looking to add a more elevated visual experience rather than a standard background image.\u003c\/p\u003e\n\u003cp\u003eYOU CAN CUSTOMIZE:\u003c\/p\u003e\n\u003cp\u003e• Replace all images with your own\u003cbr\u003e• Use images, videos, or a combination of both\u003cbr\u003e• Update all text and typography\u003cbr\u003e• Adjust overlay colors and opacity\u003cbr\u003e• Change canvas heights (window height preferred) and spacing\u003cbr\u003e• Customize the design to match your brand\u003c\/p\u003e\n\u003cp\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp\u003eInstall the Showit page in minutes using Showit's Share Key. A detailed instruction guide is included to walk you through setup and customization.\u003c\/p\u003e\n\u003cp\u003eSimply replace the content with your own images, videos, and text, then publish your website.\u003c\/p\u003e\n\u003cp\u003ePlease note: No coding required. This is a multi canvas design.\u003cbr\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45188890001478,"sku":null,"price":10.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-TrioBackgroundScroll.gif?v=1781670748"},{"product_id":"outline-text","title":"Outline Text","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" dir=\"auto\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003eDEMO LINK: \u003ca href=\"https:\/\/outline-text.showitpreview.com\/\"\u003ehttps:\/\/outline-text.showitpreview.com\/\u003c\/a\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e \u003cmeta charset=\"utf-8\"\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eSome website sections make you stop and stare for a second because your brain is trying to figure out what you're looking at.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eThat's exactly what this one does.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eAs images move through the section, they pass between a solid text layer and an outlined text layer, creating the illusion that the typography is changing as the photos move across it.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eThe effect feels layered, artistic, and a little unexpected. The kind of detail that makes a website feel custom without screaming for attention.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eNo complicated setup. Just a clever combination of Showit canvases, layering, sticky positioning, and a little CSS.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eCUSTOMIZE\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003e• Font \/ Text\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Color and Stroke color\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Desktop stroke size\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Mobile stroke size\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Images\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Background colors\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eWHAT'S INCLUDED\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eA step-by-step PDF guide walks you through the setup from start to finish.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eYou'll receive the CSS needed for the outline effect along with instructions for how the layered canvas works inside Showit.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eDesktop and mobile stroke sizing are controlled separately so you can fine tune the look on both screen sizes.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eA QUICK NOTE ABOUT FONTS\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eNot every font loves being outlined.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eSome fonts look incredible with a stroke applied. Others may have outlines that appear within the letter. Not recommended for script fonts either.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eTHE FINE PRINT\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e• Digital product only\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Requires a Showit website\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Images shown in the demo are not included\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Due to the nature of digital products, all sales are final\u003c\/span\u003e\u003c\/p\u003e\n\u003cbr\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45199270871110,"sku":null,"price":16.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCode_Studio_-_Outline_Text.gif?v=1781900037"}],"url":"https:\/\/showcodestudio.com\/collections\/canvas.oembed","provider":"ShowCode Studio","version":"1.0","type":"link"}