How to add the TM symbol in header and make it smaller than the rest of the text?

[drfarahsutton]

How do I add the TM symbol in header and make it smaller than the rest of the text? I click option 2 and the TM comes up but it is huge and an eyesore. Is there a way to make the TM smaller while keeping the rest of the header large? Thank you!

[Mike-Consentik]

Hi @drfarahsutton ,

This is Mike from Omega

Could you leave your store URL and position of TM symbol then I can check for you?

[drfarahsutton]

TheMolecules.com

I would like the TM to go after the heading “Self-Care Simplified”

Right now I have incorporated the Heading into the image but I would like to have it back as part of the text if I can figure out how to make the TM look normal. 

[Mike-Consentik]

Could you add the Heading with TM again then I can check the class and I can give you CSS code?

[drfarahsutton]

Updated with the Heading "Self-Care Simplified" with the TM for you to review.

[BSS-Commerce]

Hi @drfarahsutton 

We're happy to support you. Can you re-add the TM logo on the website for us to check for you?

Also, please send us screenshots of the part you want to edit, and the desired result with the link. That makes it easier for us to check it for you. Thank you!

[drfarahsutton]

I added the TM to the heading "Self-Care Simplified" 

I would like the TM to be smaller like in the company name image.

[BSS-Commerce]

Hi @drfarahsutton 

- Is this the result you want?

- To get such results, please follow these steps:

+ Step1: Please go to Online store => Themes => Edit code, find the heading "SELF-CARE SIMPLIFIED™" that you just added.

+ Step2: Edit the code to display the heading "SELF-CARE SIMPLIFIED™" from:

<h2
    class="image-hero__text-container-heading ff-heading fs-heading-display-3 section-blocks__heading"
    style="--delay-offset-multiplier: 3;"
>
    self-care simplified ™
</h2>

to:

<h2
    class="image-hero__text-container-heading ff-heading fs-heading-display-3 section-blocks__heading"
    style="--delay-offset-multiplier: 3; display: flex;"
>
    <span style="width: 350px">self-care simplified</span>
    <span class="bss-fix" style="font-size: 24px">™</span>
</h2>

Here we have wrapped the words "self-care simplified" and "™" with 2 span tags for CSS inline style for them.

+ Step 3: Save the file and check in the browser.

We hope that this can help you.

[drfarahsutton]

Where would I find the code with the heading "Self-Care Simplified"? I see different folders but don't know here to look.

The TM needs to be at the end of 'simplified'

[BSS-Commerce]

Hi @drfarahsutton 

Because we don't have the source code for your theme (maybe your theme is a paid theme), we also don't know for sure where the "Self-Care Simplified" heading code is located.

To know for sure you can find it by downloading the full source code (go to Sale channels => Online store => Themes => Download theme file)

Then, you open the source code with Visual Studio Code software (download link: https://code.visualstudio.com/download). Next, go to the search tab, and paste the heading: "self-care simplified™". Then click on the file name containing the heading and return to Shopify admin to edit.

We hope that this can help you.

[drfarahsutton]

This is the existing code.

[drfarahsutton]

I tried updating and it says CSS error

[BSS-Commerce]

Hi @drfarahsutton 

We just checked on your site. The text "TM" is already wrapped by the <sup> tag and you have the CSS for that tag. To adjust the appropriate font size (big or small) you can increase the font size:

Please let us know if you need further help.

[GM091710]

Hi! I have a similar question - the name of one of my products is Trademarked (TM not yet circle R) and I am trying to add the small TM symbol next to the product name in the drop down menu (pictures attached). Do you know how the CSS code should be altered for this?

The code when I click "inspect" is :

<a id="HeaderMenu-shop-the-beach-board" href="/collections/the-beach-board" class="header__menu-item list-menu__item link link--text focus-inset caption-large list-menu__item--active" aria-current="page">
The Beach Board
</a>

Thank you!!

[GM091710]

I have the same question for the collection title! Please see pictures below - thank you again

[drfarahsutton]

Not sure about the Collections but here is how I did it for the Heading.

In the Heading section (shown below): self-care simplified^™  

and by doing that I was able to get the TM as shown below

Good luck!

[GM091710]

Thank you!