Hello:
I can’t get a response from Debutify whose theme I am using, and want to modify the code to do two things:
- I want to be able to more accurately control the padding above and below the header section on a Collections page. Specifically, I want to tighten up the space between the page title/header and the navigation bar above that, as well as significantly reduce the massive blank space below the Collection description and the beginning of the product list below that.
- I want to change the font in the header navigation bar WITHOUT changing any other fonts anywhere else on the shop.
Appreciate any help! I’ve tried a lot of suggestions I found on Google from this community, but none have worked. I am comfortable editing the liquid files, as I have successfully implemented a few other suggestions for modifying other parts of my store.
Hi @PRINTED4U ,
May I know your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?
Best regards,
GemPages Support Team
Hi there. My store is www.printed4u.art <>, or printed4uart.myshopify.com <>. It is live and there is no password.
Thanks!
Hello @PRINTED4U ,
I would like to give you some recommendations to support you.
Please go to Online Store > Themes > click 3 dots button > Edit code > Theme.liquid and add code above the tag on the file Theme.liquid.
*Note: In my code, you can replace the number 0 with another number you want to reduce or increase space. The code font-family: cursive !important you can replace cursive with another name font you want.
I hope you find the answer helpful. If you need further support, do not hesitate to reach out to us 
.
Kind & Best regards,
GemPages Support Team.
That’s much better! However, it seems to create a light purple box around every other list item. That wasn’t there before. It also makes the left alignment inconsistent.
Also, I figured out how to adjust the header margin/padding on the actual product page (left arrow on second screen shot), but can’t figure out using the Google Inspector how to adjust the product title so it aligns with the photo (right arrow on second screen shot). Can you help with that, too?
Thank you!
Hi @PRINTED4U ,
May you share some screenshot on Product page? I will rely on that and edit according to your request .
Kind & Best regards,
GemPages Support Team.
Hi!
I’m not sure if this is the info you’re looking for, but here is a screenshot of a sample product page. As you can see, the product title is well below the top margin of the product photo. I know the product info is in a scrolling container, but if it’s possible to have the default position be lined up with the photo before a user starts scrolling that container that would be preferable. I have some custom code to adjust the spacing between the breadcrumb bar and the product photo, but adjusting that value also adjusts the product description. So, if I add or subtract space above the photo the title and description also moves.
Regarding the code below, what parts of it can be removed that deals with font adjustment now that I decided to just use the Shopify settings for menus and buttons to adjust the menu font? I want to keep anything below having to do with the spacing issue I had for the header on a Collection page, but don’t need the font code any more.
@media(min-width: 769.1px) { body.template-collection #CollectionSection .box { padding-top: 0px !important } } body.template-collection #CollectionSection .box .collection-filters { margin-bottom: 0px !important } #shopify-section-header .header-wrapper .inner-nav-containers .site-nav__link, #shopify-section-drawer-menu .drawer__header .drawer__title, #shopify-section-drawer-menu .drawer__inner-section ul li a.mobile-nav__link { font-family: cursive !important; }
Lastly, if you have any ideas on why no products show up when a Collection is set to “Grid” I’d love to hear them. I can’t experiment with whether I prefer the list view or the grid view because nothing but the product text and description shows up when I select “Grid”.
Thank you so much for all of your help!
Brian
Hello @PRINTED4U ,
I checked on the product page and found title is well below the top margin of the product photo is due this section contains info product have margin top.
And this code is make custom font header:
Now, if you want to remove space on the Collection and Product page and don’t want keep custom font, I update the new code for you:
I hope you find the answer helpful.
Kind & Best regards,
GemPages Support Team.
