FROM CACHE - en_header
Promotion image

Re: Product Title On Product Page Centering - For Impact Theme

Solved

Product Title On Product Page Centering - For Impact Theme

NashMashPets
Excursionist
22 0 4
‎02-16-2024 01:50 AM

It has been difficult to find the coding for centering product titles on the product page. This is more in depth of a project though. I am trying to center the product titles of the product page on mobile only. I do not believe centering on the desktop is noteworthy. Finding a code for this has been difficult to find. I am stuck. Site: nashmashpets.com

 

 

NashMashPets.com
1,356 Views
0 Likes
Report
Accepted Solutions (3)

MastersHub
Shopify Partner
216 21 38
‎02-16-2024 02:05 AM

This is an accepted solution.

I understand you want something like this.

 

Please add this code to your theme.liquid file, after <head> element in Online Store > Themes > Edit code.

 

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center;
    }
}
</style>

 

 
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp

View solution in original post

1,341 Views
0 Likes
Report
In response to NashMashPets

MastersHub
Shopify Partner
216 21 38
‎02-17-2024 12:47 AM

This is an accepted solution.

Sorry little mistake. Try again 🙂

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
      justify-content: center!important;
    }

    .product-info__price {
      text-align: center!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp

View solution in original post

1,223 Views
1 Like
Report
In response to NashMashPets

MastersHub
Shopify Partner
216 21 38
‎02-19-2024 01:41 AM

This is an accepted solution.

Hi @NashMashPets, Maybe it could be of use to you.

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
        justify-content: center!important;
    }

    .product-info__price {
        text-align: center!important;
    }
    
    .product-info__vendor {
        text-align: center!important;
    }

    .product-info__price .rating {
        margin-inline-start: 0!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp

View solution in original post

1,095 Views
1 Like
Report
Replies 19 (19)

MastersHub
Shopify Partner
216 21 38
‎02-16-2024 02:05 AM

This is an accepted solution.

I understand you want something like this.

 

Please add this code to your theme.liquid file, after <head> element in Online Store > Themes > Edit code.

 

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center;
    }
}
</style>

 

 
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
1,342 Views
0 Likes
Report
In response to MastersHub

NashMashPets
Excursionist
22 0 4
‎02-16-2024 06:49 AM

Masters Hub Thank You- Do You know a code to center the pricing also>?

 

718EBB90-7B5B-47D1-BEFD-0B0252B65D03.jpeg

NashMashPets.com
1,274 Views
0 Likes
Report
In response to NashMashPets

NashMashPets
Excursionist
22 0 4
‎02-16-2024 06:52 AM

( The Pricing AND the Tax + Shipping calculation text)

NashMashPets.com
1,272 Views
0 Likes
Report
In response to NashMashPets

MastersHub
Shopify Partner
216 21 38
‎02-16-2024 07:22 AM

