Re: Make price text same size as product title text

Make price text same size as product title text

golazocases
Explorer
96 0 28

I would like to make the price text on the collections page the exact same font size as the product title text on the collections page - for both mobile and desktop. But I want to make this change without effecting the price text on the product page.

 

URL golazocasesuk.myshopify.com

trade: theme

 

 Screenshot 2024-08-11 at 16.56.06.png

Replies 4 (4)

suyash1
Shopify Partner
9876 1228 1566

@golazocases  please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.card-information .price-item .money{font-size: calc(var(--font-heading-scale)* 1.3rem);}
To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me

BSSCommerce-HDL
Shopify Partner
2305 848 1065

Hi @golazocases

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

Step 2: Search file theme.css, base.css

Step 3: Add the following code at the end of the file -> Save:

span.money.buckscc-converted.buckscc-money {
    font-size: 40px !important;
    font-weight: bold !important;
}

Here is result: 

BSSCommerceHDL_0-1723392397721.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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSS-TekLabs
Shopify Partner
2350 702 828

- Here is the solution for you @golazocases 
- Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

#product-grid span.buckscc-money, #product-grid .full-unstyled-link {
      font-size: 15px !important;
}
@media only screen and (max-width: 600px) {
#product-grid span.buckscc-money, #product-grid .full-unstyled-link {
      font-size: 14px !important;
}
}

 

- Here is the result you will achieve:

BSSTekLabs_0-1723392517298.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

PageFly-Richard
Shopify Partner
4668 1069 1726

This is Richard from PageFly - Shopify Page Builder App

 

Hi @golazocases please add code here to change size :

Step 1: Online Stores > Themes > Edit code

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

 

<style>
 .card-information .price__regular{
    font-size: calc(var(--font-heading-scale)* 1.3rem) !important;
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Richard | PageFly

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


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


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