How to make page titles and product names bold in Refresh Theme?

[Saad_Paswal]

Hey Everyone, I would like to make All the page titles and product names Bold in the Refresh Theme. I have Pages Like Shop, Contact Us, and About Us pages, When I click on the tab everything is pretty good but the title of Each page is not Bold. Please share any code with me. Thanks!

[suyash1]

@Saad_Paswal - can you please share your website link?

[Saad_Paswal]

I want to make these Titles Bold after clicking on these Tabs which opens new pages and Also the Titles of the products.

[Hardik29418]

@Saad_Paswal Please provide website URL so that I can provide you a solution here.

[eFoli-Marvic]

@Saad_Paswal Please share your store URL and password(If it is password protected.). So that I can check and give you the exact solution.

[Vinsinfo]

@Saad_Paswal To make the active menu bold, please follow below steps.

1. From admin, go to “Online Store” → “Themes”.
2. Click action button from the current theme and select “Edit code”.
3. Search “component-menu-drawer.css” and paste below code at the bottom of the file.

.menu-drawer__menu-item--active {
    font-weight: bold;
}

By default, all the page titles and product titles will be in bold like below screenshots. Can you please provide your site URL to check this on deep?

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

[PageFly-Oliver]

Hi [email removed]

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[Saad_Paswal]

Nothing changed

[Saad_Paswal]

Same issue, it’s not working.

[websensepro]

Hello Saad_Paswal,

To make all page titles and product names bold, you’ll need to add some custom CSS to your theme

Here’s how you can achieve this:

1. Access your Shopify admin

2. Go to Theme Editor

3. Edit Code

4. Locate the CSS File(This file is typically named theme.scss.liquid or similar.)

5. Add Custom CSS

/* Make all page titles bold */
h1.page-title,
h2.page-title,
h3.page-title,
h4.page-title,
h5.page-title,
h6.page-title {
    font-weight: bold;
}

/* Make all product names bold */
.product-card__title {
    font-weight: bold;
}

Save Changes.

[Saad_Paswal]

Still the same issue.

[websensepro]

If the custom CSS provided didn’t work, it’s possible that the theme structure or class names might be different than what was assumed.

Let’s try a slightly different approach.

We’ll specifically target page titles and product names using more specific selectors.

First, let’s identify the correct class names for page titles and product names:

Page Titles

Page titles in Shopify typically have different class names based on the page type. We’ll need to inspect the HTML structure to find the correct class name. Right-click on a page title in your browser, select “Inspect” (or “Inspect Element”), and look for the class name of the element that contains the page title.

Product Names

Similarly, product names should have their own class name. Inspect the product name on a product page or a collection page to find its class name.

Once you have the correct class names, you can add custom CSS

Here’s a general example of how you might do this:

/* Make page titles bold */
.page-title {
    font-weight: bold;
}

/* Make product names bold */
.product-title {
    font-weight: bold;
}

Replace .page-title and .product-title with the actual class names you found during inspection.

Save Changes.

[Vinsinfo]

@Saad_Paswal Can you please share your store URL to provide you the correct solution?

[Saad_Paswal]

Here is my store URL https://shopquorra.com/ please check this out and give me a perfect solution on how would I make my Product titles and Page titles Bold Thanks!

[Saad_Paswal]

Here it is https://shopquorra.com/ Please check this out!

[Saad_Paswal]

Here it is https://shopquorra.com/

[Vinsinfo]

@Saad_Paswal Please let me know whether below code works for you to display current menu and all other page titles in bold.

1. From admin, go to “Online Store” → “Themes”.

2. Click action button from the current theme and select “Edit code”.

3. Search “base.css” file and paste below code at the bottom of the file.

.menu-drawer__menu-item--active, .product__title h1, .page-title, .product-grid-container .card__heading, .collection-hero__title {
    font-weight: bold !important;
}

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

[Saad_Paswal]

Thanks, it did perfectly!