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

drfarahsutton
New Member
8 0 0

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!

Replies 16 (16)

Mike-Omega
Shopify Partner
157 27 30

Hi @drfarahsutton ,

 

This is Mike from Omega

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

 

If it’s helpful to you, please give it a like or mark as a solution.
Need any help for Shopify Design or Custom task, please contact via email: locdt@omegatheme.com
Consentik GDPR Cookie Banner: Effortlessly stay compliant with EU GDPR, CCPA
drfarahsutton
New Member
8 0 0

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-Omega
Shopify Partner
157 27 30

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

If it’s helpful to you, please give it a like or mark as a solution.
Need any help for Shopify Design or Custom task, please contact via email: locdt@omegatheme.com
Consentik GDPR Cookie Banner: Effortlessly stay compliant with EU GDPR, CCPA
drfarahsutton
New Member
8 0 0

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

BSS-Commerce
Shopify Expert
3477 461 515

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

drfarahsutton
New Member
8 0 0

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
Shopify Expert
3477 461 515

Hi @drfarahsutton 

- Is this the result you want?

view (32).png

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

drfarahsutton
New Member
8 0 0

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
Shopify Expert
3477 461 515

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)

view (33).png

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.

view (34).png

We hope that this can help you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

drfarahsutton
New Member
8 0 0

This is the existing code.

 

Screen Shot 2023-03-02 at 5.05.47 PM.png

drfarahsutton
New Member
8 0 0

I tried updating and it says CSS error

BSS-Commerce
Shopify Expert
3477 461 515

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:

view (40).png

Please let us know if you need further help.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

GM091710
Visitor
3 0 0

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!!

 

Screenshot 2024-03-14 145500.png

GM091710
Visitor
3 0 0

I have the same question for the collection title! Please see pictures below - thank you againScreenshot 2024-03-14 14594.pngScreenshot 2024-03-14 145918.png

drfarahsutton
New Member
8 0 0

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

 

In the Heading section (shown below): self-care simplified<sup>™<sup></sup></sup>  

Screen Shot 2024-03-14 at 1.10.53 PM.png

 

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

Screen Shot 2024-03-14 at 1.07.56 PM.png

 

Good luck!

GM091710
Visitor
3 0 0

Thank you!