debut theme/put quantity selector and add to cart on the same line

Calisto
New Member
8 0 0

hi,

how can i put the quantity selector and add to cart on the same line in debut theme?

 

now, it looks like this

Screenshot 2024-04-04 at 06.05.04.png

i would like to have the following result

Screenshot 2024-04-04 at 06.06.09.png

 thanks

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
7678 1493 1496

Hi @Calisto 

Could you share your store URL so I can check and give you the solution?

 

Best Regards,

Dan from Ryviu

 

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Calisto
New Member
8 0 0

hi,

 

thanks for your help.  

https://www.laboutiquedecalisto.com/

Aishamushtaq03
Tourist
10 0 3

To display the quantity selector and "Add to Cart" button on the same line in the Debut theme:

1. Go to "Online Store" > "Themes" in your Shopify Admin.
2. Click "Actions" > "Edit code" for the Debut theme.
3. Locate the product template file (usually `product.liquid`).
4. Find the code for the quantity selector and "Add to Cart" button.
5. Adjust the HTML/CSS to display both elements on the same line.
6. Save your changes and preview the theme.

Calisto
New Member
8 0 0

Sorry , i am not good at the code edit. I just copy the code here, please tell me what i should change. Thank you

 


{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
<script type="application/json" id="ModelJson-{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
{% endunless %}

<div id="backToCollection"></div>

<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// cartcart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
};