Gray Label

As a front-end Shopify developer, I focused on:

• Building new custom blocks and sections in Liquid.
• Implementing an interactive product button hover.
• Contributing to the updated navigation structure and behaviour.

My responsibility was to enhance and expand the existing theme, not to design or build the full theme from scratch or the New Arrivals pages.

Key Contributions

Product Button Hover

I implemented a custom product button hover interaction used on product cards so shoppers can:

• Reveal key actions (such as add to cart) on hover.
• Quickly select variants or sizes, depending on the context.
• See clear feedback when items are added or already in the cart.

This involved:

• Creating modular Liquid snippets for product actions and states.
• Using data attributes to bind buttons to specific variants.
• Writing JavaScript to handle hover events, quick add flows, and state updates.
• Styling transitions and hover layers in CSS to keep the interaction smooth and minimal.

Navigation Updates

Gray Label’s navigation includes multiple top-level areas (New, Baby, Kids, Adults, Gifts, 15 yrs) and deeper subcategories and “edit” pages.

I helped refine the navigation experience by:

• Extending Liquid templates to better handle multi-level menus.
• Structuring navigation components so they read menu data directly from Shopify, keeping it easy to maintain.
• Implementing JavaScript and CSS for dropdown behaviour, open/close states, and responsive handling across desktop and mobile.

Custom Blocks & Sections

I also worked on custom sections and blocks that could be reused across pages, giving the content team more flexibility without needing developer support. These included:

• Configurable sections where editors can select products or collections.
• Blocks that surface key information (price, sizes, labels) in a consistent way.
• Clean schema setups in Liquid so each block can be added, reordered, or configured directly in the Shopify Customizer.

Tech & Outcome

• Tech: Shopify Liquid, JavaScript, CSS.
• Outcome: The live theme gained richer interactions and a clearer navigation structure, while staying performant, on-brand, and easy for the Gray Label team to manage post‑launch.

My contribution centered on incremental, component-level improvements that elevated the user experience of an already-live Shopify store.