"Add to cart" button, "Qty" input box aligning!

Store Design
, , , , ,

Topic summary

A user needs urgent CSS help to align “Add to Cart” buttons and quantity input boxes before launching their website today, after losing their theme.scss file.

Specific Requirements:

  • Align both elements to the top with proper padding on product cards
  • Apply fixes across:
    • Collection pages (mobile view)
    • Recommended products (mobile and desktop)
    • Price display adjustments in mobile view
  • Add gap between “Add to Cart” button and “Qty” input box in mobile view

Solution Provided:
A support representative from BSS-Commerce offered CSS code to be added to either “base.css” or “theme.css” file through the Shopify theme editor.

The code targets:

  • .product-recommendations__inner product cards with position: relative
  • Product card forms with position: absolute

Screenshots were shared showing the expected results for both recommended products and mobile product card displays. The user was instructed to save the file and refresh their website to see changes.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

Sorry, I have to ask this again after loosing theme.scss file. I am supposed to launch the website today.

I want to align both “add to cart” button and “Qty” input box to the top and add padding to the product cart top/down/ left/right so that I get all produc cards in the following:

1- Collection-Mobile/view

2- Recommended products- Mobile/Desktop

3- In Mobile view: prices to be inside the product card.

4- Prices inside product card-Mobile/view.

5- Add gap between both “add to cart” button and “Qty” input box- Mobile/view

Thank you

allianceautoproducts.com

Alliance_0-1672690887144.png
Alliance_0-1672690887144.png1294×672 226 KB

Screenshot_20230102-232300_Chrome.jpg
Screenshot_20230102-232300_Chrome.jpg1080×1920 149 KB

Thank you

allianceautoproducts.com

2

Hi @Alliance

  1. Go to “Online Store” => “Themes” => “Edit code”, then find the file “base.css”. If you can’t find it, you can find the file “theme.css” and scroll down to use and paste the following code:
.product-recommendations__inner .grid--view-items .grid__item .product-card {
	position: relative !important;
}
.product-card form[action="/cart/add"] {
	position: absolute !important;
}

Then save the file, go back to your website, and refresh.

2. Here is the result:

  • Recommend products:

view (9).png
view (9).png1188×596 189 KB

  • Product card displayed on mobile:

view (10).png
view (10).png322×689 67.8 KB

I hope that it will work for you.