How can I add subscript to my product titles effectively?

Store Design
1

Hi

I am trying to add Subscript to some of my product titles. I am not sure how to do this. I know how to add subscript in regular content/description areas by using but that only half works in my situation. If I write that title I want “Man7D2” in the product title it displays correctly on its product page, but then on the preview product card it is displaying as “Man7D2”, I need the product title to show the subscript as well. See the photos below on how it works in viewing the product, but now when previewing the product card. Would appreciate any help, thank you!

Screen Shot 2021-04-19 at 4.53.50 PM.png
Screen Shot 2021-04-19 at 4.53.50 PM.png1000×722 23.9 KB

Screen Shot 2021-04-19 at 4.50.42 PM.png
Screen Shot 2021-04-19 at 4.50.42 PM.png736×444 9.43 KB

Screen Shot 2021-04-19 at 4.50.59 PM.png
Screen Shot 2021-04-19 at 4.50.59 PM.png504×600 23.6 KB

2

@jheller28

sorry for this issue

also sorry again Shopify admin HTML doesn’t allow to product title

3

Hi @jheller28 ,

Shopify supports default this feature. Can you please share with me your store URL so I can check it for you?

4

@LitExtension

Thanks for responding and sorry for the delay! Appreciate any help. Site is still a work in progress

URL: https://chemitope-glycopeptide.myshopify.com/collections/free-glycans

Password: shahpe

5

Hi @jheller28 .

This request I need access your site to check. Please add me as a staff so I can check and give you the best solution in this case, and you can remove me after that. (my email: jones.evan137@gmail.com)

Hope this helps!

6

Hi @jheller28 , I could replicate your issue on my development store using Minimal theme. Basically, the product title is being escaped of html tags. To fix this, you need to go to Themes → Edit code → Snippets → and look for this file → product-grid-item.liquid.

Find this piece of code:

{% if featured.title == '' %}
  {% comment %}add default state for product block in storefront editor{% endcomment %}
  {% capture product_title %}{{ 'home_page.onboarding.product_title' | t }}{% endcapture %}
{% else %}
  {% capture product_title %}{{ featured.title | escape }}{% endcapture %}
{% endif %}

and replace with:

{% if featured.title == '' %}
  {% comment %}add default state for product block in storefront editor{% endcomment %}
  {% capture product_title %}{{ 'home_page.onboarding.product_title' | t }}{% endcapture %}
{% else %}
  {% capture product_title %}{{ featured.title }}{% endcapture %}
{% endif %}
7

Hi @g33kgirl

Wow, thank you so much! it worked perfectly. I really appreciate it!

8

Hi Again! @g33kgirl

Your solution was great, however, I am having issue with the subscript displaying in my “recently viewed products” section at the bottom of my product page. Please see screenshot below:

Screen Shot 2022-02-14 at 8.04.44 PM.png
Screen Shot 2022-02-14 at 8.04.44 PM.png2248×670 108 KB

Do you have any idea how to fix this?

Thanks so much.

9

Hi there,

I’m looking for the same solution but to add superscript in a blog post title.

Are you able to help?

Many thanks,

Em

10

Heya,
I need the same thing for Dawn theme - there is no product-grid-item.liquid. I am trying to get CO2 to show correctly in the heading. Please help!
Thanks,

Anthea

11

Hi
I’m trying to accomplish this or use the description as a headline (coded with html), but I can’t seem to figure out how.

I tried to follow your description and I get to product-grid-item.liquid, but I can’t seem to find the code you are referring to.

12

For the Dawn theme do this to be able to insert HTML tags inside the title:

replace {{ product.title | escape }} to {{ product.title }} in main-product.liquid

{%- when 'title' -%}

# {{ product.title }}

## 

{{ product.title }}