Re: How to change the text design in the slideshow ?

How to change the text design in the slideshow ?

Martin299
Excursionist
30 1 8

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

Replies 5 (5)

Sweans
Shopify Partner
424 86 125

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:

 

<div class="slideshow-text">
    From Our <span class="highlight">Hive</span> to Your <span class="highlight">Kitchen</span>
</div>

 

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

Martin299
Excursionist
30 1 8

where are i have to put these two words ?

Sweans
Shopify Partner
424 86 125

Hi @Martin299 ,

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

Regards,
Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

Martin299
Excursionist
30 1 8
Sweans
Shopify Partner
424 86 125

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:

 

<h2
    class="banner__heading inline-richtext {{ block.settings.heading_size }}"
    {{ block.shopify_attributes }}
>
    {{ block.settings.heading }}
</h2>

 

7.Replace it with the code below:

 

<div class="slideshow-text">
    <h2>
        Goûtez Le Vrai <span class="highlight">Miel et</span> Découvrez Avec Nous Les Secrets <span class="highlight">Des Abeilles</span>
    </h2>
</div>

 

*You can adjust the <span> tags according to your design.

8. 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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com