How to center varient picker and product title

Store Design
1

Site https://zme5mhfrt2d9tsyh-66962194658.shopifypreview.com/products_preview?preview_key=1e308c8e2d776cde53558a2704def50f

pass: BOBS

b0cf6568-69bb-479a-9f0e-98fb05c73afa.png
b0cf6568-69bb-479a-9f0e-98fb05c73afa.png407×1085 28.2 KB

1 Like
2

Hi @AMOB ,

I understand you want to center the product title and the variant options. You can achieve this by following the instructions below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
.product__title {
    text-align: center;
}

variant-selects.no-js-hidden {
    display: flex;
    flex-direction: column;
    align-items: center;
}
3

did not work

4

Hi @Zotic

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

  • Go to Online Store->Theme->Edit code theme.liquid paste my code before element
@media(max-width:767px){ .product__title { text-align: center; } variant-selects.no-js-hidden { display: flex; flex-direction: column; align-items: center; } }

PageFly_0-1665632725110.png
PageFly_0-1665632725110.png319×561 14.7 KB

Hope my solution works perfectly for you!

Best Regards;

PageFly