How can I center variant selectors in the Dawn theme?

Store Design
1

Hi everyone,

I am using the latest version of Dawn and I am customising it.

I have managed to centralise everything on the product page except the variant selector (the S/M/L buttons). I have managed to centralise the title of the variant but not the actual buttons yet.

Can anyone advise how to do this?

My store URL is password protected and unpublished currently so can not share.

Thanks so much in advance!

Screenshot 2022-04-04 at 12.47.39.png
Screenshot 2022-04-04 at 12.47.39.png744Ă—652 19.6 KB

2

Hi @kcam93

If you add this to the very bottom of your /assets/base.css file using your editor:

variant-radios {
    text-align: center;
}

It’ll center everything as per this example:

2BDigital_0-1649080421256.png
2BDigital_0-1649080421256.png1165Ă—737 171 KB

Hope that helps!

3

Hey,

Thanks so much for your suggestion but it hasn’t worked unfortunately :disappointed_face:

4

Hi @kcam93

Can you share the store password with me perhaps by DM so I can see what’s actually happening and where the styles are being pulled from?

Will be hard to really know why it’s not working without being able to see the code.

5

sure, i will DM now!

6

Hi @kcam93

Thanks for passing those across.

Ok so instead if we edit the assets/section-main-product.css file, if you can find this section (around line 160):

variant-radios,
variant-selects {
  display: block;
}

And add the rule to the bottom of this list between the {} so that it looks like this instead:

variant-radios,
variant-selects {
  display: block;
  text-align: center;
}

You should get the result you’re looking for.

7

It worked!!! Thank you so much you are a star

8

Hi there,

Can you suggest the code and where to place that code in 2023’s current version of the Dawn theme as I can’t locate these files?

9

Hi @kcam93 I have the same issue with sense theme and it doesnt work. Can you help me?