{"title":"Hero Banner \u0026 Slideshow","description":"\u003cp\u003eHero Banner \u0026amp; Slideshow work for Shopify and Shopify Plus stores, handled as a flat-rate task by an in-house team that has worked on this since 2016.\u003c\/p\u003e\u003cp\u003eWe have completed 937 hero banner \u0026amp; slideshow requests for merchants, including work on Retina, Impulse, Brooklyn and Prestige. Below are 12 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"modify-existing-slideshow-behavior-and-tweak-retina","title":"Modify Existing Slideshow Behavior and Tweak","description":"\u003cp class=\"task-lead\"\u003eA gift brand's homepage slideshow worked, but not the way they wanted. Timing, transitions, and how the slides behaved on click all needed adjusting.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eYou've done customizations for us before and they worked great, so here I am again. The homepage slideshow needs a few changes to how it behaves. Everything's based on how it looks on our sister site.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe slideshow was the first thing visitors saw and it wasn't matching the brand's other properties. The changes were small individually but added up to a different feel.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe went through the brand's reference site side by side with their store and matched the slideshow behavior: transition speed, pause on hover, click behavior, and how captions animate in.\u003c\/p\u003e\u003cp\u003eAll of it stayed editable in the theme editor so the brand can adjust timing without coming back to us.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSlideshow timing and transitions matched to the reference\u003c\/li\u003e\n\u003cli\u003ePause-on-hover and click behavior adjusted\u003c\/li\u003e\n\u003cli\u003eCaption animation aligned with the brand's other properties\u003c\/li\u003e\n\u003cli\u003eAll settings remain editable in the theme editor\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154804633674,"sku":"TASK-0006","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"mobile-specific-slideshow-and-mobile-banner-impulse","title":"Mobile-Specific Slideshow and Mobile Banner","description":"\u003cp class=\"task-lead\"\u003eA jewelry brand's homepage slideshow looked fine on desktop but fell apart on tablets and phones. Text overflowed, images cropped badly.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe slideshow on our landing page doesn't respond well on a tablet. The text in the slides overflows and the images crop in the wrong place. It looks nothing like the desktop version.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe theme's slideshow wasn't handling intermediate screen sizes. The brand wanted a mobile-specific version they could control separately from desktop.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added separate mobile images and text positioning for the slideshow so the brand can upload a portrait crop for phones and a landscape crop for desktop. Text repositions and resizes per breakpoint.\u003c\/p\u003e\u003cp\u003eEverything is controlled from the theme editor, one slide at a time.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSeparate mobile and desktop images per slide\u003c\/li\u003e\n\u003cli\u003eText position and size controlled per breakpoint\u003c\/li\u003e\n\u003cli\u003eTablet layout fixed to stop overflow\u003c\/li\u003e\n\u003cli\u003eAll controls in the theme editor\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154829537354,"sku":"TASK-0013","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"full-width-and-sizing-of-banner-brooklyn","title":"Full Width and Sizing of Banner","description":"\u003cp class=\"task-lead\"\u003eA skincare brand's video hero banner had limits they'd run into: it wouldn't go full-screen and the sizing was inconsistent across devices.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI'm using the background video block as a hero at the top of the page but I've hit limitations. It's not coded to be full-screen and the sizing changes depending on the device.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe theme's built-in video block was designed as a content section, not a hero. The brand wanted it to fill the viewport on every screen.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe reworked the hero to fill the full viewport on desktop and tablet, with a properly sized fallback on phones so it doesn't chew through data. The brand controls the video, the poster image, and the overlay text from the theme editor.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eFull-viewport video hero on desktop and tablet\u003c\/li\u003e\n\u003cli\u003eSized fallback for phones\u003c\/li\u003e\n\u003cli\u003eOverlay text and poster controlled in the theme editor\u003c\/li\u003e\n\u003cli\u003eConsistent sizing across screen sizes\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154830094410,"sku":"TASK-0015","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"video-embed-in-slideshow-and-hero-prestige","title":"Video Embed in Slideshow and Hero","description":"\u003cp class=\"task-lead\"\u003eA lifestyle brand wanted a video banner on the homepage with a transparent menu over it that solidified as the customer scrolled.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eTransparent main menu over the video banner. More transparent at the top, then it should become solid when scrolling down. And the video should loop without controls.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe brand wanted the hero to feel cinematic. A solid header over the video was killing it.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built the video hero with a header that starts transparent and transitions to solid on scroll. The video loops muted with no controls. On mobile the header starts solid for readability and the video swaps to a poster image.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eLooping muted video hero\u003c\/li\u003e\n\u003cli\u003eTransparent header that solidifies on scroll\u003c\/li\u003e\n\u003cli\u003eSolid header and poster image on mobile\u003c\/li\u003e\n\u003cli\u003eVideo and overlay controlled in the theme editor\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155511472202,"sku":"TASK-0069","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"text-and-caption-overlay-on-slideshow-atlantic","title":"Text and Caption Overlay on Slideshow","description":"\u003cp class=\"task-lead\"\u003eA handmade goods brand's slideshow text was overflowing on smaller screens and needed repositioning and resizing per device.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eSlideshow text overflows on tablet. On mobile it covers the product. We need the text to reposition and resize so it works everywhere.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eOne text position for all screen sizes wasn't working.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe gave the slideshow text independent positioning and sizing per screen size, so the brand can set where the text sits and how large it is for desktop, tablet, and phone separately.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eIndependent text position per screen size\u003c\/li\u003e\n\u003cli\u003eIndependent text size per screen size\u003c\/li\u003e\n\u003cli\u003eControls in the theme editor per slide\u003c\/li\u003e\n\u003cli\u003eOverflow fixed on tablet and mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155511930954,"sku":"TASK-0081","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"slideshow-pagination-and-dots-and-arrows-testament","title":"Slideshow Pagination and Dots and Arrows","description":"\u003cp class=\"task-lead\"\u003eA lifestyle brand wanted their slideshow arrows and dots restyled to sit inside the image and match their brand.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe slideshow arrows and dots sit outside the image and look generic. We want them inside, styled to match our brand, and hidden until hover on desktop.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eDefault slideshow controls were clashing with the brand's aesthetic.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe moved the arrows and dots inside the slideshow, restyled them to the brand's colors and shape, and set them to appear on hover on desktop while staying visible on mobile for touch.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eArrows and dots moved inside the slideshow\u003c\/li\u003e\n\u003cli\u003eStyled to brand colors and shape\u003c\/li\u003e\n\u003cli\u003eHidden until hover on desktop\u003c\/li\u003e\n\u003cli\u003eAlways visible on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155512127562,"sku":"TASK-0087","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"make-slideshow-clickable-and-hyperlinks-impulse","title":"Make Slideshow Clickable and Hyperlinks","description":"\u003cp class=\"task-lead\"\u003eA design brand wanted every homepage slide to be clickable, linking to a collection or product, with the link editable per slide.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want the whole slide to be clickable, not just a button. Each slide should link somewhere different and I should be able to change the link myself.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eCustomers were clicking on slides and nothing happened.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe made each slide fully clickable with a link the brand sets per slide in the theme editor. Slides without a link stay static.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eFull-slide click area\u003c\/li\u003e\n\u003cli\u003eLink set per slide in the theme editor\u003c\/li\u003e\n\u003cli\u003eSlides without a link remain static\u003c\/li\u003e\n\u003cli\u003eWorks on desktop and mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155678687306,"sku":"TASK-0141","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"add-and-build-homepage-slideshow-prestige","title":"Add and Build Homepage Slideshow","description":"\u003cp class=\"task-lead\"\u003eA brand wanted a homepage slideshow with a link on each slide, so clicking a slide went somewhere.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eIs it possible to add a slideshow on the main landing page with a URL linked to it, so when you click a slide it goes to that collection?\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA simple ask the theme didn't quite cover.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a homepage slideshow where each slide has an image, optional text, and a link, all set from the theme editor. The whole slide is clickable.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eHomepage slideshow\u003c\/li\u003e\n\u003cli\u003eLink per slide\u003c\/li\u003e\n\u003cli\u003eOptional text per slide\u003c\/li\u003e\n\u003cli\u003eManaged in the theme editor\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155688058954,"sku":"TASK-0234","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"image-blocks-and-grid-below-slider-mobilia","title":"Image Blocks and Grid Below Slider","description":"\u003cp class=\"task-lead\"\u003eA retailer wanted six clickable image blocks under the homepage banner linking to their main collections.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eInsert six images underneath the main homepage banner. Each should link to a collection. Three square and two rectangular in the layout I've attached.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA visual collection navigator beneath the hero.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built an image grid section beneath the banner with the retailer's mixed layout, each block linking to a collection, all editable from the theme editor. On mobile the blocks stack in a two-column grid.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eImage grid section under the banner\u003c\/li\u003e\n\u003cli\u003eMixed square and rectangular layout\u003c\/li\u003e\n\u003cli\u003eEach block links to a collection\u003c\/li\u003e\n\u003cli\u003eEditable in the theme editor\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155691335754,"sku":"TASK-0249","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"slider-speed-and-autoplay-and-transitions-retina","title":"Slider Speed and Autoplay and Transitions","description":"\u003cp class=\"task-lead\"\u003eA brand updated their theme and their homepage videos stopped autoplaying. They wanted them playing again without sound.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe updated the theme and now our homepage videos don't autoplay. We want them to autoplay muted like before, and not show controls.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eAn update that reset the video behavior.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe restored muted autoplay on the homepage videos with controls hidden and looping enabled, and confirmed the behavior on iOS where autoplay rules are strictest.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eMuted autoplay restored\u003c\/li\u003e\n\u003cli\u003eControls hidden\u003c\/li\u003e\n\u003cli\u003eLooping enabled\u003c\/li\u003e\n\u003cli\u003eVerified on iOS and Android\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155694121034,"sku":"TASK-0275","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"animated-gif-in-slideshow-icon","title":"Animated GIF in Slideshow","description":"\u003cp class=\"task-lead\"\u003eA brand wanted the opening homepage slide to be an animated GIF while the rest stayed as still images.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eMy client wants the opening slide to be an animated GIF but the following slides to be JPGs. The theme keeps converting the GIF to a still frame.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA theme that flattened animation.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe made the slideshow handle animated GIFs without flattening them, so the first slide animates while the other slides remain stills, and confirmed it stayed lightweight.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eAnimated GIF supported in the slideshow\u003c\/li\u003e\n\u003cli\u003eStill images unaffected\u003c\/li\u003e\n\u003cli\u003eLoad time checked\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155695333450,"sku":"TASK-0302","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"swipe-and-touch-gestures-on-slider-brooklyn","title":"Swipe and Touch Gestures on Slider","description":"\u003cp class=\"task-lead\"\u003eA brand wanted a horizontally scrollable card carousel on the homepage showing six cards on desktop with swipe on mobile.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eCreate a horizontally scrollable carousel for the homepage that displays six cards at a time on desktop, swipeable on mobile, with consistent card sizes.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA gallery format the theme didn't offer.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built a horizontal carousel section with fixed card sizing, arrows on desktop, swipe and momentum on mobile, and cards managed from the theme editor.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eHorizontal card carousel on the homepage\u003c\/li\u003e\n\u003cli\u003eSix cards visible on desktop\u003c\/li\u003e\n\u003cli\u003eSwipe on mobile\u003c\/li\u003e\n\u003cli\u003eCards managed in the theme editor\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155695366218,"sku":"TASK-0303","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/hero-banner-slideshow.oembed","provider":"TaskHusky","version":"1.0","type":"link"}