Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: how to change product title size in prestige theme

Solved

how to change product title size in prestige theme

christian_russo
Pathfinder
203 1 42

hi! 

 

can I only change the product title size on my prestige them? and is it also possible to place the title on the left and the price on the right?  below you can see the picture of the website now and how I would like it. 

site: https://www.gallerychristian.com/

thanks! 

Scherm­afbeelding 2024-05-14 om 15.15.47.pngScherm­afbeelding 2024-05-14 om 15.17.51.png

 

 

Accepted Solutions (3)
BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Sure, Let's remove help me "flex-direction: row-reverse !important;" in my code

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

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @christian_russo, Pls insert this code to your file css : 

.container:has(.collection) {
    margin: 0 15px !important;
}

.product-card__info .v-stack.justify-items-center.gap-1 {
    gap: 45px !important;
}

 

Here is result: 

BssTechVenture_0-1715697392916.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

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@christian_russo , Pls insert this code to your file css : 

@media only screen and (max-width: 767px) {
  .product-card .product-card__info .v-stack.justify-items-center.gap-1 {
        display: block !important;
  }
}

 

Here is result: 

BssTechVenture_0-1715698507461.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

View solution in original post

Replies 10 (10)

BSSCommerce-HDL
Shopify Partner
2305 834 908

Hi @christian_russo, Please insert this code to your file css: 

.product-card__info .v-stack.justify-items-center.gap-1 {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
}

.product-card__info .product-title {
   font-size: 13px !important;
}

Here is result: 

BssTechVenture_0-1715694230416.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

christian_russo
Pathfinder
203 1 42

This worked but can I with the price to the right side?

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Sure, Let's remove help me "flex-direction: row-reverse !important;" in my code

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

christian_russo
Pathfinder
203 1 42

Can I move the title to the left and the price to the right? 

BSSCommerce-HDL
Shopify Partner
2305 834 908

Hi @christian_russo, Can you kindly share the details of your problem (screenshot/ record) with us? We will check it and suggest you a solution if possible.

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

christian_russo
Pathfinder
203 1 42

I need the title fully to the left and the price fully to the right like on this picture

 

Scherm­afbeelding 2024-05-14 om 14.19.04.png

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @christian_russo, Pls insert this code to your file css : 

.container:has(.collection) {
    margin: 0 15px !important;
}

.product-card__info .v-stack.justify-items-center.gap-1 {
    gap: 45px !important;
}

 

Here is result: 

BssTechVenture_0-1715697392916.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

christian_russo
Pathfinder
203 1 42

thanks this worked but is it also possible to only have this on computer and not on mobile? I would like to leave  the price under the title on mobile so it's like this: 

IMG_3323.jpg

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

@christian_russo , Pls insert this code to your file css : 

@media only screen and (max-width: 767px) {
  .product-card .product-card__info .v-stack.justify-items-center.gap-1 {
        display: block !important;
  }
}

 

Here is result: 

BssTechVenture_0-1715698507461.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

Made4uo-Ribe
Shopify Partner
9035 2160 2664

Hi @christian_russo 

Do you like to change the font size in all product title pages? 

For changing the title and prcie. Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.v-stack.justify-items-center.gap-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 100%;
}
.product-card__info {
    justify-items: unset!important;
}
.justify-items-center {
    justify-items: stretch !important;
}

a.product-title.h6, sale-price.h6.text-subdued {
    font-size: 16px;
}

 

And Save. 

Result:

Made4uoRibe_0-1715694635374.png

Note; i also change the font-size of the price so it will be uniform the title if you dont like just let me know. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.