Creating a visually appealing online store is essential for attracting and retaining customers. If you are wondering How To Make Collection Page Image Full Width In Shopify, this guide will walk you through the process step by step. By making your collection page images full width, you can give your store a modern, professional look that improves user experience and keeps visitors engaged.

Why Use Full-Width Collection Page Images?

Using full-width images on your collection pages creates a strong first impression. It allows your products to shine, enhances branding, and makes your store appear polished. Moreover, full-width designs are more mobile-friendly and ensure consistency across devices.

Step 1: Accessing Your Theme’s Code Editor

1. Log in to your Shopify admin dashboard.
2. Navigate to Online Store > Themes.
3. Click the Actions button next to your active theme.
4. Select Edit Code to open the theme files.

Step 2: Locating the Base.css File

1. In the code editor, search for base.css (or theme.css in some themes).
2. Copy and paste the following code at the bottom of the file:

.collection-hero__image {
   width: 100%;
   max-width: 100%;
   height: auto;
   object-fit: cover;
}

This ensures that your collection page banner or hero image spans the full width of the screen.

Step 3: Save & Preview

• Save your changes and preview the collection page.
• Refresh your storefront to confirm that the image now displays full width.

Additional Tips for Best Results

• Use High-Quality Images: A full-width layout requires sharp images for a professional finish.
• Test Across Devices: Always check the result on both desktop and mobile.
• Maintain Branding: Ensure your image colors and style match your store’s overall theme.

Conclusion

Now you know How To Make Collection Page Image Full Width In Shopify. This small design tweak can significantly improve your store’s appearance, engage visitors, and create a consistent shopping experience. By customizing your theme with a few lines of CSS, you can achieve a modern, stylish look that sets your Shopify store apart.

Step 2: Locating the Base.css File

1. In the code editor, search for the file named “base.css”. Copy the code below and paste it.

.collection-hero--with-image .collection-hero__inner {
  width:100%;
  padding:0;
  max-width:100%;
  flex-direction:column-reverse;
}
.collection-hero--with-image {
  padding:0 !important;
}
.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;
}
}