Resize the trademark ® symbol in headers for Dawn theme

Shopify Discussion
1

Hi there - I have a Federally registered trademark for my companies name that I am trying to include in the headings of several of my pages, however the ® that is should be smaller than the text it is protecting is just as large and looks strange. Can someone tell me how to reduce the size of the ® without shrinking the rest of the header? Here is one of the pages that I’m having the issue on - https://29and11.com/collections/pendants.

Thank you!

1 Like
2

It is challenging to do this without modifying your theme’s code.

You’ll need to wrap the trademark symbol in a span tag and have that inside your H1.

You can resize your span tag using CSS.

Another way might be to have a developer look at adding a CSS :after class. This would place the trademark after the .collection-hero__title class.

3

If I were to modify the code, what section would I need to look in to add a span tag?

4

You’d want to look for the “Collection” section of your theme. Specifically the H1 element with the collection-hero__title class.

5

I was hoping that someone here could provide the code to add the span tag needed and let me know where to put the code so the ® in the titles is a superscript (As show in this sentence) and isn’t as large as the rest of the font in the title.

6

@hnaegele

Please follow the below steps to resize the registered trademark symbol in the collection title and let me know whether it is helpful for you.

  1. From admin, go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Search for the file “main-collection-banner.liquid” and locate the class “collection-hero__title” of h1 tag in that file and replace the tag with below code.
# 
        {{ 'sections.collection_template.title' | t }}: 
        {%- assign collection_title = collection.title | replace: '®', '®' %}
        {{- collection_title -}}

priyavinsinfo_1-1709790213492.png
priyavinsinfo_1-1709790213492.png998×120 7.7 KB

  1. Add the below CSS code in the base.css file at the bottom of the file. You can update the text size of the registered trademark by updating the font-size px value in the below CSS.
span.collection_trademark {
    vertical-align: super;
    font-size: 30px;
    line-height: 35px;
}

Now, it will be updated like below,

priyavinsinfo_2-1709790720750.png
priyavinsinfo_2-1709790720750.png1305×214 10.8 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

7

This works perfect!! You’re a lifesaver - thank you!!