I want to center this on my products pages

Store Design
, ,
1

Hi,

Here is my product page’s link : https://www.five-pocket.com/products/pro-club-heavyweight-cotton-tshirt-white

I want to center this on all my products pages on mobile and on desktop ( see picture ) : From product title to add to cart.

Capture d’écran 2024-12-09 à 15.52.31.png
Capture d’écran 2024-12-09 à 15.52.31.png754×1120 53.6 KB

1 Like
2

Hi @imazele

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
.product__title, .product__tax, .price--large, .product-form__input {
    text-align: center !important;
}

.jdgm-widget.jdgm-widget {
    text-align: center !important;
}

.product-form__input {
    max-width: 100%;
}

.price-per-item__container {
    justify-content: center;
}

.product-form__buttons {
    margin: auto;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

thanks ! is it also possible to reduce the size of the quantity and the size on mobile?

4

works well on mobile but looks bad on desktop is it possible to correct please.

Capture d’écran 2024-12-09 à 16.38.59.png
Capture d’écran 2024-12-09 à 16.38.59.png1450×1042 49.5 KB

5

Please add the code first so I can identify which one is not centered. Thanks!

And let me know if you already added.

6

it’s added and still don’t work correctly. On destktop it isn’t center align and on mobile it centrers when it loads.

Thnaks

7

It still doesn’t work can you help me ?

8

Ops, sorry didnt notice the notification.

Please, replace the code that I give yesterdayo to this.

.product__title, .product__tax, .price--large, .product-form__input {
    text-align: center !important;
}

.jdgm-widget.jdgm-widget {
    text-align: center !important;
}

.product-form__input {
    max-width: 100% !important;
}

.price-per-item__container {
    justify-content: center;
}

.product-form__buttons {
    margin: auto;
}

Or when you go to the base.css where you paste the code.

Made4uoRibe_0-1733830756395.png
Made4uoRibe_0-1733830756395.png370×129 2.58 KB

This line 3620 add !important. Like this below.

Made4uoRibe_1-1733830791406.png

And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

9

it works but why every time I reload the page the quantity box move to go to the center? Can you correct this pls?

10

Try to add on other file.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
  • And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!