How to make a title with 2 lines, a bold title line and a second subtitle line

Shopify Discussion

Topic summary

Goal: Display product titles in two lines—a bold main title and a secondary subtitle—ideally via metafields; current issue is that adding HTML to the title renders visibly on the product page.

Proposed approach: Edit the theme code to wrap the main title in a with a bold CSS class and render a subtitle in a separate element. Add CSS (font-weight: bold, font-size adjustments) in the theme’s asset stylesheet. Use Liquid to output product.title and a subtitle metafield (e.g., product.metafields.custom_fields.subtitle).

Where to change: Go to Online Store > Themes > Actions > Edit code. Look in Sections/Snippets for product template files; add CSS in Assets (e.g., theme.scss.liquid). Note: Example references file names like product-template.liquid and product.liquid.

Technical context: Metafields are custom data fields on Shopify products; Liquid is Shopify’s templating language.

Latest development: In the Dawn theme, the referenced files were not found (only card-product.liquid was located). Attempting to insert the provided code and CSS broke the products page. No working solution yet.

Status: Unresolved. Key open items: correct Dawn file(s) to edit and exact Liquid for rendering the subtitle metafield. Code snippets are central to the discussion.

Summarized with AI on January 24. AI used: gpt-5.
1

How do I make a title with 2 lines, a bold title line and a second subtitle line? I can add html to the title, but it shows on the product page. Can I do this using metafields? I am unable to find any directions explaining how to do this. Thank you.

2

To create a title with two lines, including a bold title line and a second subtitle line, you can use HTML and CSS.

Edit the HTML for the title by adding an element around the desired text for the bold title line. For example:

Your Bold Title

Apply CSS to style the .bold-title class as per your requirements. You can use the font-weight property to make it bold:

.bold-title {
font-weight: bold;
}

A second line for the subtitle using a separate element or any other appropriate HTML element. Apply the necessary CSS to style it differently from the main title.

Some platforms may have limitations on customizing the product page layout, so it’s advisable to consult the platform’s documentation or reach out to their support for specific guidance.

3

Thank you, but where do I put this?

4

You place this in the Shopify theme’s code.

  1. From your Shopify admin, go to “Online Store” and then “Themes.”
  2. Find the current theme you’re using and click on “Actions.”
  3. Select “Edit code” from the drop-down menu. This will open the theme editor.
  4. In the theme editor, locate the “Sections” or “Snippets” folder (folder names may vary depending on the theme).
  5. Look for a file named “product-template.liquid” or similar. If you can’t find that specific file, try looking for “product.liquid” or “product-template” files.
  6. Open the file you found in the previous step.
  7. Within the product template file, search for the code responsible for rendering the product title. It usually looks something like this: {% for product in collection.products %}{{ product.title }}{% endfor %}.
  8. Replace that code with the modified title HTML code provided in the previous response:
# 
  {{ product.title | split: ' ' | first | escape }}

  {{ product.metafields.custom_fields.subtitle }}

Save the changes.

After saving the modified file, the product titles on your Shopify store should now display with a bold title line and a subtitle line.

Additionally, to apply the CSS styles mentioned in the previous response, follow these steps:

  1. In the theme editor, navigate to the “Assets” folder.
  2. Open the file named “theme.scss.liquid” or similar (this may vary depending on your theme).
  3. Add the following CSS code at the end of the file:

.title-line-1 { font-weight: bold; font-size: 24px; } .title-line-2 { font-size: 18px; color: #999999; }

You should be able to change the product title and add the required CSS styles. Remember to replace custom_fields.subtitle with the subtitle’s real metafield key.

5

Unfortunately, I don’t have any of those files in my Dawn theme. I have a card-product.liquid file, but I don’t see any code that looks like what you described. I tried to put it in where I thought it should go, along with the CSS, and I messed up the entire products page. I appreciate you trying to help me though.