Are your white product options looking more gray than white in your Shopify store?
In this tutorial, Kelly Barkhurst from Designer to Fullstack breaks down the professional workflow for perfecting your product personalizer assets. We dive into the “High-Key” Photoshop trick that ensures your whites stay crisp and your blacks stay deep when using CSS blend modes like Multiply.
In this video, you’ll learn:
➤ Why CSS mix-blend-mode: multiply makes white look gray.
➤ How to deconstruct a product image into customizable transparent PNG layers.
➤ The Photoshop settings to “over-brighten” your base images for better rendering.
➤ How to optimize assets with TinyPNG to keep your Shopify store lightning-fast.
➤ A live look at the Zepto Product Personalizer backend.
_______
Timestamps
0:00 – Introduction to Designer to Fullstack
0:22 – The “Gray White” Problem in Shopify
1:04 – How CSS Blend Modes (Multiply) Work
1:26 – Deconstructing the Product into Image Layers
1:50 – Photoshop Fix: Brightness & Contrast Workflow
2:06 – Naming Conventions & File Cleanliness
2:22 – Optimizing for Speed with TinyPNG
2:46 – Zepto Product Personalizer Setup
3:35 – Comparison: Standard vs. Optimized White
4:02 – The Trick for Perfect White and Black Previews
4:40 – Final Result & Wrap Up
______
The Workflow Checklist:
➤ Isolate: Path out each customizable area in Photoshop.
➤ Brighten: Boost brightness/contrast until the base is “High-Key” white.
➤ Compress: Run everything through TinyPNG to save 50%+ on file size.
➤ Upload: Sync with Zepto to see the instant color improvement.
Resources Mentioned:
➤ Zepto Product Personalizer
➤ TinyPNG Image Compressor
➤ Shopify
➤ Adobe Photoshop
➤ Full Blog Post & Checklist: https://designertofullstack.com/why-your-white-products-look-gray-the-shopify-customizer-fix/
#ShopifyTips #ProductCustomization #ZeptoProductPersonalizer #WebDesignTutorial #DesignerToFullstack_____________________________________________________________
*JOIN MY EMAIL LIST*
Love quick, helpful tutorials? You’ll love the emails too. 💌
*ABOUT ME*
Hello, world. I’m *Kelly Barkhurst* —an experienced Mac-based full-stack designer, educator, and entrepreneur passionately blending artistic vision and creativity with deep technical expertise.
With a BFA and MFA in Graphic Design and a certificate in Full-Stack Web Development, I’m uniquely positioned to work at this intersection of design and tech. My driving force is creating meaningful solutions and helping clients and students do the same.
*What’s Kelly’s superpower?* It’s using design thinking to strategically plan the BIG picture, then diving deep into the technical “weeds” to bring that vision to life—through beautiful visual design, compelling writing, or well-crafted, functional code.
*What brought you JOY today? *
👇 Share in the comments below
*SOCIALS*
https://twitter.com/@designer2fstack
https://www.facebook.com/designertofullstack
https://www.youtube.com/@UCWk0aZ-yFzCQX5bMLaISrog