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

Solved
MariaJensen
Tourist
33 2 12

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 -%}
 
  <select name="id" id="ProductSelect-{{ section_id }}" class="product-single__variants no-js">
    {%- for variant in product.variants -%}
      {%- if variant.available -%}
        <option {% if variant == product.selected_or_first_available_variant %}
          selected="selected"{% endif %}
          value="{{ variant.id }}">
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {%- else -%}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {%- endif -%}
    {%- endfor -%}
  </select>
 
 
{% if product.tags contains 'bestilling1' %}
        <div class="red" style="color:green">Forudbestil</div>
{% elsif product.tags contains 'bestilling2' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling3' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling4' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling8' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling10' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling12' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling777' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling14' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling16' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling18' %}
<div class="red" style="color:green">Forudbestil</div>
        {% elsif product.tags contains 'bestilling21' %}
<div class="red" style="color:green">Forudbestil</div>
{% elsif product.available %}
<div class="red" style="color:green">På Lager</div>
       
{% 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 -%}
    <div
      id="ProductInventory-{{ section_id }}"
      class="product__inventory{% unless inventory_visible %} hide{% endunless %}"
      >
      {%- if current_variant.available -%}
        {{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
      {%- endif -%}
    </div>
  {%- endif -%}
 
 
  {%- if settings.inventory_transfers_enable -%}
    <div
      id="ProductIncomingInventory-{{ section_id }}"
      class="product__inventory{% if inventory_visible %} hide{% endif %}">
      {%- 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 -%}
    </div>
  {%- 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 -%}
    <div class="payment-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 -%}
    <div class="product__quantity product__quantity--{{ settings.variant_type }}">
      <label for="Quantity-{{ section_id }}">{{ 'products.product.quantity' | t }}</label>
      {%- render 'quantity-input', id: section_id, qty: 1, min: 1 -%}
    </div>
  {%- 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 %}>
      <span id="AddToCartText-{{ section_id }}" data-default-text="{{ default_text }}">
        {{ button_text }}
      </span>
    </button>
 
 
    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}
 
  {%- if enable_dynamic_buttons -%}
    </div>
  {%- endif -%}
 
  <textarea id="VariantsJson-{{ section_id }}" class="hide" aria-hidden="true" aria-label="Product JSON">
    {{ product.variants | json }}
  </textarea>
  {%- if product.options.size > 1 -%}
    <textarea id="CurrentVariantJson-{{ section_id }}" class="hide" aria-hidden="true" aria-label="Variant JSON">
      {{ current_variant | json }}
    </textarea>
  {%- endif -%}
{%- endform -%}
 
 
I would like to move it up where the red box is - see picture downunder 
tempsnip.png
 
Hope somebody can help - thank you in advance  
 
Best regards 
Maria 
0 Likes
Pallavi
Shopify Expert
1280 174 211

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
MariaJensen
Tourist
33 2 12

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

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

0 Likes
Pallavi
Shopify Expert
1280 174 211

This is an accepted solution.

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
MariaJensen
Tourist
33 2 12

Thank you very much, it works! 

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

Pallavi
Shopify Expert
1280 174 211

This is an accepted solution.

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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
MariaJensen
Tourist
33 2 12

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

 

tempsnip.png

0 Likes
Pallavi
Shopify Expert
1280 174 211

This is an accepted solution.

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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
MariaJensen
Tourist
33 2 12

Hi again,

Sorry but it is still not working... 

0 Likes
g33kgirl
Shopify Partner
223 59 71

This is an accepted solution.

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 -%}
    <div class="payment-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 -%}
    <div class="product__quantity product__quantity--{{ settings.variant_type }}">
      <label for="Quantity-{{ section_id }}">{{ 'products.product.quantity' | t }}</label>
      {%- render 'quantity-input', id: section_id, qty: 1, min: 1 -%}
    </div>
  {%- 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 %}>
      <span id="AddToCartText-{{ section_id }}" data-default-text="{{ default_text }}">
        {{ button_text }}
      </span>
    </button>
 
 
    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}
 
  {%- if enable_dynamic_buttons -%}
    </div>
  {%- endif -%}
 

 

 

with this:

 

{%- if enable_dynamic_buttons -%}
    <div class="custom-grid grid payment-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 -%}
      <div class="grid__item medium-up--one-quarter small--one-quarter">
    <div class="product__quantity product__quantity--{{ settings.variant_type }}">
      <label for="Quantity-{{ section_id }}">{{ 'products.product.quantity' | t }}</label>
      {%- render 'quantity-input', id: section_id, qty: 1, min: 1 -%}
    </div>
      </div>
  {%- endif -%}
 
      <div class="grid__item medium-up--three-quarters small--three-quarters">
    <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 %}>
      <span id="AddToCartText-{{ section_id }}" data-default-text="{{ default_text }}">
        {{ button_text }}
      </span>
    </button>
     
    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}
 
  {%- if enable_dynamic_buttons -%}
         </div>
    </div>
  {%- 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;
}
}

 

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes