How to align buttons

margo141 · ‎09-25-2024

How to align "add to cart button" , "share" and " wish list" buttons together side by side in Trade version?

I've tried many things, but the button does not want to move(((( Please someone help me

namphan · ‎09-26-2024

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

.product__info-container .st-wishlist-button {
    float: right;
    margin-top: 5px;
}
.product__info-container .product-form {
    max-width: calc(100% - 60px);
}
.product__info-container .product-form .product-form__buttons {
    max-width: 100% !important;
}

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

suyash1 · ‎09-25-2024

@margo141 - I think all of these fields are having separate sections and hence those are not moving, ,ay need code editing

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Dan-From-Ryviu · ‎09-25-2024

Hi @margo141

Please share your store link so I can check

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

margo141 · ‎09-26-2024

https://www.108creations.com/products/christian-fish-ring-powerful-symbol-ring

Dan-From-Ryviu · ‎09-26-2024

Please add this code to theme.liquid file, after <head> in Sale channels > Online Store > Themes > click '...' in current theme > Edit code

<style>
.product #shopify-block-swishlist_simple_wishlist_wishlist_product_button_cgytHr {
float: right;
margin-top: 28px;
}
.product .product-form { max-width: calc(100% - 70px); }
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

margo141 · ‎09-26-2024

Thank you so much, but it did not work out(((

namphan · ‎09-25-2024

Hi @margo141,

Please send me the store link, I will check it for you

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

Viralmint · ‎09-26-2024

Hello @margo141

Please add below css code to theme.css file

div#shopify-block-swishlist_simple_wishlist_wishlist_product_button_cgytHr {
right: 0;
position: absolute;
margin-top: 20px;
}
product-form.product-form {
width: 100%;
position: relative;
margin-top: 15px !important;
max-width: 85%;
}

If you find our reply helpful, please hit Like and Mark it as a Solution.

For custom designs and solutions, feel free to contact us. We offer 360-degree services to help scale your e-commerce brand.

Thank You,
ViralMint Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency| Call Us 91 98903 26596
Location: Pune, Maharashtra, India 411045

margo141 · ‎09-26-2024

Thank you so much, but it worked out only for two products... I do not have a Theme.css file, so I put it in assets/section-main-product.css file and it worked for 2 products. But how can I change the rest of them?

namphan · ‎09-26-2024

Hi @margo141,

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

.product__info-container .st-wishlist-button {
    float: right;
    margin-top: 5px;
}
.product__info-container .product-form {
    max-width: calc(100% - 60px);
}
.product__info-container .product-form .product-form__buttons {
    max-width: 100% !important;
}

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

margo141 · ‎09-26-2024

Thank you so much!!!! it worked out great!!!!!!

Many thanks!!!!!

namphan · ‎09-26-2024

Hi @margo141,

If you have any questions, you can contact me directly at email in signature.

Nice to meet you 😊

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

margo141 · ‎09-26-2024

Thank you so much!! Nice to meet you as well

How to align buttons

How to align buttons

Community Blog Articles