Shopify themes, liquid, logos, and UX
Hi guys,
I've been stuck on this for a while. What's the code to add the animation effect on gucci.com when clicking into their 'email'/newsletter section in their footer. Any help would be greatly appreciated!! My website is seraneeva.com.
Solved! Go to the solution
This is an accepted solution.
Hi @flammagreg ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/theme.min.css
3. Add code below to end of file
#newsletter-footer_form .footer-email-input:focus {
outline: none;
}
#newsletter-footer_form .footer-email-input {
border-bottom: 2px solid var(--color-scheme-border-color);
}
#newsletter-footer_form .input-group:before {
display: none;
}
#newsletter-footer_form .input-group:after{
position: absolute;
bottom: 1px;
border-bottom: 1px solid #fff;
content: "";
display: block;
margin: 0 auto;
transition: width .8s cubic-bezier(.5,0,0,1);
width: 0;
left: 50%;
transform: translateX(-50%);
}
#newsletter-footer_form .input-group:focus-within:after {
width: calc(100% + 2px);
}
#newsletter-footer_form #subscribe{
position: absolute;
color: #fff;
margin: 0;
bottom: 2px;
right: 0;
padding-left: 0;
padding-right: 0;
}
#newsletter-footer_form .input-group {
width: 60%;
}
4. go to sections/email-signup-banner.liquid. Replace "subscribe" text with code below:
<svg class="is-inversed" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 12L10 8L6 4" stroke-width="1.5" stroke-linejoin="round" stroke="#fff"></path></svg>
This is an accepted solution.
Hi,
Maybe I suggest code below
.search-drawer #search-input:focus {
outline: none;
}
.search-drawer .search-input-group:before {
display: none;
}
.search-drawer .search-input-group {
position: relative;
}
.search-drawer .search-input-group:after{
position: absolute;
bottom: 0;
border-bottom: 1px solid #000;
content: ""!important;
display: block!important;
margin: 0 auto;
transition: width .8s cubic-bezier(.5,0,0,1);
width: 0;
left: 50%;
transform: translateX(-50%);
}
.search-drawer .search-input-group:focus-within:after {
width: 100%;
}
This is an accepted solution.
Hi @flammagreg ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/theme.min.css
3. Add code below to end of file
#newsletter-footer_form .footer-email-input:focus {
outline: none;
}
#newsletter-footer_form .footer-email-input {
border-bottom: 2px solid var(--color-scheme-border-color);
}
#newsletter-footer_form .input-group:before {
display: none;
}
#newsletter-footer_form .input-group:after{
position: absolute;
bottom: 1px;
border-bottom: 1px solid #fff;
content: "";
display: block;
margin: 0 auto;
transition: width .8s cubic-bezier(.5,0,0,1);
width: 0;
left: 50%;
transform: translateX(-50%);
}
#newsletter-footer_form .input-group:focus-within:after {
width: calc(100% + 2px);
}
#newsletter-footer_form #subscribe{
position: absolute;
color: #fff;
margin: 0;
bottom: 2px;
right: 0;
padding-left: 0;
padding-right: 0;
}
#newsletter-footer_form .input-group {
width: 60%;
}
4. go to sections/email-signup-banner.liquid. Replace "subscribe" text with code below:
<svg class="is-inversed" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 12L10 8L6 4" stroke-width="1.5" stroke-linejoin="round" stroke="#fff"></path></svg>
I don't see that page. Would it be on another?
does it seem you updated it?
Do you know how to add the same animation effect to the underline when searching the site from the search icon in the header?
This is an accepted solution.
Hi,
Maybe I suggest code below
.search-drawer #search-input:focus {
outline: none;
}
.search-drawer .search-input-group:before {
display: none;
}
.search-drawer .search-input-group {
position: relative;
}
.search-drawer .search-input-group:after{
position: absolute;
bottom: 0;
border-bottom: 1px solid #000;
content: ""!important;
display: block!important;
margin: 0 auto;
transition: width .8s cubic-bezier(.5,0,0,1);
width: 0;
left: 50%;
transform: translateX(-50%);
}
.search-drawer .search-input-group:focus-within:after {
width: 100%;
}
Any chance you could add the same underline animation effect to the links on the customer log in page?? It would be for the "Return to store", "Create account", "Forgot your password?", "Return to store", and "Cancel".
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025