Impulse theme: Moving add to cart to same line as quantity

Hi,
Can anybody help with move the add to cart up the quantity field? I am using the impulse Theme.

The code look like this and is from snippets/product-form.liquid - Maybe I am not in the right code?

{%- capture form_id -%}AddToCartForm-{{ section_id }}{%- endcapture -%}
{%- form ‘product’, product, id: form_id, class: ‘product-single__form’ -%}
{%- unless product.has_only_default_variant -%}
{%- for option in product.options_with_values -%}
{%- liquid
if settings.product_color_swatches
assign is_color = false
assign color_option_index = 0
assign swatch_trigger = ‘products.general.color_swatch_trigger’ | t | downcase
assign color_option_index = forloop.index0
assign downcased_option = option.name | downcase
if downcased_option contains swatch_trigger
assign is_color = true
elsif swatch_trigger == ‘color’ and downcased_option contains ‘colour’
assign is_color = true
endif
endif
-%}

{%- if settings.variant_type == ‘button’ -%}
{%- render ‘variant-button’,
section_id: section_id,
option: option,
forloop: forloop,
is_color: is_color,
color_option_index: color_option_index
-%}
{%- else -%}
{%- render ‘variant-dropdown’,
section_id: section_id,
option: option,
forloop: forloop
-%}
{%- endif -%}
{%- endfor -%}
{%- endunless -%}

{% if product.tags contains ‘bestilling1’ %}

Forudbestil
{% elsif product.tags contains 'bestilling2' %}
Forudbestil
{% elsif product.tags contains 'bestilling3' %}
Forudbestil
{% elsif product.tags contains 'bestilling4' %}
Forudbestil
{% elsif product.tags contains 'bestilling8' %}
Forudbestil
{% elsif product.tags contains 'bestilling10' %}
Forudbestil
{% elsif product.tags contains 'bestilling12' %}
Forudbestil
{% elsif product.tags contains 'bestilling777' %}
Forudbestil
{% elsif product.tags contains 'bestilling14' %}
Forudbestil
{% elsif product.tags contains 'bestilling16' %}
Forudbestil
{% elsif product.tags contains 'bestilling18' %}
Forudbestil
{% elsif product.tags contains 'bestilling21' %}
Forudbestil
{% elsif product.available %}
På Lager

{% endif %}

{%- assign inventory_visible = true -%}
{%- if settings.inventory_enable and current_variant.inventory_management == ‘shopify’ -%}
{%- if current_variant.inventory_quantity <= settings.inventory_threshold and current_variant.inventory_quantity >= 0 -%}
{%- assign inventory_visible = true -%}
{%- endif -%}
{%- endif -%}

{%- liquid
if current_variant.inventory_quantity == 0 or current_variant.inventory_policy == ‘continue’
assign inventory_visible = false
endif

assign show_incoming = false
if current_variant.incoming and inventory_visible == false and current_variant.inventory_quantity <= settings.inventory_threshold
assign show_incoming = true
endif
-%}

{%- if settings.inventory_enable -%}

{%- if current_variant.available -%} {{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }} {%- endif -%}
{%- endif -%}

{%- if settings.inventory_transfers_enable -%}

{%- if show_incoming == true -%} {%- if current_variant.next_incoming_date -%} {%- assign date = current_variant.next_incoming_date | date: format: 'date' -%} {%- if current_variant.available -%} {{ 'products.product.will_not_ship_until' | t: date: date }} {%- else -%} {{ 'products.product.will_be_in_stock_after' | t: date: date }} {%- endif -%} {%- else -%} {{ 'products.product.waiting_for_stock' | t }} {%- endif -%} {%- endif -%}
{%- endif -%}

{%- liquid
assign enable_dynamic_buttons = false
if settings.enable_payment_button and template != ‘product.preorder’
assign enable_dynamic_buttons = true
endif
-%}

{%- if enable_dynamic_buttons -%}

{%- endif -%}

{%- liquid
assign default_text = ‘products.product.add_to_cart’ | t
assign button_text = ‘products.product.add_to_cart’ | t
if template == ‘product.preorder’
assign default_text = ‘products.product.preorder’ | t
assign button_text = ‘products.product.preorder’ | t
endif
unless current_variant.available
assign button_text = ‘products.product.sold_out’ | t
endunless
-%}

{%- if settings.quantity_enable -%}

{{ 'products.product.quantity' | t }} {%- render 'quantity-input', id: section_id, qty: 1, min: 1 -%}
{%- endif -%}

<button
{% if product.empty? %}type=“button”{% else %}type=“submit”{% endif %}
name=“add”
id=“AddToCart-{{ section_id }}”
class=“btn btn–full add-to-cart{% if enable_dynamic_buttons and product.selling_plan_groups == empty %} btn–secondary{% endif %}”
{% unless current_variant.available %} disabled=“disabled”{% endunless %}>

{{ button_text }}

{%- if enable_dynamic_buttons -%}
{{ form | payment_button }}
{%- endif -%}

