Is it possible to make the product page headers as bold on the mobile version?

Is it possible to make the product page headers as bold on the mobile version?

sofiakarkus
Excursionist
26 1 4

Is it possible to make the product page headers as bold on the mobile version as they are on the desktop version and also a bit bigger? Otherwise, there’s just too much text.

 

 

Replies 7 (7)

topnewyork
Astronaut
1365 165 224

Hi @sofiakarkus , 

 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

 

 

<stlye>
@media screen and (max-width: 767px) {
    .product__accordion__title {
        font-weight: bold !important;
    }
}
</style>

 

 

topnewyork_0-1725261057568.png

 

OR 

<style>
@media screen and (min-width: 768px) {
    .product__title {
        font-size: 35px !important;
        font-weight: bolder !important;
    }
}
</style>

topnewyork_0-1725261609091.png

 

 

If this is what you meant then kindly hit the like and mark it as an accepted solution otherwise kindly show me what you want bold in mobile. Thanks!

 

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
sofiakarkus
Excursionist
26 1 4

Hi! Thank you for your reply. I tried both codes, but unfortunately, neither of them worked the same way as in your screenshot. What could I be doing wrong?

topnewyork
Astronaut
1365 165 224

@sofiakarkus , kindly share the screenshots of the code please. Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

Moeed
Shopify Partner
7466 2021 2481

Hey @sofiakarkus 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.product__title {
    font-size: 40px !important;
    font-weight: bolder !important;
}
}
</style>

RESULT:

Moeed_0-1725261211644.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


sofiakarkus
Excursionist
26 1 4

Hi, thank you for your reply. I tried, but unfortunately, nothing changes when I follow the instructions and change the code. What could I be doing wrong?

Moeed
Shopify Partner
7466 2021 2481

Hey @sofiakarkus 

 

Can you share a screenshot of the code you added?

 

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


sofiakarkus
Excursionist
26 1 4

Hi, thank you for your reply. I tried using this code, but unfortunately, it doesn't offer a solution. I want to make the dropdown menu bold, as it is in the desktop version. Is there any way to do this?