Change color of the first word of a product title

Store Design
1

Hey there,

Is there a simple way to change the color (and the font-weight) of just the FIRST word of a product title.

Example: SALE Product Title

Two solutions I tested:

  1. I know this can be achieved with :before and product tags, which is a good solution but for SEO, Google Shopping etc. the SALE is required to be in the name.
  2. I also added a div to the product title directly but this causes issues with the cart.

I was thinking of some Array or other filters (https://shopify.dev/api/liquid/filters/array-filters) but I don’t know them well enough to work with it.

Thanks!

Jon

2

@JonECM

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hey there,

thank you! We could just use any Shopify store as this can be applied to any.

Here an example with MVMT: https://www.mvmt.com/mens-watches/chrono/chrono-gunmetal-sandstone/MC01GML.html

So how to make the first one word in the title red (and bold):

CHRONO GUNMETAL SANDSTONE

Thanks!

4

give me your store url

5

Here: https://www.mvmt.com/mens-watches/chrono/chrono-gunmetal-sandstone/MC01GML.html

6

@JonECM

sorry its not shopify store

7

Okay use this please: https://maestrooo-and-weglot.myshopify.com/products/classic-leather-jacket

CLASSIC LEATHER JACKET

8

@JonECM

https://codepen.io/NickMcBurney/pen/wGgqNY

9

That’s amazing, thank you! Is there a non JS solution? Like I first suggested with using SPLIT filters: https://shopify.dev/api/liquid/filters/array-filters

10

@JonECM

please try this code

11

Again, looking for a non JS solution.

12

Hi @JonECM ,

You can add the following code:

{%- assign titleArray = product.title | split: " " -%}
{{ titleArray[0] }}
{{ product.title | remove_first: titleArray[0] }}

Then you have the split text, you can add html as you like. Hope it helps!

Please mark as a solution if you find my answer helpful for you.

13

Perfect! One last question, how would I edit the HTML? Sorry I have no idea about this array stuff. CSS and HTML is fine.

This is what I added now to only apply this to items on sale. And now I want to have the first word (which is SALE) in red and bold.

{%- if product.tags contains 'sale' -%}  
  
  {%- assign titleArray = product.title | split: " " -%} {{ titleArray[0] }} {{ product.title | remove_first: titleArray[0] }}

{%- else -%}
14

Hi @JonECM ,

Please change the code:

{{ titleArray[0] }} {{ product.title | remove_first: titleArray[0] }}

It will work fine.

Hope it helps!

15

Not working :confused:

16

You can add the following code: {%- assign titleArray = product.title | split: " " -%} {{ titleArray[0] }} {{ product.title | remove_first: titleArray[0] }} Then you have the split text, you can add html as you like. Hope it helps!