Recreate the buider page.
When I enable show color status, then I should have an ability to also change the shape of the color swatches, can be square or round, or I could also change the border color, and I could change the size of the color swatches. So it could be small, medium, large, and it could be different for mobile. I mean, the size can be different for mobile and for desktop.
I'll create this builder page with the enhanced color swatch options. Let me first explore the existing codebase structure, then build out the component.
Now let me read some of the UI components I'll need to use:
Now I have all the context I need. Let me create the builder page with the settings panel, collections sidebar, product grid preview, and the enhanced color swatch options.
I've recreated the builder page with the enhanced color swatch options. The implementation includes:
Builder Sidebar with:
- Image section with "Image fit" dropdown
- Product Image Hover toggle for zoom-in on hover
Color swatches section with:
- Main toggle to show/hide color swatches
- Shape selector (Round or Square) - only visible when swatches are enabled
- Border Color picker with color input and hex text input
- Desktop Size selector (Small, Medium, Large)
- Mobile Size selector (Small, Medium, Large)
- Products layout dropdown
- Filter and Style sections
Preview Area with:
- Top bar with device toggles, preview, and publish buttons
- Store header with navigation
- Collections sidebar showing categories with counts
- Product grid displaying items with dynamic color swatches that respond to all the settings (shape, border color, and size)
The color swatch options are conditionally shown only when "Show Color Swatches" is enabled, and the preview updates in real-time as you change the settings.
Now I'll update the color swatch options section with icon buttons for shape, a simple color picker, and S/M/L toggle buttons for sizes:
Now let me also remove the unused Input import since we're no longer using it for the border color:
I've updated the color swatch options to use a cleaner UI:
- Shape - Now uses two icon buttons showing a circle and a square, with visual feedback on the selected option
- Border Color - Simplified to just a color picker square without the hex input field
- Desktop/Mobile Size - Changed from dropdowns to inline S/M/L toggle buttons with selected state highlighting
All controls have clear visual states for selection with border and background changes when active.