How to change the text design in the slideshow ?

Store Design

Topic summary

Goal: Change the slideshow/banner text so specific words are a different color (highlighted), matching a provided screenshot.

What was proposed:

  • Wrap the words to highlight in a span with a “highlight” class inside the slideshow heading, and set the color via CSS (#f8981d). Default text remains white via a parent class (e.g., .slideshow-text).
  • Explanation: Liquid (.liquid) is Shopify’s templating language for theme files; CSS controls the visual style.

Follow-up and implementation steps (latest):

  • In Shopify admin: Online Store > Themes > Customize > Actions > Edit code.
  • Open image-banner.liquid (location as advised) and replace the heading output {{ block.settings.heading }} with custom HTML that includes span class=“highlight” around the words to color (example text: “GoĂ»tez Le Vrai Miel … Secrets Des Abeilles”).
  • Add CSS in base.css: .slideshow-text .highlight { color: #f8981d; } Adjust as needed.

Status and next steps:

  • The requester asked where to place the words; the helper requested the store URL/password. The URL was provided; password not shown.
  • Concrete code and file-change steps were provided. No confirmation of success yet; discussion remains open.

Note: The screenshot is central to understanding the desired styling.

Summarized with AI on December 23. AI used: gpt-5.
1

How can i change the Text color like in this picture in the slideshow ?
thanks in advance

1312.PNG
1312.PNG1681Ă—700 271 KB

1 Like
2

Hi @Martin299 ,

To achieve the text styling as shown in the image for your slideshow, where specific words are highlighted with a different color, you can use a combination of HTML and CSS.

For Example:

html:


    From Our Hive to Your Kitchen

css:

.slideshow-text {
    font-size: 2em; /* Adjust size as needed */
    color: white; /* Default text color */
}

.slideshow-text .highlight {
    color: #f8981d; /* Highlight color, similar to the one in the image */
}

Refer to this code and modify the text as needed to match the image.

I hope this helps! If not, please provide url and password of website.

If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

3

where are i have to put these two words ?

4

Hi @Martin299 ,

Please provide the URL and password of your store so I can assist you further

Regards,
Sweans

5

https://e018c6-82.myshopify.com/

6

Hi @Martin299 ,

Follow these steps:

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find your theme and click on Customize.

4.Click Actions > Edit code.

5.In the left sidebar, under the layout directory, click on image-banner.liquid.

6.Search for the following code:

## 
    {{ block.settings.heading }}

7.Replace it with the code below:


    ## 
        Goûtez Le Vrai Miel et Découvrez Avec Nous Les Secrets Des Abeilles

*You can adjust the tags according to your design.

  1. Add the following code to your base.css file:
.slideshow-text .highlight {
    color: #f8981d; /* Highlight color, similar to the one in the image */
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans