How to change color of subheading and heading on slideshow impulse theme?

Store Design
, ,

Topic summary

A user needs to change the slideshow heading and subheading colors from white to black on desktop/laptop devices only, while keeping them white on mobile in the Impulse theme.

Solution Provided:
Multiple respondents offered CSS code to add to the theme’s base.css file:

  • Target the .hero__text-shadow .hero__top-subtitle and .hero__text-shadow .hero__title classes
  • Use @media queries to apply changes only on screens wider than 749px or 768px
  • Add color: black !important; to override existing styles

Steps:

  1. Navigate to Online Store > Themes > Actions > Edit Code
  2. Open Assets > base.css
  3. Paste the provided CSS at the bottom of the file
  4. Save changes

Status: Resolved - the original poster confirmed the solution works successfully.

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

Hello so i use impulse theme and in my slideshow i need to change the color of subheading and heading on slideshow from white to black only for desktop and laptop devices,in mobile its white which its good.

20250513_113231.jpg
20250513_113231.jpg4000Ă—3000 1.64 MB

1 Like
2

Hello @VisarK ,

Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?

3

Hi @VisarK

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:
@media only screen and (min-width: 749px){
.hero__text-shadow .hero__top-subtitle, .hero__text-shadow .hero__title {
    color: black !important;
}
}

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

1 Like
4

Hello @ZestardTech yes its https://pawshubs.com/

5

It works,thanks a lot @Made4uo-Ribe

1 Like
6

Hello @VisarK ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (min-width: 768px) { 
  .hero__text-shadow .hero__title,.hero__text-shadow .hero__top-subtitle {
    color: #000000 !important;
  }
}

ZestardTech_0-1747142287979.png
ZestardTech_0-1747142287979.png1739Ă—765 163 KB

Let me know if you need further assistance!

1 Like