How can I adjust the size of product titles and prices for better visibility?

Zeshanzaidi
Tourist
24 0 2

The product titlt is large covering larger space in screen inturn the visitor need to scroll more. I want it to be seen directly by visiting the product page. And also the size of the price shown. I have changed the colour of the price but want to make it a bit bigger and bold so that the visitor can see it easily

Replies 6 (6)

JasmeetVT14313
Shopify Partner
201 47 54

Hi @Zeshanzaidi 
Please share the store URL with screenshots where you want to make the change so that I can check and guide you better.

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
Zeshanzaidi
Tourist
24 0 2

IMG_20240415_193602.jpgIMG_20240415_193622.jpg

 

buyhub.store

Theencircled in red.  In 2nd screenshot the product with no compared to price has not changed the price color. While products with compared to price have changed the sale price color. Moreover some products don't show sale badge even they have compared to price

JasmeetVT14313
Shopify Partner
201 47 54

Hi @Zeshanzaidi 
Please add the below code to "section-main-product.css" file or "base.css"

 

.product .product__info-wrapper .price__container {font-weight: bold;}
.product .product__info-wrapper .price-item--regular {color: #fa0202;}
@media screen and (max-width: 750px) {
.product .product__info-wrapper .product__title h1 {font-size: 24px;}
.product .product__info-wrapper .price-item--sale {font-size: 21px;}
.product .product__info-wrapper .price-item--regular {font-size: 21px;}
}

 

Please hit Like and mark it as a solution if it helps

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
Zeshanzaidi
Tourist
24 0 2

Thank you. Its working but please tell me , if I want to change size, what change and where should I do ? And I want the strike through price the same as black. And what is the professional size ?

JasmeetVT14313
Shopify Partner
201 47 54

@Zeshanzaidi 
Glad it helped.  

Please hit Like and mark it as a solution


In the above code the values for "font-size" can be increased or decreased as per your requirement.

 

/***desktop and mobile styling start***/
.product .product__info-wrapper .price__container {font-weight: bold;}
.product .product__info-wrapper .price-item--regular {color: #fa0202;}
/***desktop and mobile styling start***/
/***only for mobile view styling starts here**/
@media screen and (max-width: 750px) {
.product .product__info-wrapper .product__title h1 {font-size: 24px;} /**font-size: 27px**//***this is for title**/
.product .product__info-wrapper .price-item--sale {font-size: 21px;} /**font-size: 19px**/ /**this is for sale price**/
.product .product__info-wrapper .price-item--regular {font-size: 21px;} /**this is for regular price**/
} 
/***only for mobile view styling ends here**/

 


For strike through, you can use the below property on your element

 

{
text-decoration: line-through;
}

 

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

Made4uo-Ribe
Shopify Partner
6013 1445 1783

Hi @Zeshanzaidi 

Would you mind to share your store URL? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com