How do I remove blank space above 'how to order' button in Debutify theme?

Store Design
, ,

Topic summary

A Debutify theme user seeks to remove unwanted blank space above a “how to order” button on their product page, positioned below the add-to-cart button.

Solutions Provided:

  • CSS targeting: Two CSS rules were suggested to hide empty sections causing the whitespace:

    • .section-description.box.section-border.small--text-left { display: none; }
    • .faq-category-item { display: none; }

  • Alternative approach: Check the Theme Customizer to delete these empty sections directly if they appear as unused elements on the product page.

  • Implementation: Add the CSS code to the theme’s stylesheet (base.css, style.css, or theme.css) via the code editor in Shopify admin.

Caution: One contributor advised against removing padding from .professional-faqs as it may affect visible elements, though this recommendation was questioned.

The original poster confirmed the solution worked successfully.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hey could someone tell me a code to remove the blank space above the “how to order” button, below the add to cart button please?

I’m using the free version of the debutify theme

Thanks!

1 Like
2

You seem to have two different sections there causing some whitespace. You can remove them with the following CSS:

.faq-category-item {
    display: none;
}

.section-description.box.section-border.small--text-left {
    display: none;
}
3

You might also be able to delete them in your Theme Customizer if they are just empty sections that are on your product page.

4

Hi @koozeals

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:

.section-description.box.section-border.small--text-left, .faq-category-item {
    display: none !important;
}
.professional-faqs {
    padding-top: 0px !important;
}

And Save.

Result:

Made4uoRibe_0-1706481503593.png
Made4uoRibe_0-1706481503593.png1878×358 22.9 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

I would avoid removing the padding from professional-faq as that is part of the padding of a visible element.

6

Why we would avoid to remove the padding of the visible element? Please, add a follow up explaination. Thanks!

7

Ah thank you very much!

1 Like