UI Upgrade Kit: Liquid-Glass Aesthetic for Shopify Horizon Theme

October 29, 2025
Aleksander Tysklind
3 min read

As part of refining my own Shopify developer portfolio and consulting site, I created a complete UI upgrade kit using Shopify’s Horizon Theme as a foundation.

The new design introduces a dark, gradient-based visual system inspired by Apple’s liquid glass aesthetic—infused with dynamic color depth, glassy borders, box shadows, blur effects, and improved UI consistency across all components.

As part of refining our own Shopify developer portfolio and consulting site, we created a complete UI upgrade kit using Shopify’s Horizon Theme as a foundation.
The new design introduces a dark, gradient-based visual system inspired by Apple’s liquid glass aesthetic—infused with dynamic color depth, glassy borders, box shadows, blur effects, and improved UI consistency across all components.

Project brief

The purpose of this project was to redesign my UI consulting website for a cleaner, more modern visual identity while showcasing my design and development capabilities as a Shopify developer.

I built a reusable UI kit that integrates a dark theme, floating header bar, gradient headings, and glass-like depth effects to elevate the browsing experience. The visual refresh prioritizes component consistency, spacing, and high-performance design, while minimizing heavy imagery in favor of custom vector graphics and icons.

Goals

The goal was to design a visually distinct and technically refined UI system that demonstrates advanced front-end and Shopify theme customization skills.

Create a Consistent Dark System – Establish global design tokens for spacing, shadows, borders, and gradients.
Incorporate Liquid-Glass Details – Add translucent borders, blurs, and light diffusion effects.
Reduce Reliance on Images – Replace photography with icons and vector-based graphic design for speed and scalability.

How we worked

The project was inspired by the Horizon Theme’s modular architecture—a theme I often use as a Shopify developer for its flexibility and clean codebase. I extended its foundation with modern UI touches: translucent layers, animated gradients, and subtle depth effects that feel dynamic yet professional.

Foundations & Design Tokens

Created a color palette built around #0A0A0F, #bb8bfd, #00d3f2, #f66aba, and #00A142, expanding into gradient ramps for accents and hover states.
Standardized spacing, border radii, shadows, and blur variables for consistent application throughout the Horizon Theme.

Component System

Developed liquid-glass-style buttons and translucent borders with backdrop filters and glowing states.
Enhanced card and section components with blur, gradient overlays, and layered elevation effects.
Implemented a floating header bar inspired by Apple’s Dynamic Island—reactive to scroll and viewport behavior.

Content & Visual Simplification

Replaced images with iconography and vector-based illustrations for a minimalist aesthetic.
Introduced gradient-based headings that shift between violet, turquoise, and magenta tones.

Accessibility & Optimization

Calibrated color contrast for WCAG compliance.
Minimized layout shift with stable grid spacing and responsive breakpoints.
Reduced visual clutter for better focus on content and motion clarity.

Outcome

The new UI gives the site a distinctive, polished look that aligns with my identity as a Shopify developer specializing in performance and aesthetics. Built on Shopify’s Horizon Theme, the system pairs a luxury look with a light build.