Note: This article is not
supported for Responsive 6.0+ and Mobilia 5.0+. For updated instructions on how to display a collection banner for Responsive versions 6.0+ and Mobilia versions 5.0+, check out this article.
Advanced Customization: Please note that this tutorial is considered an advanced customization. While Out of the Sandbox support may be able to help with basic issues with this code, please note that we may need to refer you to a third party developer for more advanced issues, customization or functionality.
Full-Width Banners for Responsive and Mobilia Collections
With a few quick steps, this modification will show your collections' featured images as full-width banners!
To make this change we'll need to modify the collection.liquid template. To get there we can go to 'Sales Channels' > 'Online Store' > 'Themes' > 'Actions' > 'Edit Code' > collection.liquid.
At the very top of that file, the code from this file can be added in:
After a quick save we're finished! Now any collections that you have a featured image for will have a full-width banner :)
Note: If you'd prefer the image to stay the same width as the content area, lines 2 and 17
("</div>" and "<div class="container main content">")
can be removed