How can I centralize my product page content in the Taste theme?

Store Design
,

Topic summary

A user working with the Taste theme wants to center their product page content while keeping the current layout (product images on the left, description on the right). The default options only allow left-justified content or switching the image position to the right.

Proposed Solutions:

Two support teams offered CSS-based approaches:

  • GemPages: Suggested adding custom code before the </body> tag in the theme.liquid file (specific code appears corrupted/unreadable in the original post)

  • PageFly-Richard: Recommended inserting CSS into section-main-product.css targeting .product.grid and .product__info-wrapper with justify-content: center and max-width: 440px properties

Both solutions require editing theme code files through the Online Store → Theme → Edit code section. The discussion remains open with no confirmation of whether either solution successfully resolved the centering issue.

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

Hello,

I am using TASTE them. I’d like my product page content to be central. Right now they are left justified, and in the customiser the only other option is to have the product images on the right which I don’t want.

Is there a way to keep the layout of images and description as is but just central on the screen?

Site preview link: https://fcq842kp79vais6t-55043031221.shopifypreview.com

Thanks!

2

Hello @Elliott94

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

Hi @Elliott94 ,

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->/section-main-product.css->paste below code at the bottom of the file:

@media screen and (min-width: 999px){
    .product.grid {
        justify-content: center !important;
    }
    .product__info-wrapper {
        max-width: 440px !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly