How To Show Collection Banner in Full Width In Dawn Theme On Shopify

Enhancing the visual appeal of your Shopify store's collection pages can significantly improve user experience. One effective way to do this is by displaying a full-width banner on your collection pages. Here's how you can achieve this in the Dawn Theme using two different methods.

Method 1: Using CSS Code

Step 1: Access Your Shopify Admin Dashboard

1. Log in to your Shopify account.
2. Navigate to the admin dashboard.

Step 2: Upload Your Banner Image

1. In the admin dashboard, go to the Products section.
2. Click on Collections.
3. Select the collection for which you want to add a banner image.
4. Upload your desired banner image or choose an existing one.

Step 3: Access Theme Customization

1. Go to the Online Store section.
2. Click on Themes.
3. Find your current theme and click on Customize.

Step 4: Edit Code

1. In the theme customization panel, look for the option to edit code.
2. This will open the theme’s code editor.

Step 5: Insert CSS Code

1. Locate the CSS file responsible for the collection banners. This file is often named something like component-collection-hero.css.
2. Scroll to the bottom of this file and paste the following CSS code snippet:

css

Copy code

.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;

    }

}

Step 6: Save Changes

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

Step 7: 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

Step 1: Access Theme Customization

Start by accessing the theme customization panel as described in Method 1.

Step 2: Add Image Banner Section

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

Step 3: Upload Banner Image

1. Upload your desired banner image for the collection.
2. You may also have options to add text or buttons to the banner.

Step 4: 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.

Step 5: Save Changes

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

Step 6: Preview Your Collection Page

• Preview your collection page to ensure that the full-width banner appears as desired.

By following these steps, you can effectively display a full-width banner on your collection pages, enhancing the visual appeal and user experience of your Shopify store.

Conclusion: Implementing a full-width banner on your Shopify store's collection pages can elevate the aesthetic appeal and usability of your online store. Whether you opt for custom CSS coding or utilize built-in customization settings, both methods discussed—CSS customization and theme settings adjustments—offer straightforward ways to achieve a visually striking presentation. By enhancing the visual appeal of your collection pages with a full-width banner, you can create a more engaging browsing experience for your customers, potentially leading to increased conversions and customer satisfaction. Explore these methods today to transform the look and feel of your Shopify store effortlessly.