How to align conversion buttons

How to align conversion buttons

hervé_stg
Visitor
2 0 1

Hello, do you know how to align these two buttons horizontally please?

herv_stg_0-1738794823481.png

Website : https://coconbypharell.com/products/cloche-de-lit-1

Thank you !

Replies 4 (4)

JoeCode
Tourist
6 1 1

Hey! The easiest way is to check your theme settings under Online Store > Themes > Customize. Look for layout options in the product page section.

If this doesn't work, let me know and I'll help from there.

 

Hope this helped! If you want to support my work, you can buy me a Red Bull, totally optional, but appreciated! https://joecode.gumroad.com/coffee

Shopify Dev & Liquid Code Wizard.
Check out my custom Shopify snippets to boost conversions → https://joecode.gumroad.com

LizHoang
Shopify Partner
886 105 136

Hi @hervé_stg 

 

You can follow this instruction:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

 

div:has(product-form) {
    position: relative;
}
product-form {
    position: absolute;
    top: -87px;
    left: 160px;
}

 

 

Result: 

 

LizHoang_1-1738806202177.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

LizHoang
Shopify Partner
886 105 136

Hi @hervé_stg, thanks for reaching out. 

 

I checked your request and would like to inform you that you’ll need to adjust the class structure in your theme’s Liquid file and update the CSS accordingly. If you're using a custom theme, I recommend you reach out to your theme developer for assistance because they can adjust the layout directly in the code.

 

I hope my information is helpful to you.

 

Liz

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

Dan-From-Ryviu
Shopify Partner
10939 2148 2286

Hi @hervé_stg 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings. 

.product__info-wrapper div:has(.product-form) {
    max-width: calc(100% - 160px);
    float: right;
    width: 100%;
}
.product__info-container .icon-with-text {
    width: 100%;
}
.product__info-container .product-form__quantity {
    float: left;
}

Screenshot 2025-02-06 at 10.12.46.png

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.