How can I align the qty and add to cart button under my products?

[lediaz]

Hi everybody

I was able to add the qty and add to cart button to my theme (minimal) on my collection pages however it is looking misaligned. How can I fix that to show a smaller qty/add to cart button under each product. See the picture attached and also a preview of my site.

https://u8rpd02fxwxqxrhc-58840252566.shopifypreview.com

Any help will be greatly appreciated.

[KetanKumar]

@lediaz

sorry but your have add wrong place code please add below price

[lediaz]

Hi KetanKumar thank you for the quick response.

Can you please point me in what line should I place the code?

{% unless grid_item_width %}
{% assign grid_item_width = ‘medium-up–one-third small–one-half’ %}
{% endunless %}

{% unless current_collection == blank %}
{% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = ‘products.product.sale’ | t %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = ‘products.product.sold_out’ | t %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}

{%- assign img_url = product.featured_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{% unless product.featured_image == blank %}

{% else %} {% endunless %}

{{ product.title }}

{% if section.settings.vendor_show %}

{{ product.vendor }}

{% endif %}

{% if product.compare_at_price > product.price %} {% if product.price_varies %} {% assign sale_price = product.price | money_with_currency %} {{ 'products.product.on_sale_from_html' | t: price: sale_price }} {% else %} {{ 'products.product.sale_price' | t }} {{ product.price | money_with_currency }} {% endif %}

{% else %}

{% if product.price_varies %} {% assign price = product.price | money_with_currency %} {{ 'products.product.from_text_html' | t: price: price }} {% else %} {{ 'products.product.regular_price' | t }} {{ product.price | money_with_currency }} {% endif %}

{% endif %}

{% if product.compare_at_price > product.price %}
{{ ‘products.product.regular_price’ | t }}
{{ product.compare_at_price | money_with_currency }}
{% endif %}

{% if on_sale %}
{{ ‘products.product.on_sale’ | t }}
{% endif %}

{% comment %}
{% if sold_out %}
{{ ‘products.product.sold_out’ | t }}
{% endif %}
{% endcomment %}

{% if sold_out %}
— {{ ‘products.product.sold_out’ | t }}
{% endif %}

{% if product.price_varies == false %}
{% include ‘product-unit-price’, variant: product.selected_or_first_available_variant %}
{% endif %}

[lediaz]

I was able to find the right location to insert the code.

I copied it under this line: {{ product.compare_at_price | money_with_currency }}

Now I would like to make the quantity box and add to cart button smaller, any ideas on how to change the size of them?

Thanks in advance.

[KetanKumar]

@lediaz

can you please share store url

[lediaz]

For reducing the qty box and the ATC button I copied/pasted this code on the bottom of theme.scss.liquid

input.btn {
padding: 6px 8px;
}
input#quantity {
max-width: 20%;
}

play with the numbers to make it the size you want.

Hope this helps.