Shopify themes, liquid, logos, and UX
Hello! I'm wondering if there's a way to physically move the "Enter Using Password," button from the top right of the page to a central, lower location. Specifically, I'd like to move it to underneath the newsletter sign-up form.
Debut Theme
https://www.infinityparkour.com (soon to change)
Thank you!
Hello InfinityParkour,
Add this css at the bottom of :
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid
.password-login { text-align: center!important; }
I went into themes -> Edit Code -> Assets
but I cannot find theme.scss.liquid
I only see styles.scss.liquid and theme.js.liquid
How do I fix this?
I really want to move my 'enter using password' icon.
Thank you!
Hello ysmoonlight,
Please share your site url.
So that i can check and let you know the exact solution here.
Hello @ysmoonlight
Your site is password protected please share password for you reference store url.
So that i can check and let you know the exact solution here.
Thanks...
Thanks @oscprofessional , i've managed to center the button but it still appears on top.
Could you help me to place it on the middle of the page or just under the newsletter sign-up button.
Hi @diego_campusco and @InfinityParkour
I was wondering if you ever figured out how to move the ENTER PASSWORD box to the bottom of the password page?
I managed to centre it based on the above code from @oscprofessional but that's it.
Sadly for some reason my community page isn't allowing me to create a new post. SO hopefully someone can help here!
Thanks in advance
Thanks for coming back to me. That's a shame. I tried to have a play as well and couldn't figure it out.
I did however, find a Youtube video on how to hide it. Not sure if it will help you but here it is:
https://www.youtube.com/watch?v=e_Wc4M9DNMk
Best of luck with your store!
Hi! I have been working on this all day and have a liquid theme. After combining a couple of codes I figured it out.
1. Go to "Online Store>Edit Code>Assets>theme.scss.liquid"
2. Scroll to the bottom of your code and instert>>
.password-login {
text-align: center!important;
position: fixed; /* or absolute */
top: 50%;
left: 45%;
}
You may have/want to edit the "top", which is up and down, or "left", which is left and right.
Keep in mind that if you want to move
"LEFT"-
Left-you will decrease the number
Right-increase the number
"TOP"
Up-decrease the number
Down-increase the number
I hope this helps all!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024