Shopify themes, liquid, logos, and UX
On my home page just below the image and before the shop button I have a weird white line that breaks the page into multiple sections.
I dont know why this is showing, Any advice would be lovely!
Thank you in advance
Solved! Go to the solution
This is an accepted solution.
Hi @jeffreym,
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:
{% if template.name == 'index' %}
<style>
main #shopify-section-template--17256407892068__image_banner_WiXwL .media {
background-color: #24aed1 !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
This is an accepted solution.
Hello @jeffreym ,
Please add the mentioned code at the bottom of the theme.liquid file before </body> tag and save.
<style>
section#shopify-section-template--17256407892068__rich_text_h6ebn {
margin: -1px !important;
}
</style>
The code helps you remove the unnecessary line in your header section.
Output will be like this -:
Please share if you need any further assistance.
Thank you.
This is an accepted solution.
Hello @jeffreym
Go to online store ---------> themes --------------> actions ------> edit code------->base.css----> line number 1100
search this code
.media > :not(.zoom):not(.deferred-media__poster-button), {
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
and replace with this code
.media > :not(.zoom):not(.deferred-media__poster-button),{
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 473px;
width: 100%;
}
and the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
no!! that's good!
Hello @jeffreym
Please provide the URL of your website.
Hi, @GTLOfficial
Please share the store URL so that I can assist you.
This is an accepted solution.
Hi @jeffreym,
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:
{% if template.name == 'index' %}
<style>
main #shopify-section-template--17256407892068__image_banner_WiXwL .media {
background-color: #24aed1 !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
This is an accepted solution.
Hello @jeffreym ,
Please add the mentioned code at the bottom of the theme.liquid file before </body> tag and save.
<style>
section#shopify-section-template--17256407892068__rich_text_h6ebn {
margin: -1px !important;
}
</style>
The code helps you remove the unnecessary line in your header section.
Output will be like this -:
Please share if you need any further assistance.
Thank you.
Hi @jeffreym
Can you try changing the color scheme 1's Background gradient with the blue in above section.
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!
This is an accepted solution.
Hello @jeffreym
Go to online store ---------> themes --------------> actions ------> edit code------->base.css----> line number 1100
search this code
.media > :not(.zoom):not(.deferred-media__poster-button), {
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
and replace with this code
.media > :not(.zoom):not(.deferred-media__poster-button),{
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 473px;
width: 100%;
}
and the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024