{"title":"Sold Out \u0026 Out of Stock UX","description":"\u003cp\u003eSold Out \u0026amp; Out of Stock UX 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 65 sold out \u0026amp; out of stock ux requests for merchants, including work on Atlantic, Impulse, Mobilia and Prestige. Below are 4 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"hide-sold-out-variants-and-products-atlantic","title":"Hide Sold Out Variants and Products","description":"\u003cp class=\"task-lead\"\u003eA gallery selling one-of-a-kind pieces wanted a toggle to show or hide sold items on collection pages.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eAlmost all of our items are one-of-a-kind. We keep sold products online as a record. We want a filter on collection pages so visitors can show or hide sold items.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eSold pieces were part of the gallery's story but cluttered browsing for buyers.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a show\/hide sold toggle to collection pages that hides sold pieces by default with one click to reveal them. Sold pieces stay indexed and accessible by direct link.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eShow\/hide sold toggle on collection pages\u003c\/li\u003e\n\u003cli\u003eSold pieces hidden by default\u003c\/li\u003e\n\u003cli\u003eSold pieces remain accessible by direct link\u003c\/li\u003e\n\u003cli\u003eToggle state remembered during the session\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155561082954,"sku":"TASK-0113","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"sold-out-badge-and-label-impulse","title":"Sold Out Badge and Label","description":"\u003cp class=\"task-lead\"\u003eA retailer wanted the sold out label moved from under the product title to over the product image.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want the sold out label over the image instead of below the product title. It's easy to miss where it is now.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA label that customers weren't seeing.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe moved the sold out label onto the product image as an overlay badge on collection cards and product pages, with the badge style editable in the theme editor.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSold out badge over the product image\u003c\/li\u003e\n\u003cli\u003eConsistent on cards and product pages\u003c\/li\u003e\n\u003cli\u003eBadge style editable in the theme editor\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155694612554,"sku":"TASK-0285","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"sold-out-notify-me-form-mobilia","title":"Sold Out Notify-Me Form","description":"\u003cp class=\"task-lead\"\u003eA brand's notify-me button appeared as a plain link under the buy buttons and they wanted it styled as a proper button.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe Notify Me When Available shows up as a plain link below the dynamic checkout button. It looks broken. Style it as a button and change the sold out color.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA feature that looked like an afterthought.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe styled the notify button to match the theme's buttons, positioned it where add to cart normally sits, and adjusted the sold out label color.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eNotify button styled to match the theme\u003c\/li\u003e\n\u003cli\u003ePositioned in place of add to cart\u003c\/li\u003e\n\u003cli\u003eSold out label color adjusted\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155723415626,"sku":"TASK-0473","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"move-sold-out-to-end-of-collection-prestige","title":"Move Sold Out to End of Collection","description":"\u003cp class=\"task-lead\"\u003eA brand wanted sold out products pushed to the end of collection pages while keeping the rest of the sort intact.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003ePush sold out products to the bottom of collection pages. Keep the default sort for everything else.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eSold out items cluttering the top of collections.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe adjusted collection sorting so in-stock products keep their order and sold out products move to the end, on every collection.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSold out products moved to the end\u003c\/li\u003e\n\u003cli\u003eIn-stock order preserved\u003c\/li\u003e\n\u003cli\u003eApplies to all collections\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155723448394,"sku":"TASK-0474","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/sold-out-out-of-stock-ux.oembed","provider":"TaskHusky","version":"1.0","type":"link"}