Shopify themes, liquid, logos, and UX
I have built a password page on Shopify, I would like to do two things:
https://mishmash.world/password
1. stop the page from scrolling, so that no matter what size the screen is the content will fit that screen and there will be no option to scroll.
2. I would like to remove the semi-colons from the timer. Doing this in the CSS file is hard as they are the same class.
Really appreciate anyone's advice
The ideal password page is attached
Solved! Go to the solution
This is an accepted solution.
Hello @marycrichton123 ,
Follow these steps:
1. Go to Online Store -> Theme -> Edit code
2. Open your section-password.css file and paste the following code at the bottom:
.essential_countdown_timer span:nth-child(even) {
visibility: hidden;
}
body.password.gradient {
overflow: hidden;
}
Thanks
This is an accepted solution.
Definitely it will, if you need footer visible either you have to make the scroll visible or remove the spaces and content from the body.
There is no other way to do it.
This is an accepted solution.
@marycrichton123 Add this css too at the bottom in file section-password.css
.rich-text.content-container {
padding: 8px 0 0 0 !important;
}
.countdown_timer_wrapper_cm2u9n9df232681191lx3axb59f {
padding: 0 !important;
margin: 0 !important;
}
.password__footer {
padding: 0 !important;
}
If problem solved don't forget to Like it and Mark it as Solution!
And If you need help with customization/code part you can contact me for services
You can find the email in the signature below.
Thanks
This is an accepted solution.
Hello @marycrichton123 ,
Follow these steps:
1. Go to Online Store -> Theme -> Edit code
2. Open your section-password.css file and paste the following code at the bottom:
.essential_countdown_timer span:nth-child(even) {
visibility: hidden;
}
body.password.gradient {
overflow: hidden;
}
Thanks
Amazing that hid the semi colons! Thankyou so much
The only issue is when we remove the scroll, it removes the footer?
This is an accepted solution.
Definitely it will, if you need footer visible either you have to make the scroll visible or remove the spaces and content from the body.
There is no other way to do it.
@Guleria thankyou.
How do I:
1. reduce the padding around the rich text block
2. reduce the padding around the timer?
Thanks,
Mary
This is an accepted solution.
@marycrichton123 Add this css too at the bottom in file section-password.css
.rich-text.content-container {
padding: 8px 0 0 0 !important;
}
.countdown_timer_wrapper_cm2u9n9df232681191lx3axb59f {
padding: 0 !important;
margin: 0 !important;
}
.password__footer {
padding: 0 !important;
}
If problem solved don't forget to Like it and Mark it as Solution!
And If you need help with customization/code part you can contact me for services
You can find the email in the signature below.
Thanks
Amazing, thank you @Guleria
I have one last request:
1. I would like to change the input field, to be one straight line with email written above it from the footer
2. I would like to take away the text. 'Are you the store owner? Log in here' from the footer
Hi @marycrichton123 ,
Thanks for your question. You can follow the instruction here:
1. Go to Shopify > Online store > Theme > Edit code
2. Select theme.liquid > copy the code and paste it before </head> tag. https://prnt.sc/z6YYHAk5vgEI
{% style %}
body.password.gradient {
overflow: hidden !important;
}
{% endstyle %}
I pasted in password.liquid - see attached
But it didn't work
Ah, please paste it to the Theme.liquid, not password liquid file
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