Debut headings and product title font sizes

Store Design
1

Hello!
Im using debut theme.

I want that all headings are 34pt bold, but product title names are 22pt not bold.

My homepage:

https://enammo.com/collections/all/products/custom

2

Hi @Edgars_Rudzitis

I am checking the page and I saw that your product title is already 42px and bold https://prnt.sc/euhE7GsfSsCZ

Could you please show me the screenshot of the text that is 22pt not bold, so we can help you check it?

Best,

Daisy

3

Hello @Edgars_Rudzitis , Please add the class that sets the product title names to 22pt without bolding in your store i have added dummy class for now.

/* Set all headings to 34pt bold */
h1, h2, h3, h4, h5, h6 {
    font-size: 34pt;
    font-weight: bold;
}

/* Set product titles to 22pt and not bold*/
.product-card__title,
.product-single__title,
.grid-product__title {
    font-size: 22pt;
    font-weight: normal;
}
4

where to put this code please?

5

i missed the thing a little..

i changed my debut theme settings for typography.. i recently made headings and buttoms from montserrat 22pt to montserrat bold 34pt and just now noticed my product titles also have montserrat bold 34pt but i liked the previous font and sizing for product titles

6

Hello @Edgars_Rudzitis ,

Steps to Add Custom CSS in Shopify:1. Access the Theme Editor:

  • Go to your Shopify Admin panel.

  • Navigate to Online Store > Themes.

  • Find the theme you want to edit, and click on Actions > Edit code.

  • Open the CSS (or SCSS) File:

    • In the list of theme files on the left, open the Assets folder.
    • Look for a file named something like theme.css, theme.scss.liquid, or styles.scss.liquid.
    • Click on the file to open it. This is where you can add custom CSS.

  • Add the Custom CSS:

    • Scroll to the bottom of this file.

    • Paste the CSS code provided title classname.

    • Save the Changes:

      - Click **Save** in the top right corner to apply the changes.

    • Preview the Changes:

      - Go back to your store and preview the pages with product titles and headings to confirm the styles are applied.### Notes:- Shopify themes often have specific classes for product titles, so check your store to make sure the product titles have the classes that specified (.product-card__title, .product-single__title, .grid-product__title). Adjust the class names if they’re different.
7

In the Shopify Debut theme, typography settings apply globally, so if you change the settings for headings, it can affect other text elements like product titles as well. To specifically override the product title font style without affecting the rest of the headings and buttons, you can add custom CSS targeting only the product titles.

Here’s How to Restore Your Product Title Styling:1. Go to the Theme Editor:

  • In your Shopify Admin, go to Online Store > Themes.
  • Under the theme you’re using (Debut), click Actions > Edit code.

  1. Open the theme.scss.liquid or CSS File:

    • In the left sidebar, under the Assets folder, find and open theme.scss.liquid (or theme.css.liquid).

  2. Add the Custom CSS:

    • Scroll to the bottom of the file.

    • Add the following code to set the font size and weight specifically for product titles:

/* Restore product title styling */
.product-card__title,
.product-single__title,
.grid-product__title {
    font-family: "YourPreferredFont", sans-serif; /* Replace with your font name if needed */
    font-size: 22pt;
    font-weight: normal;
}

  • Replace “YourPreferredFont” with the original font you liked for the product titles, if it was different from Montserrat.

  • Save the Changes:

    • Click Save to apply the CSS.

  • Preview and Verify:

    • Go to your store to make sure that the product titles now have the original styling you wanted (22pt without bold) while the headings and buttons remain at 34pt bold.

Additional Notes- Font Family: If you’re using a specific font that’s not loaded by default in the theme, ensure it’s available in the Shopify theme’s font settings or load it manually in the section.

  • !Important (If Needed): If the product titles still inherit the global heading style, you may need to add !important to enforce the styles:
font-size: 22pt !important;
font-weight: normal !important;

This will allow you to keep your updated heading and button styles while restoring the product titles to their previous appearance. Let me know if this helps or if you have more questions!