Solved

Centre Align Product Page Title, selection and buy buttons on Refresh theme

Fardale
Tourist
11 0 3

Hello,

 

Can anyone help me with aligning my title, price, options, add to cart and the buy button  (Desktop shows the buttons to the left) - I am using the Refresh theme 🙂

 

Fardale_1-1678310097674.png

 

 

Accepted Solution (1)

GemPages
Shopify Partner
5625 1262 1282

This is an accepted solution.

Hi @Fardale,

 

Glad to support you today.

 

You can check out my suggestion below to get your concern resolved.

 

1. Go to Edit code on Online Store:

 

GemPages_0-1678331431251.png

 

2. add my code  above the </body> tag on Theme.liquid:

 

<style>

	.product__info-wrapper .product__title, .product__info-wrapper .price {
		text-align: center !important;
	}
	fieldset.product-form__input, .product-form .product-form__buttons {
		margin: 0 auto !important;
		text-align: center !important;
	}
	fieldset.product-form__input .form__label {
		display: block !important;
		width: 100% !important;
	}
</style>

 

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 7 (7)

PageFly-Victor
Shopify Partner
7865 1786 3133

Hi @Fardale ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

GemPages
Shopify Partner
5625 1262 1282

Hi @Fardale,

 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

 

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

GemPages
Shopify Partner
5625 1262 1282

This is an accepted solution.

Hi @Fardale,

 

Glad to support you today.

 

You can check out my suggestion below to get your concern resolved.

 

1. Go to Edit code on Online Store:

 

GemPages_0-1678331431251.png

 

2. add my code  above the </body> tag on Theme.liquid:

 

<style>

	.product__info-wrapper .product__title, .product__info-wrapper .price {
		text-align: center !important;
	}
	fieldset.product-form__input, .product-form .product-form__buttons {
		margin: 0 auto !important;
		text-align: center !important;
	}
	fieldset.product-form__input .form__label {
		display: block !important;
		width: 100% !important;
	}
</style>

 

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Fardale
Tourist
11 0 3

@GemPages That has worked 🙂 thank you so much!

GemPages
Shopify Partner
5625 1262 1282

I do appreciate your compliment! 😁

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Fardale
Tourist
11 0 3

@GemPages is it possible for the 'dropdown' variation picker to also be aligned in the centre?

Fardale_0-1678397640221.png

 

whboutique
Tourist
7 0 1

Can you please include product quantity for this code as well?  Thank you so much in advance.