{"title":"Sticky Header","description":"\u003cp\u003eSticky Header 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 92 sticky header requests for merchants, including work on Atlantic and Symmetry. Typical turnaround is 2 to 4 business days. Below are 2 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"make-header-sticky-on-scroll-atlantic","title":"Make Header Sticky on Scroll","description":"\u003cp class=\"task-lead\"\u003eAn athletic apparel brand wanted a buy bar that slides down under the header when a customer scrolls past the add-to-cart button.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWhen the customer scrolls past the Add to Bag button, a bar should slide down underneath the fixed header with the product name, price, and a buy button. It should stay there until they scroll back up.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eProduct pages were long with lots of content. Customers scrolling to read about the product lost the buy button.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built a sticky buy bar that appears under the fixed header once the main add-to-cart scrolls out of view. It shows the product, selected variant, price, and a buy button. On mobile it anchors to the bottom of the screen instead.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSticky buy bar that appears on scroll\u003c\/li\u003e\n\u003cli\u003eShows product, variant, price, and buy button\u003c\/li\u003e\n\u003cli\u003eAnchors to the bottom on mobile\u003c\/li\u003e\n\u003cli\u003eDisappears when the main button scrolls back into view\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154833829962,"sku":"TASK-0033","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"sticky-header-on-mobile-symmetry","title":"Sticky Header on Mobile","description":"\u003cp class=\"task-lead\"\u003eA retailer about to launch on a new responsive theme wanted the header to stay fixed on scroll, on desktop and mobile.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI was referred by the theme developer. I'd like the header to stick on scroll on both desktop and mobile. Launch is in a week or two.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA launch-week addition.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe made the header sticky on both desktop and mobile with a slight shrink on scroll so it takes less space, and confirmed it didn't overlap page content.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSticky header on desktop\u003c\/li\u003e\n\u003cli\u003eSticky header on mobile\u003c\/li\u003e\n\u003cli\u003eShrinks slightly on scroll\u003c\/li\u003e\n\u003cli\u003eNo content overlap\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155686289482,"sku":"TASK-0210","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/sticky-header.oembed","provider":"TaskHusky","version":"1.0","type":"link"}