How to center product title, price and color options on a product page?

Store Design
, , , ,
1

Hello,

I want to center the title of the product, the price and the color selector options.

here is a picture for clarity :

1111.JPG
1111.JPG423×853 25.2 KB

Store URL: https://merciane.com/

2

Hi, @MotionStore111 .

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

@media screen and (max-width: 749px) {

div#product-content {
    padding-top: 12px;
}

div#product-content h1.title.mb-3.h3 {
    text-align: center;
}

.product-content .product-price {margin-left: 50px;}

ul.value.g-variant-color-detail {
    margin: 0px auto;
    display: table;
}

.swatch--gl .name-option {
    text-align: center;
}

}

Result:

websensepro_0-1689863330181.png
websensepro_0-1689863330181.png373×557 35 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

1 Like
3

@websensepro

Is there a way to also move the color swatches itself to the center, the label moved but not the swatches itself.