How To Show Collection Banner in Full Width?

In this tutorial, we’re diving into enhancing your Shopify store’s layout by adding a sleek full-width collection banner. Ever noticed how standard collection banners in Shopify appear a bit cramped? We’re changing that today. Join us as we walk you through two methods: one using CSS code, and the other via customized settings.

Method 1: Using CSS Code

Access Your Shopify Admin Dashboard: Log in to your Shopify account and navigate to the admin dashboard.

Upload Your Banner Image: In the admin dashboard, go to the “Products” section and then click on “Collections.” Select the collection for which you want to add a banner image. Upload your desired banner image or choose an existing one.

Access Theme Customization: Next, go to the “Online Store” section and click on “Themes.” Find your current theme and click on “Customize.”

Edit Code: In the theme customization panel, look for the option to edit code. This will open the theme’s code editor.

Insert CSS Code: Locate the CSS file responsible for the collection banners. This file is often named something like “component-collection-hero.css.” Scroll to the bottom of this file and paste the provided CSS code snippet. This code will modify the banner’s width to make it full-width.

Save Changes: After pasting the CSS code, save your changes by clicking on the appropriate button in the code editor.

Preview Your Collection Page: Once the changes are saved, preview your collection page to see the full-width banner in action.

Method 2: Using Customize Settings

Access Theme Customization: Start by accessing the theme customization panel as described in Method 1.

Add Image Banner Section: In the customization panel, locate the option to add sections to your homepage or collection pages. Click on “Add Section” and choose “Image Banner.”

Upload Banner Image: Upload your desired banner image for the collection. You may also have options to add text or buttons to the banner.

Customize Settings: Configure the settings for the image banner section according to your preferences. Some themes may offer options to adjust the banner’s size, alignment, and other properties.

Save Changes: Once you’re satisfied with the settings, save your changes in the customization panel.

Preview Your Collection Page: Preview your collection page to ensure that the full-width banner appears as desired.

Add the following code on bottom of component-collection-hero.css file:

.collection-hero--with-image .collection-hero__inner {
    width: 100%;
    padding: 0;
    max-width: 100%;
}
.collection-hero--with-image .collection-hero__text-wrapper {
    display: none
}

.collection-hero__image-container {
    margin-left: 0 !important;
}
.collection-hero__image-container img {
    top: 50% !important;
    transform: translateY(-50%) !important;
}
@media screen and (min-width: 750px) {
    .collection-hero__image-container {
        min-height: 37rem;
    }
  .collection-hero {
    padding: 0 !important;
}
}