Make product title smaller on product page and price bigger

Solved

Make product title smaller on product page and price bigger

Ébloui
Excursionist
24 1 6

F6CAA6A6-418E-4B9F-836C-62B01709795D.png

 in the above picture you can see my product title is 2 lines. But I want the title smaller that it is just 1 line 1 title. And also make the price a little bit bigger. Is there an code for this? Website:www.ebloui-jewellery.com Pw: ebloui

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
1103 377 448

This is an accepted solution.

Hi @Ébloui

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

BSSCommerceHDL_0-1718292476805.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1718292480995.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

 

@media only screen and (max-width: 767px) {
   span.price-item.price-item--regular {
     font-size: 18px !important;
   }
   .product__info-wrapper .product__title h1 {
     font-size: 15px !important;
   }
}

 

 

Here is result: 

BSSCommerceHDL_2-1718292636827.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Please add this code to theme.liquid file, after <head> 

<style>
@media (max-width: 749px) {
.product__info-wrapper span.price-item.price-item--regular,
.product__info-wrapper .product__title h1 { font-size: 16px !important; }
}
</style>

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

BSSCommerce-HDL
Shopify Partner
1103 377 448

This is an accepted solution.

Hi @Ébloui

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

BSSCommerceHDL_0-1718292476805.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1718292480995.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

 

@media only screen and (max-width: 767px) {
   span.price-item.price-item--regular {
     font-size: 18px !important;
   }
   .product__info-wrapper .product__title h1 {
     font-size: 15px !important;
   }
}

 

 

Here is result: 

BSSCommerceHDL_2-1718292636827.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

PageFly-Noah
Shopify Partner
1317 233 268

This is Noah from PageFly - Shopify Page Builder App

 

Hi @Ébloui  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
@media screen and (max-width: 767px){
  .product .product__title h1{
    font-size: 14px !important;
  }
  .product .price-item{
    font-size: 16px !important;
   }
}

</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

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