FROM CACHE - en_header
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Some merchants and partners are experiencing problems when logging into their Shopify accounts. We will continue to provide updates to you here.

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
13859 2108 2715

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
13859 2108 2715

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?