Re: remove spacing

Solved

remove spacing

manan123
Pathfinder
179 1 23

hii im using dawn theme i want to remove this space please help me with code, reference image is also attached

 

Website link : https://mansaroverfurnishings.com/

 

Current :

manan123_0-1725964701787.png

 

Reference image:

manan123_1-1725964742027.png

 

 

Accepted Solutions (10)

Moeed
Shopify Partner
6292 1711 2056

This is an accepted solution.

Hey @manan123 

 

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 </body> tag

<style>
.section-header {
    margin-bottom: 10px !important;
}
</style>

RESULT:

Moeed_0-1725965269712.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Create high-converting pages - PageFly Page Builder.


View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @manan123

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
div#shopify-section-sections--17420665323567__header {
    margin-bottom: 10px !important;
}
</style>

Here is result: 

BSSCommerceHDL_0-1725965284019.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Tech_Coding
Shopify Partner
413 108 98

This is an accepted solution.

Hello @manan123 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
  .shopify-section-group-header-group.section-header {
       margin-bottom: 0 !important;
   }
</style>

Tech_Coding_0-1725965502989.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Rahul_dhiman
Shopify Partner
656 127 132

This is an accepted solution.

Hello @manan123 

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: 20px !important;
}
}

result
2.png

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @manan123

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

<style>
summary.header__icon.header__icon--search {
    position: absolute !important;
    left: 5%;
    top: 20%;
}
</style>

 

Here is result: 

BSSCommerceHDL_0-1725971014941.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @manan123, Pls replace my old code to this new code:

<style>
@media only screen and (min-width: 990px) {
summary.header__icon.header__icon--search {
    position: absolute !important;
    left: 5%;
    top: 20%;
}
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Tech_Coding
Shopify Partner
413 108 98

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
   summary.header__icon.header__icon--search {
     position: absolute !important;
     left: 5%;
     top: 20%;
   }
}
  .search-modal.modal__content.gradient {
     background: #fff !important;
   }
   input#Search-In-Modal, div#predictive-search-option-search-keywords {
      background: #fff !important;
   }
</style>

Tech_Coding_0-1725973839266.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @manan123

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.predictive-search__results-groups-wrapper {
    background-color: #ffff !important;
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Tech_Coding
Shopify Partner
413 108 98

This is an accepted solution.

Add this code also

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .predictive-search {
    background: #fff !important;
  }
</style>

Tech_Coding_0-1725975169445.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Tech_Coding
Shopify Partner
413 108 98

This is an accepted solution.

Replace this code:

.search-modal.modal__content.gradient {
     background: #fff !important;
   }
   input#Search-In-Modal, div#predictive-search-option-search-keywords {
      background: #fff !important;
   }

   .predictive-search {
      background: #fff !important;
  }

With this code:

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
{% if template.name == 'index' %}
<style>
.search-modal.modal__content.gradient {
background: #fff !important;
}
input#Search-In-Modal, div#predictive-search-option-search-keywords {
background: #fff !important;
}
.predictive-search {
background: #fff !important;
}
</style>
{% endif %}

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Replies 34 (34)

Moeed
Shopify Partner
6292 1711 2056

This is an accepted solution.

Hey @manan123 

 

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 </body> tag

<style>
.section-header {
    margin-bottom: 10px !important;
}
</style>

RESULT:

Moeed_0-1725965269712.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Create high-converting pages - PageFly Page Builder.


manan123
Pathfinder
179 1 23

Thankyou! so much , i need one more help i want to place search icon opposite side , please help me i attached ss below for refrence

manan123_0-1725970351966.png

 

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @manan123

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
div#shopify-section-sections--17420665323567__header {
    margin-bottom: 10px !important;
}
</style>

Here is result: 

BSSCommerceHDL_0-1725965284019.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

manan123
Pathfinder
179 1 23

Thankyou! so much , i need one more help i want to place search icon opposite side , please help me i attached ss below for refrence

manan123_0-1725970393079.png

 

 

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @manan123

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

<style>
summary.header__icon.header__icon--search {
    position: absolute !important;
    left: 5%;
    top: 20%;
}
</style>

 

Here is result: 

BSSCommerceHDL_0-1725971014941.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

manan123
Pathfinder
179 1 23

Thanks! but sorry i forgot to tell you that i want it for only desktop devices , please give the code again & also want white background colour of search bar

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @manan123, Pls replace my old code to this new code:

