Align product option in product page in supply theme

Solved
Highlighted
New Member
4 0 0

Hi Everybody,

I would like to know how To align product options in supply theme.

They are all in 3 lines and i would like to align them on 2 lines max.

Size and color on the same line and quantity and add To cart on the same line.

Is it possible ? Thank you

 

0 Likes
Highlighted
Shopify Partner
51 1 4

it is possible, please give me your site url

Please Like and Accept Solution if you like my solution.
Email: inzaghi.2006@yahoo.com
Skype
: freelancer.nguyenthanhtu
0 Likes
Highlighted
Shopify Partner
482 86 133

@Marion7 

 

Will be better if you provide your shop URL.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
New Member
4 0 0
Hi
Thank you for your answer ,my website is https://baeandmee.com
Thank you
0 Likes
Highlighted
Shopify Partner
482 86 133

This is an accepted solution.

@Marion7 

 

For better result there is need to work with actual source and change markup, but this is a solution only css, you can try use my codes below.

Click Actions > Edit Code.

Here find/search for theme.scss.liquid.

Scroll at the very bottom of this file and past the following code there.

.addToCartForm {
	display: flex;
	flex-wrap: wrap;
}

.addToCartForm .selector-wrapper{
	width: 50%;
	min-width: 50%;
	padding-right: 10px;
}

.addToCartForm .selector-wrapper + .selector-wrapper{
	padding-left: 10px;
	padding-right: 0;
}


.addToCartForm .selector-wrapper select{
	max-width: 100%;
}


.addToCartForm .quantity-selector, .addToCartForm .variant-quantity{
	width: 100%;
}

.addToCartForm .payment-buttons{
	margin-top: -105px;
	float: right;
	margin-left: auto;
	width: 70%;
}

 

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
New Member
4 0 0

Thank you soooo much Warhol it works!!!!

I really appreciate your help thank you very much!

0 Likes
Highlighted
New Member
4 0 0

Hi again Warhol, as you already helped me can you help me again please?

I have a problem with white space between product name and price in collection pages , do you know how i could remove it? Thank you

0 Likes
Highlighted
Shopify Partner
482 86 133

@Marion7 

 

What space are you talking about ?

uCTyP7M

 

I don't see any huge white-space here, or I am missing something ?

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
Excursionist
13 1 4

Hi @sarhov 

Thank you for the soultion, I implemented your code and it sort of worked for me. However my 'Quantity' and 'Size' are not lining up like they should. Could you help?

https://q7oqglqo2138w7p3-26678657109.shopifypreview.com

0 Likes