Centre theme block for product on Impulse Theme

Hey there!

I am needing help centring two blocks on my Shopify product page please :).

  1. Centring multiple variants for a product on desktop. They are aligning to the left and won’t centre like the other blocks.

  2. Centring a ‘text’ block with a linked dynamic source for ‘date and time’.

Thank you so much!

1 Like

Hi @Sydonie_Baldiss

If you share your store URL and password with me, I will check and provide you with the solution.

@Sydonie_Baldiss Please go to the “Online Store” → “Themes”. Click action button from the currently applied theme and select “Edit code”.

  1. Go to “theme.css” file and then paste below at the bottom of the file. The below code is to center both the variants block and quantity block.
.variant-wrapper, .product__quantity {
    text-align: center;
}

Result will be,

Date and time section is not displaying in the product page. If you displayed the block specific to some regions, please share that region to check and provide solution.

Please let me know whether it works and reach out to me if any other help is needed..


If you are pleased with my solution, kindly show your appreciation by liking it :+1: and designating it as the accepted solution :check_mark: . Your endorsement fuels my dedication to excellence :blush: .

1 Like

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag


Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

Thank you so much! It’s working exactly how I need now.

As for the date and time, I have added that back to the product page for this product. It should now be displaying so you can see the coding for it. It is still aligning to the left. Any help would be appreciated :slightly_smiling_face:

@Sydonie_Baldiss Please add below code in the “theme.css” file at bottom. It will center the date block.

.page-content--product .product-block {
    text-align: center;
}

Result will be,

Please let me know whether it works. Reach out to me for any queries in the future.


If you are pleased with my solution, kindly show your appreciation by liking it :+1: and designating it as the accepted solution :check_mark: . Your endorsement fuels my dedication to excellence :blush: .

1 Like