{"title":"Mini Hero \u0026 Image with Text","description":"\u003cp\u003eMini Hero \u0026amp; Image with Text 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 124 mini hero \u0026amp; image with text requests for merchants, including work on Turbo, Launch and Atlantic. Typical turnaround is 2 to 4 business days. Below are 3 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"image-with-text-overlay-section-turbo","title":"Image with Text Overlay Section","description":"\u003cp class=\"task-lead\"\u003eA natural products brand needed a new image-with-text section on product pages to show ingredient icons and short descriptions.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eNew section: image with text icons on the product page. We want to show our key ingredients as small icons with a line of text under each, below the description.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe theme had an image-with-text section for the homepage but nothing suitable for product pages. The brand wanted it per product, editable, and consistent.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built a product page section that displays a row of icons with a short caption under each. The brand assigns which icons appear per product and edits captions in the theme editor.\u003c\/p\u003e\u003cp\u003eThe section reflows to two columns on mobile.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eIcon-with-caption section on product pages\u003c\/li\u003e\n\u003cli\u003ePer-product control over which icons show\u003c\/li\u003e\n\u003cli\u003eCaptions editable in the theme editor\u003c\/li\u003e\n\u003cli\u003eTwo-column layout on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154830717002,"sku":"TASK-0018","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"parallax-scrolling-effect-launch","title":"Parallax Scrolling Effect","description":"\u003cp class=\"task-lead\"\u003eA brand wanted a parallax scrolling effect on the homepage image sections.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eAdd a parallax effect to the image sections on the homepage so the background moves slower than the content as you scroll.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA depth effect the theme didn't offer.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a parallax option to the image-with-text sections, toggleable per section in the theme editor, with the effect disabled on mobile for performance.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eParallax effect on image sections\u003c\/li\u003e\n\u003cli\u003eToggle per section\u003c\/li\u003e\n\u003cli\u003eDisabled on mobile for performance\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155704082506,"sku":"TASK-0396","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"two-column-imageplustext-block-atlantic","title":"Two-Column Image+Text Block","description":"\u003cp class=\"task-lead\"\u003eA brand wanted the image-with-text sections to allow the text on either side and stacked layouts on mobile.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want to change certain homepage sections. The text and image should be switchable left or right, and on mobile the image should stack above the text.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eLayout control the section didn't offer.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a layout setting to the image-with-text section for text left or right, and set the mobile stacking order to image above text.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eText left or right per section\u003c\/li\u003e\n\u003cli\u003eImage above text on mobile\u003c\/li\u003e\n\u003cli\u003eSetting in the theme editor\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155708538954,"sku":"TASK-0417","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/mini-hero-image-with-text.oembed","provider":"TaskHusky","version":"1.0","type":"link"}