How can I change a specific word's color in a text?

Store Design
1

how.PNG
how.PNG850Ă—245 15.3 KB

I would like to color my texts like this. And any idea on how to higlight it as well would be great!

2

Could you share your website url? @DylanRyan

3

https://e857dc-61.myshopify.com/

4

Hi @DylanRyan

The screenshot you provided, which page is it from? Can you send the URL?

5

Hello! @DylanRyan Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your custom file
  5. Add the following code.
# {{ section.settings.title }}
  
{% schema %}
  {
    "name": "Custom heading",
    "settings": [
    {
        "type": "inline_richtext",
        "id": "title",
        "label": "Heading"
      }
    ]
  }
{% endschema %}

Add this CSS to your CSS file:

.hw-title {
    color: #000;
}
.hw-title strong {
    color: #0A90DD;
}

Go to your store’s theme editor, add text, and bold as much text as you want. See an example.

Rishihuptech_0-1718085411563.png
Rishihuptech_0-1718085411563.png280Ă—184 6.95 KB

Output:

Rishihuptech_1-1718089938417.png
Rishihuptech_1-1718089938417.png627Ă—356 26.1 KB

6

https://thepupjet.com/products/jet

7

Hi @DylanRyan

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
section#sf-custom-template--16213130969343__165667138816882ef8 .section__heading mark {
    background-color: #67b634!important;
    color: #fff;
}

ZestardTech_0-1718093867711.png
ZestardTech_0-1718093867711.png1415Ă—220 15 KB

8

I have a slick-theme.css and it didn’t work. I managed to do it with inspect but don’t know how to put it in actual codes

Cap1ture.PNG
Cap1ture.PNG2404Ă—1252 477 KB

C2apture.PNG
C2apture.PNG2442Ă—1163 391 KB

9

BY the custom file did you mean custom-liquid.liquid? I tried it there and it gave an error. I managed to d oit with inspect but don’t know how to implement in actual codes

Cap1ture.PNG
Cap1ture.PNG2404Ă—1252 477 KB

C2apture.PNG
C2apture.PNG2442Ă—1163 391 KB

10

@DylanRyan Please send me the entire code of the file in which you want to add this code.

11

Hello @DylanRyan ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Layout > theme.liquid and paste this at the bottom of the file:

ZestardTech_0-1718097029014.png
ZestardTech_0-1718097029014.png1349Ă—445 40.5 KB

12

I tried adding it as a custom liquid it worked but don’t know how to to adjust the content alignment for the text and on dekstop it looks just like in mobile as a straight line.

13

tried adding it as a custom liquid and it worked but don’t know how to to adjust the content alignment for the text and on dekstop it looks just like in mobile as a straight line. You can see on my website

14

I learned how to align the text it works now I’ll take care of it from now on thanks for the help