Aligning Quantity Selector and Add to Cart Button in One Row (Radiant Theme 15.3.0)

[abdullah__]

Hello! Shopify partners, team members and platform users.

I'm using the Radiant theme and need help adjusting the layout of the product page. Currently, the "Add to Cart" button appears below the quantity selector, but I want to:

1. Move the "Add to Cart" button to the right side of the quantity selector.

2. Increase the width of the quantity selector.

3. Ensure both buttons are the same height and aligned in one row.

4. Keep the "Buy It Now" button below both buttons as it is.

I've attached an image for reference. Can someone guide me on how to achieve this via code or theme settings?

Thanks in advance!

[hudsonjack · Accepted solution]

Hi abdullah__,

To achieve the layout adjustments you're looking for in the Radiant theme, follow these steps:

1. Move the "Add to Cart" button to the right side: You can adjust the CSS for the "Add to Cart" button to position it to the right of the quantity selector. Add the following custom CSS to your theme:

   css

   Copy

   .product-form__quantity { display: inline-block; width: auto; /* Adjust width if needed */ } .product-form__add-to-cart { display: inline-block; margin-left: 10px; /* Adds space between the quantity and the button */ }

2. Increase the width of the quantity selector: To increase the width of the quantity selector, use this CSS:

   css

   Copy

   .product-form__quantity input { width: 60px; /* Adjust the width as needed */ }

3. Align both buttons in one row: To ensure both the quantity selector and the "Add to Cart" button are aligned in one row, you can add this CSS:

   css

   Copy

   .product-form__controls { display: flex; align-items: center; }

4. Keep the "Buy It Now" button below: This button is already styled by the theme, but you can ensure it stays below by confirming no conflicting styles. If needed, add:

   css

   Copy

   .product-form__buy-it-now { margin-top: 10px; /* Adjust margin if necessary */ }

After applying the changes, make sure to check how it looks on both desktop and mobile. You may need to tweak the CSS slightly for mobile responsiveness.

Let me know if you need further help!

[abdullah__]

Thank you for your help! I really appreciate your insights and the time you took to answer my query. Your response clarified a lot for me!

[Dan-From-Ryviu]

Hi @abdullah__ 

Could you share the link to your product page so I can provide the code to do your request? 

[abdullah__]

Sure! Here's my store link:

Store, https://www.careandcoofficial.com/

Product page, https://www.careandcoofficial.com/products/care-co%E2%84%A2-fingerprint-intelligent-lock-anti-theft-...

I'll be really grateful for this precious time spent for me 🙏.

[Dan-From-Ryviu]

Hi @abdullah__ 

Please go to store admin > Sales channels > Online Store > Themes > Customize > click settings icon > Custom CSS, add this code and save

.product button.product-form__submit {
    margin-top: -74PX;
    max-width: calc(100% - 160px);
    float: right;
}

[abdullah__]

One Of The Great and Clear Solutions!

Hey Dan-From-Ryviu

I just wanted to personally thank you for your help and the code you shared. It worked perfectly, and I really appreciate the time you took to guide me in fixing the issue with keeping the "Add to Cart" button in one row with the quantity selector.

Here's the results:

 

Your support means a lot—thanks again for your kindness and expertise!

Best regards,

ABDULLAH