How to remove the white space in Studio theme above the collection section

Store Design
,
1

Hi! I am using the studio theme and there is a white space above the collection section in the home page, and would like to get rid off it, can anyone help on this issue? much appreciated!

Screenshot 2024-10-22 at 11.04.35 PM.png
Screenshot 2024-10-22 at 11.04.35 PM.png2850×408 28 KB

The view link is https://yuugymiapalqoq14-62370709619.shopifypreview.com please let me know if the link is not openable. Thank you.

2

Hello @Puchi
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-slider.css
add this code at the end of the file.

#Slider-template--16533159182451__featured-collection {
margin-bottom: 0rem;
}

result

28.png
28.png1257×636 282 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

Hey @Puchi

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1729661203869.png
Moeed_0-1729661203869.png940×856 344 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Step-by-Step Guide:

  1. Go to Shopify Admin:

Log into your Shopify account and navigate to your admin dashboard.

  1. Edit the Theme Code:

In the left sidebar, click on Online Store > Themes. Find the Studio theme and click on Actions > Edit Code.

  1. Locate the CSS or Theme File:

In the code editor, find the Assets folder and look for the CSS file (usually named theme.css, style.css, or base.css). Open this file to edit the theme’s styling.

  1. Modify Padding or Margin:

Search for any CSS classes that control the padding or margin for the collection section. Specifically, look for sections like .collection-section, .section-header, or similar container classes that might be adding extra white space. You can use Ctrl + F (or Cmd + F on Mac) to search for “padding” or “margin” in the code.

For example, you might find something like this:

.collection-section {

padding-top: 50px;

}

Reduce or remove the padding by setting it to 0px:

.collection-section {

padding-top: 0px;

}

  1. Save and Preview:

After making the changes, click Save in the upper-right corner. Preview your store to check if the white space has been removed.

  1. Check Theme Settings (Optional):

Some themes may allow you to control padding or margin directly from the Theme Editor under Customize. Look for options in the collection or layout sections that let you adjust the spacing.

By following these steps, you should be able to remove or adjust the white space above the collection section in your Shopify Studio theme. Let me know if you need more specific assistance with the code!

This version should now be accepted in the Shopify Community without the issue. Let me know if it works!