Add to cart collection page alignment

Solved
HassanMakke
Tourist
13 1 7

How can I edit the positioning of number "1" for the quantity, or is there a way to make the size of product variant box the same as the add to cart button

 

Image is in the document attached. 

 

@KetanKumar 

Accepted Solution (1)

Accepted Solutions
DMT-Mike
Shopify Partner
25 6 9

This is an accepted solution.

Personally I prefer it aligned to the left, but if you add this code to the snippet you have just added, it will align centre for you.

.grid-product__wrapper center form #quantity {
    text-align: center;
}

Hope fully this works!

Need expert help with your Shopify Website? Get in touch.

View solution in original post

Replies 8 (8)
DMT-Mike
Shopify Partner
25 6 9

Hi Hassan,

Would it be possible for you to link the web page so I can take a look?

 

Thanks

Need expert help with your Shopify Website? Get in touch.
KetanKumar
Shopify Partner
24945 2501 9043

@HassanMakke 

sorry for any issue can you please share us store url!

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
24945 2501 9043

@HassanMakke 

thanks for your store password protect

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
HassanMakke
Tourist
13 1 7

It is open now. 

DMT-Mike
Shopify Partner
25 6 9

Open your stores dashboard --> Online Store --> Actions --> Edit Code -->

Try adding this snippet to the bottom of the theme.scss file.

 

 

.grid-product__wrapper center form input.btn {
    max-width: 75%;
    width: 100%;
    margin-top: 5px;
}

.grid-product__wrapper center form #quantity {
    max-width: 75%;
    width: 100%;
}

 

 

Let me know if this is what your looking for!

 

NOTE: If you edit any files on your store, I advise that you duplicate the theme before doing so and editing the duplicated theme instead. This will prevent your live site from breaking if something goes wrong.

Need expert help with your Shopify Website? Get in touch.
HassanMakke
Tourist
13 1 7

Thank you for the code. This did change the size of the button as needed. 

However, I still believe it is a bit odd with the number being on the left...

 

Don't you think?

DMT-Mike
Shopify Partner
25 6 9

This is an accepted solution.

Personally I prefer it aligned to the left, but if you add this code to the snippet you have just added, it will align centre for you.

.grid-product__wrapper center form #quantity {
    text-align: center;
}

Hope fully this works!

Need expert help with your Shopify Website? Get in touch.

View solution in original post