Hello, I’m trying to align the variant pills in the center like the add to cart button bellow.
Appreciate if anyone shared the code!
Site url: https://23bc4a.myshopify.com/
/Leon
Topic summary
A user seeks help centering variant pills on their Shopify product page to align with the add-to-cart button below.
Proposed Solutions:
-
CSS file approach: One responder suggests adding
.product-form__input { align: center; }to a theme.css file, though the original poster cannot locate this file in their theme structure. -
theme.liquid modification: PageFly-Victor recommends inserting custom CSS in a
<style>tag before the</body>closing tag in the theme.liquid file. -
base.css approach: ZestardTech provides the most detailed solution: adding CSS to the base.css file under Assets, including mobile-responsive styling with media queries for
.product-form__input,.product__title, and.product-form__buttons.
Current Status:
The discussion remains open with multiple implementation methods offered but no confirmation of which solution worked. Screenshots were shared showing the theme file structure and desired alignment.
Add this code to your theme.css file:
.product-form__input{
align: center;
}
There is no file named theme.css, are you referring to theme.liquid?
No, there should be a general css file. I might be as well called theme.scss
Hi @Leonpojen ,
This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :
Hope my answer will help you.
Best regards,
Victor | PageFly
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset → base.css and paste this at the bottom of the file:
@media screen and (max-width: 767px){
.product-form__input {
text-align: center;
margin: 0 auto;
}
.product__title {
text-align: center;
}
.product-form__buttons {
margin: 0 auto;
}
}
