All things Shopify and commerce
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 :
Reference image:
Solved! Go to the solution
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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:
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
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
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
If this was helpful, hit the like button and accept the solution.
Thanks
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:
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
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
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
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
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
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.
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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
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:
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
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
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:
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
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
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
Thanks its solved , can you please help me to change the background colour of search bar also
I want it white
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
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
Hii, Thanks but outer colour is changed but inner colour is not changed please give me updated code
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
Thank you sooo muchh!!
@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
Hii, i had encountered an bug when i go to product pages & other pages it showed liked that when i click on search icon
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
its not working
hii, please help me there's something wrong with my image with text slider.Please help me with code
@manan123, Can 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
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.
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/
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
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>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thanks man you made my day!!
Your welcome @manan123 😁
Hii, i had encountered an bug when i go to product pages & other pages it showed liked that when i click on search icon
you want to change the background color of search bar on home page only?
No, i want to change it for all pages
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.
thanks again man !!🤩🤩
hii, please help me there's something wrong with my image with text slider.Please help me with code
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
If this was helpful, hit the like button and accept the solution.
Thanks
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
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024