Hi,
I want to place Quantity selector next to Add to Cart. I use Trade theme for my store.
My current store
The View that I’m expecting
Store link: https://shinsoku.myshopify.com/
Topic summary
A user seeks to reposition the quantity selector next to the “Add to Cart” button on their product page using the Trade theme.
Current Issue:
- The quantity selector appears above the Add to Cart button
- User wants them side-by-side horizontally
Solutions Proposed:
Two support representatives (HDL-Shin and BSSCommerce-B2B) provided CSS and JavaScript solutions:
- HDL-Shin’s approach: Modify base.css/theme.css with custom CSS to adjust margins and positioning
- BSSCommerce-B2B’s approach: Add JavaScript to theme.liquid plus CSS modifications to base.css
Current Status:
- Initial attempts created new problems:
- Quantity selector didn’t move to desired position
- Buy button and Add to Cart button became different sizes
- HDL-Shin offered to review the storefront directly and provide a tailored solution
- BSSCommerce-B2B provided updated script code as a follow-up
- Discussion remains ongoing with troubleshooting in progress
The conversation includes multiple code snippets and screenshots demonstrating the implementation steps.
1 Like
Hi @shin1106 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css or theme.css
Step 3: Insert the below code at the bottom of the file → Save
.product-form:has(form[data-type="add-to-cart-form"]) .product-form__submit {
margin-top: 25px;
margin-left: 10px;
}
.shopify-payment-button .shopify-payment-button__button--unbranded:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover:not([disabled]) {
background-color: #da3f3f !important;
color: #ffff !important;
}
Step 4: Search file theme.liquid and Insert the below code at the bottom of the file → Save
{% if template.name == 'product' %}
{% endif %}
Final Result:
Hope this can help you
Kind regards,
HDL-Shin
Hi @shin1106 , You can try follow my instructions.
- Step 1: Sale channel => Online Store => Themes => Edit code:
- Step 2: Search for theme.liquid add the script directive to the end of this file
- Step 3: Search for base.css and add the css directive to the end of this file:
[id^='Quantity-Form']:has(.price-per-item__container) {
max-width: 100% !important;
}
.product-form__submit {
margin-bottom: 0 !important;
}
result:
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
Have a nice day sir!
Tried this. The Quantity Selector is in the same position. It has not shifted next to Add to Cart
Tried this, Now the Buy button and add to cart are not of same size
Hi @shin1106 , Let’s try my code again and i’ll go to your storefront. After i’ll give the solution for “Buy button and add to cart are not of same size”
Sure
1 Like
Hi @shin1106
In theme.liquid, replace the script code above with this code as follows:
I hope these instructions will help you. Have a nice day sir!