Having 2 different styles in a header

Online Store and Theme Development
1

Short description of issue

Having 2 different styles in a header

Reproduction steps

!!

Additional info

Hey everyone, trying to do the styling in the demo here, (2 different styles/colors in the same header)

What I tried

The only way I can think of is using richtext as a setting for the title, then targeting the <em> inside the tag with my preferred styles

The problem

richtext can only be <p> or <ul> tags, both are block elements.
For crawlability and SEO reasons, we can only nest inline elements in headers
Having

tags nested in <h1> <h2> is not acceptable, messes up SEO and crawlers may skip the header entirely

The question

Has anyone came to a solution to this before that gets the style done without sacrificing SEO ?

What type of topic is this

General discussion

Upload screenshot(s) of issue

s2.jpg
s2.jpg1329×443 89.4 KB

s1.jpg
s1.jpg1321×501 101 KB

2

Hey @mofahmi,

This is pretty advanced but you can update the following snippet to achieve multiple colors:

{% liquid
  assign title = section.settings.title
  assign accent_title = section.settings.accent_title

  assign accent_chunk_list = accent_title | replace: ' ', '¬' | split: ' '
  for accent_chunk in accent_chunk_list
    assign original_chunk = accent_chunk | replace: '¬', ' '
    assign modified_chunk = original_chunk | prepend: '<#>' | append: '</#>'
    assign title = title | replace: original_chunk, modified_chunk
  endfor

  assign title = title | replace: '<#>', '<span>' | replace: '</#>', '</span>'
%}

<h2 class="title" style="--accent-color: {{ accent_color }};">{{ title }}</h2>

{
  "type": "text",
  "id": "title",
  "label": "Title"
},
{
  "type": "text",
  "id": "accent_title",
  "label": "Accent title",
  "info": "Every instance of this text will be recolored in the base title, leave empty for no changes"
},
{
  "type": "color",
  "id": "accent_color",
  "label": "Accent color"
}

.title {
  color: var(--content-color);

  & span {
    color: var(--accent-color);
  }
}

With that, you should have the gist of it, here are a few examples:

title accent_title Output
An interesting title - (empty) <h2 …>An interesting title</h2>
An interesting title interesting <h2 …>An <span>interesting</span> title</h2>
An interesting title i <h2 …>An <span>i</span>nterest<span>i</span>ng t<span>i</span>tle</h2>

Hope it helps !