When you use HTML tags such as span or br in the titles of your Shopify products, blog posts, pages, etc., or in the default menu features, you may encounter the following issues:
1. HTML tags entered in the title or menu are displayed as strings (normal text).
*<span>, <br>, etc. must be output as HTML tags.
2. I want to use HTML tags in the title of the detail page, but I do not want to use HTML tags in the title of the list page.
*You need to set different titles for detail pages such as products/blog posts/pages and list pages such as collections/blogs/search results.
In this article, we'll show you some tips on using HTML tags such as span and br in the titles of Shopify products, blog posts, pages, etc., and in the default menu function, as well as how to make use of meta fields.
HTML tags entered in titles and menus are output as HTML tags.
To output the title of a product/blog post/page, or the name of a menu item (such as <span> or <br>), as an HTML tag instead of a string, modify the corresponding liquid file.
Below is a list of liquid files and changes confirmed in Dawn version 10.0.0.
| Name (output content) | Liquid files | Changes |
|---|---|---|
| Product (product title) | section/main-product.liquid | {{ product.title | escape }} |
| Collection (product title) | snippets/card-product.liquid | {{ card_product.title | escape }} |
| Blog post (blog post title) | section/main-article.liquid | {{ article.title | escape }} |
| Blog list (blog article title) | snippets/article-card.liquid | {{ article.title | truncate: 50 | escape }} |
| Page (page title) | section/main-page.liquid | {{ page.title | escape }} |
| Search results (various titles) | section/main-search.liquid | {{ item.title | truncate: 50 | escape }} |
| Menu (name of menu item) *Version 9 and earlier |
sections/header.liquid | {{ link.title | escape }} {{ childlink.title | escape }} {{ grandchildlink.title | escape }} |
| Dropdown (menu item name) *Version 10 and later |
snippets/header-dropdown-menu.liquid | {{- link.title | escape -}} {{ childlink.title | escape }} {{ grandchildlink.title | escape }} |
| Mega Menu (name of menu item) *Version 10 and later |
snippets/header-mega-menu.liquid | {{- link.title | escape -}} {{ childlink.title | escape }} {{ grandchildlink.title | escape }} |
| Drawer (name of menu item) *Version 10 and later |
snippets/header-drawer.liquid | {{ link.title | escape }} {{ childlink.title | escape }} {{ grandchildlink.title | escape }} |
When modifying a file from the management screen,
Go to your Shopify admin page > Sales Channels > Online Store and click the "..." button at the bottom right of the screen to "Edit Code".
*The screen used for the explanation is from Dawn version 10.0.0.
For example, on a product page, add the following to the section/main-product.liquid file:
{{ product.title | escape }}
Rewrite it as follows:
{{ product.title }}
By deleting the liquid filter ``escape'', HTML escaping will be removed and <span>, <br>, etc. will be output as HTML tags.
Set different titles for detail and list pages
You may want to change the title displayed on detail pages such as products, blog posts, and pages, and on list pages such as collections, blogs, and search results. In such cases, you can use meta fields.
In this article, we will explain how to use titles containing HTML tags using metafields on product pages, and default titles on collection pages.
*The screen used for the explanation is from Dawn version 10.0.0.
1. Adding meta fields
First, add the metafield:
Click on "Settings" in the bottom left corner of your Shopify admin screen.
Click "Custom Data" in the Settings menu.
On the custom data screen, click on the item to which you want to add a metafield (in this case, "Product").
A list of metafield definitions will be displayed.
Click the "Add Definition" button in the upper right corner of the screen.
1. Set the definition.
*The name/namespace and key/description settings are optional.
| name | Title containing HTML tags |
|---|---|
| Namespaces and Keys | custom.title_with_html_tags |
| explanation | You can use HTML tags such as <span> and <br> in the title. |
| Select a type | Single line of text |
| Storefront | check |
2. Click the "Save" button in the upper right corner of the screen.
Metafield definitions were added.
It is displayed under the definition name.
product.metafields.custom.title_with_html_tags
This part is the liquid object name.
Make a note of it so you don't forget.
2. Enter meta fields
Next, enter a title on the product management screen.
*If you add a meta field to a blog post or page, enter the title in the administration screen for the blog post or page.
Enter the product name (without HTML tags) in the Default Title field.
*The content you enter here will be displayed on your collection page as usual.
1. At the bottom of the page there is an input field for the meta field you just added, "Title including HTML tags," so enter the product name including HTML tags.
*The information you enter here will be displayed on the product page.
2. Click the "Save" button in the upper right corner of the screen.
3. Modify the liquid file
Now let's try displaying the content entered in the meta field on an actual page.
This time, we will modify the section/main-product.liquid file to display it on the product page.
The following description
<h1> {{ product.title | escape }} </h1>
Replace it with the liquid object name you noted earlier.
<h1> {{ product.metafields.custom.title_with_html_tags }} </h1>
If no input is made in the meta field, a default title will be displayed, allowing for a wide range of use cases.
In that case, rewrite it as follows:
<h1>
{%- if product.metafields.custom.title_with_html_tags != blank -%}
{{ product.metafields.custom.title_with_html_tags }}
{%- else -%}
{{ product.title | escape }}
{%- endif -%}
</h1>
Since this is before adding CSS, there is no visible change yet, but if you check the source code using developer tools, you will see that a title including HTML tags is displayed on the product page.
4. Adding CSS
Finally, let's add some CSS to make the text enclosed in the <span> smaller.
The CSS is specified as follows:
*The setting value is optional.
.product__title h1 span {
display: block;
font-size: 1.8rem;
}
If you want to add CSS from the administration screen,
On the Shopify admin screen > Sales Channels > Online Store screen, click the "Customize" button.
1. Click "Theme Settings (gear icon)" on the left side of the customization screen,
2. Enter the CSS in the "Custom CSS" field.
The CSS has been applied, and only the area enclosed in <span> has become smaller.
Shopify Tips: How to use HTML tags in titles and menus Summary
This article explains the issues that occur when using HTML tags such as span and br in the titles of Shopify products, blog posts, pages, etc., or in the default menu function.
- HTML tags entered into the title or menu are displayed as strings (normal text).
- I want to use HTML tags in the title of the detail page, but I do not want to use HTML tags in the title of the list page.
We've introduced ways to solve these problems using liquid filters and metafields.
I hope this helps you in building your Shopify website.
*Information current as of July 2023. Due to theme updates or changes to Shopify specifications, it may not be possible to set it up exactly as described in the article.
