How to Edit Your base.css to Target a Specific Image Banner on Shopify

By Tony Ng.
February 26th, 2025

How to Edit Your base.css to Target a Specific Image Banner on Shopify

Understanding the Problem

In the world of eCommerce, customizing your Shopify store's appearance is crucial for creating a unique brand identity. However, when making CSS adjustments, it's common to encounter issues where changes apply globally rather than to a specific element. This guide will help you address the problem of CSS code affecting all image banners instead of just one.

Common Causes

Global Selectors: Using generic CSS selectors can inadvertently apply styles across multiple elements.
Lack of Specificity: Insufficiently specific CSS selectors can lead to broader application than intended.
Theme Structure: Understanding the theme's HTML structure is vital to apply styles accurately.

How to Target a Specific Image Banner

To solve this issue, you need to adjust your CSS to target only the desired image banner on your Shopify home page.

Step-by-Step Guide

Access Your Theme Code
- Navigate to your Shopify admin panel.
- Go to Online Store > Themes.
- Click on Actions > Edit code.
Identify the Specific Section
- Open your base.css or theme.css file.
- Locate the HTML section ID for the specific image banner you want to target. This is often found in the sections directory under image-banner.liquid or similar.

Modify Your CSS

Use a unique selector to target the specific banner. For example:

@media only screen and (min-width: 150px) {
  section#shopify-section-template--24118061367629__image_banner_eBqTTG .banner__content:before {
    content: "";
    background-image: url('https://cdn.shopify.com/s/files/1/0868/2782/7533/files/GINCENT_FLAT_BOTTLES_SET_SERIES_3_ROW_REVERSE_ONLINE.png?v=1739865227');
    display: block;
    position: left;
    width: 85%;
    max-width: 80rem;
    height: auto;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    top: 50%;
    margin: auto%;
    opacity: 100;
  }

  section#shopify-section-template--24118061367629__image_banner_eBqTTG .banner__content {
    position: relative;
  }
}

Save and Test
- Save your changes and refresh your home page to ensure the CSS only affects the intended banner.

Tips for Avoiding Similar Issues

Use Specific Selectors: Always use the most specific selector possible to target elements precisely.
Inspect Element: Utilize browser developer tools to inspect and identify unique IDs or classes.
Test Changes: After making changes, test on multiple devices to ensure consistency.