Adding space BELOW product card and title on my home page for my categories in Debut theme

Shopify Discussion
1

I see ways to do the side space on the photos but I do not see how to add space below the product category photo and title on my home page…can anyone help please. I have been searching and searching. I am sure it is code in the theme but, I am no code guy. lol. Photo for reference. Thank you in advance! Not sure if photo attached well or not. I have all jpg and png and this asks for a CSV format…which I only know as an excel spreadsheet. Sorry

2

Hi @southernyankee

Would you mind to share your store URL? Cant see the photo you attached you can Printscreen and paste.

3

Here is a photo. Thank you for the print screen and paste option… Where the red lines are, I need space between titles and photo underneath.

southernyankee_0-1717523377742.png
southernyankee_0-1717523377742.png1133×635 782 KB

4

Thanks for the info, but I would need the URL of your store or even a preview so can I check with developer tools. Thanks!

5

www.thesouthernyankee.com. The section I posted a photo of is right on the homepage. Just need to be able to get some space between titles and photo below. Thank you.

6

Dear @southernyankee ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_1-1717601493685.png
BSSCommerceB2B_1-1717601493685.png400×195 26.3 KB

Step 2: Search for the file theme.scss.css. And add this code snippet to the end of the file.

.grid__item {
  margin-bottom: 10px;
}

In this step, you can change ‘margin-bottom’ as you want to add space below product card.

In example, I choose ‘10px’.

Step 3: Save your code and reload this page.

=>> The result:

BSSCommerceB2B_3-1717601958369.png
BSSCommerceB2B_3-1717601958369.png1256×776 202 KB

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

Have a nice day sir!

7

Thanks for the info, seems like you change the location. But you used diffrent selector. Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.grid__item {
    padding-bottom: 50px;
}
.collection-grid-item__title-wrapper {
    position: absolute;
    left: 0%;
    width: 100%;
    bottom: -20px;
}

And Save.

Result:

Made4uoRibe_0-1717602393144.png
Made4uoRibe_0-1717602393144.png1302×567 443 KB

Also this collection change it is okay?

Made4uoRibe_1-1717602416673.png
Made4uoRibe_1-1717602416673.png1296×518 353 KB

8

This is exactly all I needed. Worked great and can make simple adjustments to spacing as I need. Thank you.

9

This did work but, it affects the entire page so it was making large space in header too. Just wanted to get the space to the collections. Received the fix below and it worked. I truly do appreciate your time working on this for me as well! Help on here from people like you is extremely helpful and so much appreciated for what you do!

10

Hi @southernyankee ,

We’re happy to see that our suggestion helped you solve the issue.

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Thanks in advance.