{%- if enable_dynamic_buttons -%}

{%- endif -%} {{ product.variants | json }}

{%- if product.options.size > 1 -%}

{{ current_variant | json }}

{%- endif -%}
{%- endform -%}

I would like to move it up where the red box is - see picture downunder

Hope somebody can help - thank you in advance :slightly_smiling_face:

Best regards
Maria

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Hi Pallavi,
Here you go - our site site not done at all so am sending you to a productpage :slightly_smiling_face:

the password is: 123123
https://www.hofstrawagner.de/collections/plankentische/products/venus-plankebord-smoked-olieret-egetrae-140-cm

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.product__quantity.product__quantity--button {
display: inline!important;
}

.btn--full {
width: 85%!important;
padding: 9px 20px!important;
}

Screenshot :- https://prnt.sc/11spgye

Thank you very much, it works!

Do you know how I make it inline on phones as well?

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
@media only screen and (min-width: 597px){
.product__quantity.product__quantity--button {
display: inline!important;
}

.btn--full {
width: 85%!important;
padding: 9px 20px!important;
}
}

Hi again, It do not seem to work am I doing something wrong?

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

Remove all old css and add this one please

@media only screen and (min-width: 597px){

.product__quantity.product__quantity--button {
display: inline!important;
}

.btn--full {
width: 85%!important;
padding: 9px 20px!important;
}
}
@media only screen and (max-width: 597px){
.product__quantity.product__quantity--button {
float: left!important;
display: inline!important;
}
.btn--full {
width: 72%!important;
transition: none;
padding: 10px 17px!important;
display: inline!important;
margin-top: 27px!important;
}
}

@media only screen and (max-width: 438px){
.product__quantity.product__quantity--button {
float: inherit!important;
display: inline!important;
}
.btn--full {
width: 100%!important;
transition: none;
padding: 10px 17px!important;
display: inline!important;
margin-top: 15px!important;
}
}

Hi again,

Sorry but it is still not working…

It’s better to use Impulse’s code structure rather than mess it up with !important tags and fixed sizes.

Replace this part of the code in snippets/product-form.liquid:

{%- if enable_dynamic_buttons -%}
    
  {%- endif -%}
 
    {%- liquid
      assign default_text = 'products.product.add_to_cart' | t
      assign button_text = 'products.product.add_to_cart' | t
      if template == 'product.preorder'
        assign default_text = 'products.product.preorder' | t
        assign button_text = 'products.product.preorder' | t
      endif
      unless current_variant.available
        assign button_text = 'products.product.sold_out' | t
      endunless
    -%}
      
      
  {%- if settings.quantity_enable -%}
    

      
      {%- render 'quantity-input', id: section_id, qty: 1, min: 1 -%}
    

  {%- endif -%}
 
    
 
 
    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}
 
  {%- if enable_dynamic_buttons -%}
    

  {%- endif -%}

with this:

{%- if enable_dynamic_buttons -%}
    
  {%- endif -%}
 
    {%- liquid
      assign default_text = 'products.product.add_to_cart' | t
      assign button_text = 'products.product.add_to_cart' | t
      if template == 'product.preorder'
        assign default_text = 'products.product.preorder' | t
        assign button_text = 'products.product.preorder' | t
      endif
      unless current_variant.available
        assign button_text = 'products.product.sold_out' | t
      endunless
    -%}
      
      
  {%- if settings.quantity_enable -%}
      

    

      
      {%- render 'quantity-input', id: section_id, qty: 1, min: 1 -%}
    

      

  {%- endif -%}
 
      
    
     
    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}
 
  {%- if enable_dynamic_buttons -%}
         

    

  {%- endif -%}

And in your themes.css.liquid file, add this code to the bottom of the file:

.custom-grid {
  display: flex;
  flex-direction: row;
}

.custom-grid .grid__item:nth-child(2){
  margin-top: auto;
  margin-bottom: 30px;
}

@media only screen and (max-width: 768px) {

.custom-grid .grid__item:nth-child(2){
  margin-bottom: 15px;
}
}

Hi g33kgirl ,

Thank very much for helping :slightly_smiling_face:

We are almost there, but it still doesn’t look quite right - as you might have figured out, i am not the best coder :see_no_evil_monkey:

@MariaJensen , can I access the website using the url and password you shared earlier? Or can you share the preview url?

You should be able to access the previous url and password :slightly_smiling_face:

I see you have added class grid__item medium-up–one-quarter and grid__item medium-up–three-quarters to the two divs which is correct but I cannot see the div wrapper with classes grid custom-grid wrapping these 2 divs?

Also, do you want the description right under the Add to Cart button? If not, I suggest, closing the second div before this div →

Screenshot 2021-04-22 at 9.29.12 am.png

There should be a wrapper div containing these two classes. Something like:


Thank you very much for the help, it works now :slightly_smiling_face:

Hello, my theme Impulse , I try to put that codes, but nothing happening my website is dehome.co.uk Theme Impulse, thanks for the help.

doesn’t work for me either