Liquid Glass for Shopify

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

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.
October 29, 2025
Geneva
Alek

Alek

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.

Project Goals & Strategy Overview

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.
Step 1

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.
Step 2

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.
Step 3

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.
Step 4

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.
Liquid Glass for Shopify

Project Outcome Results

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 achieves a balance between luxury design and speed—perfect for both creative and professional audiences.

Key achievements
  • Designed and implemented a liquid-glass-inspired dark UI system
  • Extended the Horizon Theme with custom components and gradients
  • Unified spacing, shadows, and border logic for design consistency
  • Improved site performance while enhancing depth and visual appeal

Business Impact
  • The UI upgrade reinforced my positioning as a Shopify developer and UI consultant
  • Elegant, high-performance design
  • New kit serves as my design framework for future Shopify builds
–38%

total image weight reduction

+30%

faster load time through component optimization

0

accessibility contrast errors

100%

component modularity for future page builds

""
Alek

Alek

Do you want to be the next?

Book a Free Consultation Call
Alek Tysklind

Alek Tysklind

Shopify Theme Developer

I’m Alek, a Shopify optimization specialist with years of experience helping brands build faster, higher-converting stores. From speed improvements to CRO and migrations, I focus on creating Shopify experiences that drive real growth.

Liquid Glass for Shopify

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.