Customize Primary Color
Verify that store owners can customize the primary brand color and see it applied across the storefront.
Preconditions
- You are logged in as store owner or admin
- Theme customization is available for your plan
Test Data
Primary color: #FF5733 (coral orange) or any hex colorTest Steps
Follow each step carefully
Navigate to Theme Customization
Admin > Settings > Themes > Customize or "Edit Theme"
Theme customization panel opens
Locate the primary/brand color setting
"Primary Color", "Brand Color", or "Accent Color" option
Color picker or color input is visible
Note the current primary color
Check the current color value
You know the current color for comparison
Select or enter a new primary color
Use color picker or enter hex code
New color is selected
Observe the preview update (if live preview available)
Preview panel should update with new color
Preview shows new color applied to buttons, links, etc.
Save the changes
Save or Apply button
Changes are saved; success message appears
Verify on live storefront
Visit store and check buttons, links, accents
New primary color is applied to buttons, links, and accent elements
Expected Result
Color customization works: (1) Color setting is accessible, (2) Color picker or hex input works, (3) Live preview shows changes, (4) Changes are saved successfully, (5) New color appears on storefront, (6) Buttons, links, and accents use new color.
Ready to Complete?
Click when you have verified all steps and the expected result.
Test Info
- Module
- Themes
- Steps
- 7
- Duration
- 4 min
- XP Value
- +20