Shopify themes, liquid, logos, and UX
hello,
I would like to have button label in mobile like I have in desktop version.
can please someone help me? thank you very much
Solved! Go to the solution
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>
.banner__box.content-container.gradient {
background: transparent !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hi @patriciaatr, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.
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
Hello @patriciaatr
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.
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 (max-width: 767px){
.banner__buttons a {
background: transparent !important;
}
.banner__buttons {
background: transparent !important;
}
.banner__content.banner__content--bottom-center.page-width.scroll-trigger.animate--slide-in {
position: absolute !important;
bottom: 0;
}
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
hello, thank you for you help
in fact, is above the image but it still has a black block 😞
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>
.banner__box.content-container.gradient {
background: transparent !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
thanks! that worked! may I ask why just has worked in "shop now" button but "contact us" bellow hasn't?
Hi @patriciaatr,
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>
@media only screen and (max-width: 767px){
#shopify-section-template--22763499684177__image_banner_peEqR9 .banner.banner--content-align-center {
position: relative;
}
#shopify-section-template--22763499684177__image_banner_peEqR9 .banner__content.banner__content--middle-center.page-width {
position: absolute;
bottom: 0;
}
#shopify-section-template--22763499684177__image_banner_peEqR9 .banner__buttons a {
color: #ffff !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
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 (max-width: 767px){
.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
position: absolute;
bottom: 0;
}
.banner__buttons a {
color: #fff !important;
}
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
I notice one thing more in your store that on your contact page send button text and background color is white , you can add this code to make background color black of he button
Before:
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>
.contact__button button.button {
background: #000 !important;
}
</style>
After:
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hello @patriciaatr
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->section-image-banner
add this code at the end of the file.
@media screen and (max-width: 749px) {
.banner__content.banner__content--bottom-center.page-width.scroll-trigger.animate--slide-in {
position: absolute;
bottom: 0;
}
.banner--mobile-bottom .banner__box {
background: transparent;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
hello, thank you so much for you help. may i ask you if you know how to put the button black in transparent blackground? having just the white border and text border? and by the way, do you know why it just apply to "shop now" button but on "contact us" beside it still the same black block?
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024