To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

How to Increase Space Between Products in Featured Collections (Debut Theme)

Solved
prankoyz
Tourist
10 0 0

Hi there!

I've searched as much as I could but didn't see a solution for my problem.

 

URL: https://consistent-home-delivery.myshopify.com/
Theme: Debut
Problem: I added a QTY and Add to Cart button on my featured collections page but now I want to increase the space between the add to cart button and the product not associated with it to avoid confusion. Please see attached picture.

Screenshot 2020-04-15 07.29.02.png

Thank you very much!

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
13765 2096 2691

This is an accepted solution.

Hello ,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.grid__item.grid__item--collection {
    padding-top: 40px !important;
}

 

Add this css for more design:

.grid__item--collection .btn { 
padding-top: 5px;
 }
 .grid__item.grid__item--collection { 
text-align: center;
 }
 .price.price--listing {
 text-align: center; 
align-items: center; 
}
.grid__item--collection #quantity {
    width: 30%!important;
}
If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant

View solution in original post

Replies 5 (5)
oscprofessional
Shopify Partner
13765 2096 2691

This is an accepted solution.

Hello ,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.grid__item.grid__item--collection {
    padding-top: 40px !important;
}

 

Add this css for more design:

.grid__item--collection .btn { 
padding-top: 5px;
 }
 .grid__item.grid__item--collection { 
text-align: center;
 }
 .price.price--listing {
 text-align: center; 
align-items: center; 
}
.grid__item--collection #quantity {
    width: 30%!important;
}
If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant
prankoyz
Tourist
10 0 0

Hi oscprofessional!

Thank you so much for your help! I used the 2nd code and it looks so much better now! 

ompatel001
New Member
1 0 0

Hey! In my Debut Theme, There's no file in the name of "theme.scss.liquid". So I created one & Used these codes but did not work so I deleted the newly created file & unfortunately shop shows blank page now. Please Help 

opticalboutique
New Member
1 0 0

Can you please help me with this?