Creating a visually appealing online store is essential for attracting and retaining customers. One way to enhance your Shopify store’s aesthetic is by making your collection page images full-width. This tutorial will guide you through the process step-by-step, ensuring a professional and engaging look for your collection pages.

Step 1: Accessing Your Theme’s Code Editor

1. Log in to your Shopify admin dashboard.
2. Navigate to Online Store > Themes.
3. Click on the “Actions” button next to your active theme.
4. Select “Edit code”.

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