I want to center the product's informations on all my product page on mobile and desktop

Store Design
, ,

Topic summary

A user seeks to center product information on their Shopify product pages across both mobile and desktop devices.

Solution Provided:
Another user offers CSS code to be added to the base.css file in the theme’s Assets folder, targeting .product__info-container, .product-form__input, and .product-form__buttons with text-align: center and margin: 0 auto properties.

Issue & Follow-up:
The original poster reports the solution initially worked but then broke, showing misaligned elements in a screenshot. The helper responds with an additional CSS snippet adding !important to .product-form__input to override conflicting styles.

Alternative Suggestion:
A third participant recommends using Shopify’s built-in theme customization tools (Online Store > Theme > Customize) instead of custom CSS, suggesting the user may need a better theme if basic margin settings aren’t available through the interface.

Status: The discussion remains open with a potential fix provided but not yet confirmed as resolved.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I want to center the product’s informations on all my product page on mobile and desktop.

Thanks.

1 Like
2

Hi @embracethegrind

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
.product__info-container {
    text-align: center;
    margin: 0 auto;
}
.product-form__input {
    margin: 0 auto;
}
.product-form__buttons {
    margin: 0 auto;
}

image
image1314×594 68.6 KB

image
image406×537 15.1 KB

Note: If you’d like my help with these impliment, feel free to contact me at devcodersp@gmail.com.

3

Capture d’écran 2025-09-01 à 19.33.02
Capture d’écran 2025-09-01 à 19.33.021340×910 16.6 KB

Hi it worked at first but now it is like that can you please correct

1 Like
4

Hi @embracethegrind

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
.product-form__input {
    margin: 0 auto!important;
}

image
image1323×396 80.9 KB

1 Like
5

You can change your settings and customizations through your Online Store-Theme-Customize, and use the left hand Column organizational tools and settings.

If your theme is unable to perform basic functions, such as providing margin settings, you should obtain a better Shopify Theme.

There are many YouTube how-to videos and there are many previous posts here for such questions. You can even use Google Search.