במערכות עיצוב מודרניות כל רכיב אינטראקטיבי מוגדר בארבעה מצבים לפחות: Default (ברירת מחדל), Hover (ריחוף), Active/On-select (לחיצה), ו-Disabled (לא פעיל). ב-Shopify כל אחד מהמצבים האלה יכול לקבל צבע, אנימציה ו-border משלו. בעורך ה-Checkout Blocks למשל, כל כפתור ושדה חשופים לכל ארבעת המצבים, וכדאי לעצב אותם במפורש ולא להסתמך על ברירות מחדל.
בחנות עם מיתוג חזק חשוב לוודא שצבע ה-Hover לא מתנגש עם צבע שגיאה (בדרך כלל אדום) ולא עם צבע קישור — כי אם שלושתם נראים דומה, הלקוח לא יבין האם פעולה הצליחה, נכשלה, או שהרכיב בכלל לחיץ. זה קריטי במיוחד בעמוד הקופה של שופיפיי, שם כל בלבול ויזואלי מגדיל את שיעור הנטישה.