Always. You're welcome. You can use this code.

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center;
    }

    .product-info__price .rating-with-text {
      justify-content: center;
    }

    .product-info__price {
      text-align: center;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
1,266 Views
1 Like
Report
In response to MastersHub

NashMashPets
Excursionist
22 0 4
‎02-16-2024 08:27 PM

i Have added the code. The tax and shipping calculation centered.....Although the Price did not center. 

NashMashPets.com
1,236 Views
0 Likes
Report
In response to NashMashPets

MastersHub
Shopify Partner
216 21 38
‎02-17-2024 12:47 AM

This is an accepted solution.

Sorry little mistake. Try again 🙂

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
      justify-content: center!important;
    }

    .product-info__price {
      text-align: center!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
1,224 Views
1 Like
Report
In response to MastersHub

NashMashPets
Excursionist
22 0 4
‎02-17-2024 01:38 PM

Success! @ MastersHub

NashMashPets.com
1,189 Views
0 Likes
Report
In response to NashMashPets

NashMashPets
Excursionist
22 0 4
‎02-17-2024 01:40 PM

@MastersHub Thank You!!!

 

NashMashPets.com
1,185 Views
1 Like
Report
In response to NashMashPets

MastersHub
Shopify Partner
216 21 38
‎02-17-2024 01:42 PM

Always. You're welcome. I'm glad you succeeded @NashMashPets 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
1,183 Views
0 Likes
Report
In response to MastersHub

dreamtechzone_5
Shopify Partner
320 1 44
‎02-17-2024 01:44 PM

Hello MastersHub

I am using the Shopify dawn theme. I want to keep the size of the social icons in the footer section of my website the same. The size of the LinkedIn icon seems large to me. LinkedIn icon must be made smaller, as it is higher and wider than the others. Please help me. Thank you.

Store: https://dream-tech-zone.myshopify.com/

Password: Admin

Screenshot 2024-02-17 233131.png

1,182 Views
0 Likes
Report
In response to dreamtechzone_5

MastersHub
Shopify Partner
216 21 38
‎02-18-2024 03:35 AM

The Linkedin icon looks a little big, but it's actually the same size. But if it still doesn't appeal to your eyes, use this code.

 

<style>
.icon.icon-linkedin {
    width: 2rem;
    height: 2rem;
}
</style>
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
1,143 Views
0 Likes
Report
In response to MastersHub

NashMashPets
Excursionist
22 0 4
‎02-17-2024 11:58 PM

I am now trying to center the vendor name. i tried this code to center the vendor name.

<style> product.vendor {text-align: center;}</style>

It did not work.  Can this be solved?

@MastersHub 

 

NashMashPets.com
1,150 Views
0 Likes
Report
In response to NashMashPets

MastersHub
Shopify Partner
216 21 38
‎02-18-2024 03:38 AM

You can use this code

 

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
      justify-content: center!important;
    }

    .product-info__price {
      text-align: center!important;
    }
    
    .product-info__vendor {
        text-align: center!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
1,143 Views
0 Likes
Report
In response to NashMashPets

NashMashPets
Excursionist
22 0 4
‎02-18-2024 10:37 PM

THis code is working: although sometimes the center align for the price on product page still slides to the left of the screen on mobile. At other times it is centered. Is there a code to solidify this setting for centering to the middle?

NashMashPets.com
1,109 Views
0 Likes
Report
In response to NashMashPets

NashMashPets
Excursionist
22 0 4
‎02-18-2024 10:37 PM

@MastersHub 

NashMashPets.com
1,108 Views
0 Likes
Report
In response to NashMashPets

MastersHub
Shopify Partner
216 21 38
‎02-19-2024 01:41 AM

This is an accepted solution.

Hi @NashMashPets, Maybe it could be of use to you.

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
        justify-content: center!important;
    }

    .product-info__price {
        text-align: center!important;
    }
    
    .product-info__vendor {
        text-align: center!important;
    }

    .product-info__price .rating {
        margin-inline-start: 0!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
1,096 Views
1 Like
Report

Dan-From-Ryviu
Shopify Partner
9212 1847 1880
‎02-16-2024 02:05 AM

Hi @NashMashPets 

You can add this code to the very bottom of your theme.css file in Online Store > Themes > Edit code to align the product title to the center

.product-info__title.h1 { text-align: center; }

 

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

1,340 Views
1 Like
Report

PageFly-Henry
Shopify Partner
1184 335 287
‎02-16-2024 03:26 AM

Hi @NashMashPets 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

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

Step 2: Search file theme.css

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

 

@media (max-width: 767px){
.product-info__title {

    text-align: center !important;

}}

 

Hope that my solution works for you.

Best regards,

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

1,306 Views
0 Likes
Report

zaczee
Globetrotter
855 46 42
‎02-16-2024 03:26 AM

Hi,

 

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

 

@media screen and (max-width: 999px) {
  .product-info__title {text-align: center; }
}

 

1,305 Views
0 Likes
Report

Community Blog Articles

page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Jacqui_0-1725391911908.jpeg
Recap | An AMA with 2H Media: Marketing Your Shopify Store!

Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...

By Jacqui Sep 6, 2024
Terms of Service Privacy Policy