Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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
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;
}
}
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;
}
}
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;
}
}
This is an accepted solution.
You should be able to access the previous url and password 🙂
This is an accepted solution.
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 -> <div class="product-single__description rte">
This is an accepted solution.
There should be a wrapper div containing these two classes. Something like:
<div class="grid custom-grid">
<div class="grid__item medium-up--one-quarter small--one-quarter">
</div>
<div class="grid__item medium-up--three-quarters small--three-quarters">
</div>
</div>
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 🙂
the password is: 123123
https://www.hofstrawagner.de/collections/plankentische/products/venus-plankebord-smoked-olieret-eget...
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
Thank you very much, it works!
Do you know how I make it inline on phones as well?
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;
}
}
Hi again, It do not seem to work am I doing something wrong?
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;
}
}
Hi again,
Sorry but it is still not working...
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;
}
}
Hi g33kgirl ,
Thank very much for helping 🙂
We are almost there, but it still doesn't look quite right - as you might have figured out, i am not the best coder 🙈
@MariaJensen, can I access the website using the url and password you shared earlier? Or can you share the preview url?
This is an accepted solution.
You should be able to access the previous url and password 🙂
This is an accepted solution.
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 -> <div class="product-single__description rte">
This is an accepted solution.
There should be a wrapper div containing these two classes. Something like:
<div class="grid custom-grid">
<div class="grid__item medium-up--one-quarter small--one-quarter">
</div>
<div class="grid__item medium-up--three-quarters small--three-quarters">
</div>
</div>
Thank you very much for the help, it works now 🙂
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
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024