Center ALL Product Page Buttons | Dawn Theme [PLEASE HELP]

Shopify Discussion

Topic summary

A user is attempting to center various elements on their Shopify product page using the Dawn theme, specifically the variant picker, add to cart button, and Shop Pay button.

Resolution Progress:

  • GemPages Support provided CSS code to center the buttons, which successfully resolved the initial issue
  • The user then requested help narrowing product title widths without affecting product spacing
  • PageFly-Richard supplied CSS targeting .product-grid .card__information .card__heading with max-width: 200px and margin: 0 auto, which worked as intended

Current Request:
The user now wants to shift the entire product page content (product images, size chart, etc.) to achieve visual centering rather than mathematical centering, excluding the header. PageFly-Richard has provided additional CSS code targeting .thumbnail-slider--tablet-up .thumbnail-list with justify-content: center as a potential solution.

Status: Ongoing troubleshooting with iterative CSS adjustments being tested.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

I’ve literally been trying all morning to center these buttons. It isn’t working.

I want to center product variant picker (size picker), and the add to cart & shop pay buttons.

grimworld_0-1676840233661.png
grimworld_0-1676840233661.png1364×618 177 KB

SITE LINK

PASS: ‘tonythetiger’

2

Hello @grimworld ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1676868625048.png
GemPages_0-1676868625048.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

3

Yes, it worked!

I have another question though.

How can I make the width of these titles smaller?

The red box is the existing width, and I’m wanting to make it more like the green. How can I make the words wrap differently or tighter so the titles aren’t as wide?

I want the titles to change without the actual product spacing to change, too.

image.png
image.png957×467 123 KB

4

Hi @grimworld ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-price.css->paste below code at the bottom of the file:

.product-grid .card__information .card__heading {
    max-width: 200px;
    margin: 0 auto;
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like
5

The code worked perfectly! Now i’m trying to make the entire product page visually centered and not mathematically/literally centered.

grimworld_0-1676922982112.png
grimworld_0-1676922982112.png1337×691 57.1 KB

I want to shift everything besides the header over. So the product images, size chart, basically that entire div. But I’m not sure what the div/section is called. The inspect element panel just labels it as ‘shopify-section-template–16675809394903__main’ which is not the actual class name.

6

Hi @grimworld ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

.thumbnail-slider .thumbnail-list.slider--tablet-up {
    justify-content: center;
}

PageFlyRichard_0-1676990701703.png
PageFlyRichard_0-1676990701703.png966×551 73.5 KB

I hope it would help you
Best regards,

Richard | PageFly