<style>
@media only screen and (min-width: 990px) {
summary.header__icon.header__icon--search {
    position: absolute !important;
    left: 5%;
    top: 20%;
}
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

manan123
Pathfinder
179 1 23

Thanks its solved , can you please help me to change the background colour of search bar also

manan123_0-1725973939480.png

I want it white 

Tech_Coding
Shopify Partner
413 108 98

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
   summary.header__icon.header__icon--search {
     position: absolute !important;
     left: 5%;
     top: 20%;
   }
}
  .search-modal.modal__content.gradient {
     background: #fff !important;
   }
   input#Search-In-Modal, div#predictive-search-option-search-keywords {
      background: #fff !important;
   }
</style>

Tech_Coding_0-1725973839266.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

Tech_Coding
Shopify Partner
413 108 98

This is an accepted solution.

Hello @manan123 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
  .shopify-section-group-header-group.section-header {
       margin-bottom: 0 !important;
   }
</style>

Tech_Coding_0-1725965502989.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
manan123
Pathfinder
179 1 23

Thankyou! so much , i need one more help i want to place search icon opposite side , please help me i attached ss below for refrence

manan123_0-1725970416146.png

 

 

manan123
Pathfinder
179 1 23

Hii, Thanks but outer colour is changed but inner colour is not changed please give me updated code

 

manan123_0-1725974672415.png

 

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @manan123

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.predictive-search__results-groups-wrapper {
    background-color: #ffff !important;
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

manan123
Pathfinder
179 1 23

Thank you sooo  muchh!!

BSSCommerce-HDL
Shopify Partner
2305 834 907

@manan123, No problem. Glad to help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

manan123
Pathfinder
179 1 23

Hii, i had encountered an bug when i go to product pages & other pages it showed liked that when i click on search icon

 

manan123_0-1725975800677.png

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @manan123, Pls replace my old code before to this new code: 

{% if template.name == 'index' %}
<style>
.predictive-search__results-groups-wrapper {
    background-color: #ffff !important;
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

manan123
Pathfinder
179 1 23

its not working

manan123
Pathfinder
179 1 23

hii, please help me there's something wrong with my image with text slider.Please help me with code

manan123_1-1726033739801.png

 

 

BSSCommerce-HDL
Shopify Partner
2305 834 907

@manan123Can you kindly share the details of your problem with me?

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

manan123
Pathfinder
179 1 23

Slider not working properly , earlier it used to appear only three images at front & it slides when click on arrows, but now arrows are not working properly.

manan123
Pathfinder
179 1 23

 

Hii, i'm using dawn theme & there's a little thing under featured collection shared ss below , please check.

My website link : https://mansaroverfurnishings.com/

manan123_0-1726144918844.png

 

 

Tech_Coding
Shopify Partner
413 108 98

Hello @manan123 

Add this code

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  button.swym-button {
     display: none !important;
  }
</style>

Tech_Coding_0-1726147969113.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Tech_Coding
Shopify Partner
413 108 98

This is an accepted solution.

Add this code also

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .predictive-search {
    background: #fff !important;
  }
</style>

Tech_Coding_0-1725975169445.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
manan123
Pathfinder
179 1 23

Thanks man you made my day!!

Tech_Coding
Shopify Partner
413 108 98

Your welcome @manan123 😁

 

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
manan123
Pathfinder
179 1 23

Hii, i had encountered an bug when i go to product pages & other pages it showed liked that when i click on search icon

 

manan123_0-1725975800677.png

 

Tech_Coding
Shopify Partner
413 108 98

you want to change the background color of search bar on home page only?

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
manan123
Pathfinder
179 1 23

No, i want to change it for all pages

Tech_Coding
Shopify Partner
413 108 98

This is an accepted solution.

Replace this code:

.search-modal.modal__content.gradient {
     background: #fff !important;
   }
   input#Search-In-Modal, div#predictive-search-option-search-keywords {
      background: #fff !important;
   }

   .predictive-search {
      background: #fff !important;
  }

With this code:

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
{% if template.name == 'index' %}
<style>
.search-modal.modal__content.gradient {
background: #fff !important;
}
input#Search-In-Modal, div#predictive-search-option-search-keywords {
background: #fff !important;
}
.predictive-search {
background: #fff !important;
}
</style>
{% endif %}

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
manan123
Pathfinder
179 1 23

thanks again man !!🤩🤩

manan123
Pathfinder
179 1 23

hii, please help me there's something wrong with my image with text slider.Please help me with code

manan123_0-1726033694700.png

 

Rahul_dhiman
Shopify Partner
656 127 132

This is an accepted solution.

Hello @manan123 

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: 20px !important;
}
}

result
2.png

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
manan123
Pathfinder
179 1 23

Thankyou! so much , i need one more help i want to place search icon opposite side , please help me i attached ss below for refrence

manan123_0-1725970444078.png