Add solid black container behind text in Impulse theme

Store Design
, ,

Topic summary

A user wanted to add a solid black background container behind text and buttons in the ‘Hero (optional slideshow)’ section of Shopify’s Impulse theme.

Two solutions were provided:

Solution 1 (Made4uo-Ribe):

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add CSS targeting .hero__text-shadow with black border and padding

Solution 2 (namphan):

  • Go to Customize → Theme settings → Custom CSS
  • Add CSS targeting .hero__text-shadow with black background and padding using !important

The user confirmed the solution worked as intended. Both approaches use custom CSS to style the hero text container, with the main difference being implementation location (theme files vs. theme customizer) and styling method (border vs. background).

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I would like to add a solid black container behind the text and button on the ‘Hero (optional slideshow)’ in the Impulse theme.

So a black box behind ‘Christmas Collection / We’ve got your / Shop now’

jpat_2-1744187547873.png
jpat_2-1744187547873.png1788×664 325 KB

Thanks in advance for your help!

2 Likes
2

Hey @jpat

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi @jpat

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.hero__text-shadow {
    border: 1px solid black;
    padding: 1rem;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
4

Hi @jpat ,

Please go to Customize > Theme settings > Custom CSS and add code:

.hero__text-shadow {
    background: #000000 !important;
    padding: 2rem;
}
1 Like
5

Thank you, this is exactly what I was looking for.

6

Hi @jpat ,

You’re welcome and happy to help :blush: