How can i change the Text color like in this picture in the slideshow ?
thanks in advance
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.
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
where are i have to put these two words ?
Hi @Martin299 ,
Please provide the URL and password of your store so I can assist you further
Regards,
Sweans
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.
- 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
