Footcare Shopify Store: Custom Review Cards and a Logo That Docks into the Sticky Header

The logo opens the homepage, large and centered over the hero video. Scroll down and it shrinks and docks into the sticky header. Scroll back up and it flies out again. It's a custom web component on the Nova theme. The logo that moves is a copy, fixed to the page so nothing can clip it, while the real header logo stays hidden. On every animation frame, our script reads the scroll position, works out how much of the trip to the header is done, and runs that through an eased curve into a CSS transform. Only position and scale change, so the motion stays smooth. The recording shows it live in DevTools: the transform updates as the page scrolls, the logo shrinks from 340 px to 80 px, and at the header the copy hides and the real logo takes over. Scroll position alone drives it, so scrolling back plays it in reverse. Visitors who turn off motion simply see the logo, and the effect and its starting size, 200 to 800 px, are settings in Shopify's theme editor.

Judge.me's Cards Carousel has a built-in limit: it shows the latest 30 reviews, and its maximum setting stops there. This store has 68, so we replaced it with custom review cards on the same review data. The page opens with 35 cards, rendered in Liquid from Judge.me's metafields. When a visitor nears the end of the carousel, or filters by stars, our script requests more from Judge.me's reviews_for_widget endpoint and loops through every product, page by page, skipping reviews already on screen. The recording shows it in the browser's Network panel: 7 requests, one per product, take the carousel from 35 cards to all 68. The loop stops when no reviews are left, or at 100 cards. A tap opens the full text, and store reviews count in the rating and the star bars of every review section.