Solved

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

Saad_Paswal
New Member
10 0 0

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!

Accepted Solution (1)
Vinsinfo
Shopify Partner
157 56 50

This is an accepted solution.

@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;
}

 

priyavinsinfo_2-1710316226142.png

 

 

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

View solution in original post

Replies 17 (17)

suyash1
Shopify Partner
9124 1135 1481

@Saad_Paswal - can you please share your website link?

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
Saad_Paswal
New Member
10 0 0

Screenshot (10).png

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

Hardik29418
Shopify Partner
2913 419 1083

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

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Saad_Paswal
New Member
10 0 0

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

eFoli-Marvic
Shopify Partner
223 40 39

@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. 

Marvic | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants

Vinsinfo
Shopify Partner
157 56 50

@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;
}

 

priyavinsinfo_0-1709799081109.png

 

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?

priyavinsinfo_1-1709799090884.png  priyavinsinfo_3-1709799105380.png

 

 

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

Saad_Paswal
New Member
10 0 0

Same issue, it's not working.

Vinsinfo
Shopify Partner
157 56 50

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

Saad_Paswal
New Member
10 0 0

Here it is https://shopquorra.com/ 

Vinsinfo
Shopify Partner
157 56 50

This is an accepted solution.

@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;
}

 

priyavinsinfo_2-1710316226142.png

 

 

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

Saad_Paswal
New Member
10 0 0

Thanks, it did perfectly!

PageFly-Oliver
Astronaut
840 175 155

Hi @,

 

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

 

<style>
[class*=menu-drawer__menu-item" {
    font-weight: bold !important;
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Saad_Paswal
New Member
10 0 0

Nothing changed 

websensepro
Shopify Partner
1011 139 147

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.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Saad_Paswal
New Member
10 0 0

Still the same issue.

websensepro
Shopify Partner
1011 139 147

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.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Saad_Paswal
New Member
10 0 0

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!