Add animation effect to newsletter signup in footer

Store Design
, , , , ,

Topic summary

Goal: replicate Gucci-style underline animation when focusing the newsletter email field in the footer; extend it to search and possibly customer login links.

Newsletter footer proposal: A helper provided CSS targeting #newsletter-footer_form to remove default outline, add a static border-bottom, and create an animated underline via .input-group:after that expands on :focus-within with a cubic-bezier transition. Positioning adjusted for the subscribe button and input width. Code must be added in Assets/theme.min.css. A step to modify sections/email-signup-banner.liquid was suggested, but the replacement markup was missing and the requester couldn’t find that section (theme-specific path likely differs).

Search bar update: Additional CSS supplied for .search-drawer using .search-input-group:after and :focus-within to animate an underline on the header search input. Helper asked if the changes were applied.

New request: Extend the same underline animation to specific links on the customer login page (e.g., Return to store, Create account, Forgot your password?, Cancel). No code provided yet for this.

Status: Partial guidance with concrete CSS for footer and search; theme file path uncertainty and missing markup remain. Discussion open with pending implementation confirmation and customer-login link styling.

Summarized with AI on December 27. AI used: gpt-5.
1

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.

2

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%;
}
  1. go to sections/email-signup-banner.liquid. Replace “subscribe” text with code below:
1 Like
3

I don’t see that page. Would it be on another?

4

Do you know how to add the same animation effect to the underline when searching the site from the search icon in the header?

5

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%;
}
1 Like
6

does it seem you updated it?

7

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”.