Hello, how can I align the variant selector and the “add to cart” buttons on the same line like on the Supreme website ? Thanks in advance
Topic summary
A user wants to align the variant selector and “add to cart” button on the same horizontal line on their product page, similar to Supreme’s mobile website layout.
Current Situation:
- The user’s site (kobi-taow.com) has these elements in separate sections
- They provided Supreme’s product page as a reference example
- An image shows the desired layout with both elements side-by-side
Proposed Solutions:
Two developers noted this requires code modifications beyond simple CSS:
- One explained the buttons are in completely separate sections and would need structural HTML changes plus CSS
- Another offered a CSS-only workaround using custom code
Provided Fix:
A complete CSS solution was shared that:
- Targets screens wider than 769px (desktop)
- Adjusts the product form width to 50%
- Floats it right with negative margins to align with the variant selector
- Sets maximum widths to 100% for proper display
- Should be added to the theme’s CSS file (base.css/theme.css/style.css/main.css/custom.css)
The discussion remains open with no confirmation if the solution was implemented successfully.
2 Likes
@advm021 Can you please share this page link?
1 Like
That’s the Supreme website which I’m taking inspiration from and that’s the link of the product. I would like my product page to be like the mobile version of this product page : https://us.supreme.com/products/piergsjyefgd0y-7
My website is www.kobi-taow.com
1 Like
@advm021 - you will need to edit code for this, if you are not familiar with the coding then you will need a developer.
Those 2 buttons are completely separate sections
1 Like
Hello @advm021
We need to place both of them in the same div. This cannot be done with CSS alone; we will have to change the structure first and then use CSS. For that, I will need access to the store.
1 Like
Hi @advm021 ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
@media (min-width: 769px){
.product-form__input.product-form__input--dropdown {
width: 100% !important;
}
.product-form__input, .product-form__input .select {
max-width: 100% !important;
}
form#product-form-template--23952919920927__main {
width: 50% !important;
float: right;
margin-top: -74px !important;
margin-right: -45px;
}
.product__info-wrapper .product-form .product-form__buttons {
max-width: 100% !important;
}
}
1 Like