Borders & Shapes

Customize border thickness, corner radius, and shadow effects for your option widgets.

Overview

The Borders & Shapes tab lets you control the structural styling of your product options. Adjust borders, rounded corners, spacing, and shadows to create the perfect look for your brand.

7 settings across four sections give you precise control over your option widget appearance.

Border Thickness

Control the thickness of borders on different elements.

Setting	What It Controls	Default	Range
General Border	Borders for containers, dividers, and general elements	1px	0px - 10px
Option Spacing	Vertical spacing between option groups	24px	8px - 80px

Tips:

• Thin borders (1-2px): Clean, minimal look
• No borders (0px): Modern, borderless design
• Option Spacing: Increase for better visual separation between options

Corner Radius

Set the roundness of corners for different elements.

Setting	What It Controls	Default	Range
General Radius	Default corner radius for most elements	40px	0px - 100px
Input Radius	Corner radius for text inputs and dropdowns	4px	0px - 50px

Common styles:

• 0px: Sharp, rectangular corners (modern, clean)
• 4-8px: Subtle rounding (professional, friendly)
• 20-50px: Rounded corners (playful, soft)
• 100px: Pill-shaped (bold, distinctive)

Swatch Size

Control the size of color swatch elements in your option widgets.

Setting	What It Controls	Default	Range
Swatch Size	Size of color swatch squares (width and height)	40px	16px - 80px

When to adjust:

• Smaller (20-30px): Compact product pages with many options
• Medium (40-50px): Standard, balanced appearance
• Larger (60-100px): Feature prominent color choices, luxury feel

Color Swatches

This setting only applies if you're using color swatch option types. It doesn't affect other option styles like dropdowns or buttons.

Shadow Effects

Choose from predefined shadow styles to enhance your option widgets.

Setting	What It Controls	Options
Shadow	Shadow effect for input elements and buttons	No Shadow, Subtle, Medium, Strong

Shadow Options

No Shadow

• Flat, clean appearance
• Best for minimal designs
• Reduces visual weight

Subtle

• Very light shadow
• Adds slight depth without being obvious
• Professional, understated look

Medium

• Noticeable but not overpowering
• Good balance between flat and elevated
• Works well for most designs

Strong

• Bold shadow with clear elevation
• Makes elements "pop" off the page
• Best for dramatic, modern designs

How to Customize Borders & Shapes

Step 1: Open Borders & Shapes

1. Open Settings in the app navigation, then click Customize on the Customization card (or click Style settings while editing any option)
2. In the Style Settings modal, click Borders & Shapes under the Global group in the left rail
3. All settings are displayed with sliders and options

Step 2: Adjust Settings

For sliders (Border, Radius, Swatch):

1. Drag the slider left or right
2. Current value displays on the right (e.g., "24px")
3. Live Preview updates immediately
4. Fine-tune until you achieve the desired look

For shadow effects:

1. Click the radio button next to your preferred shadow style
2. Choose from: No Shadow, Subtle, Medium, Strong
3. Live Preview shows the effect immediately

Step 3: Review in Live Preview

1. The right panel shows changes in real-time
2. See how different elements look with your settings
3. Test various option types to verify consistency
4. Check that spacing and sizing work well together

Step 4: Save or Discard

To apply your changes:

1. Review all adjustments in Live Preview
2. Click Save in the contextual save bar
3. Changes go live on your storefront immediately

To cancel:

1. Click Discard in the contextual save bar
2. All unsaved changes are reverted

Style Combinations

Minimal & Modern

• General Border: 0px (no border)
• General Radius: 4px (slight rounding)
• Input Radius: 4px
• Shadow: No Shadow
• Result: Clean, flat, contemporary look

Soft & Friendly

• General Border: 1px (thin border)
• General Radius: 12px (rounded)
• Input Radius: 8px
• Shadow: Subtle
• Result: Approachable, warm appearance

Bold & Distinctive

• General Border: 2px (medium border)
• General Radius: 100px (pill-shaped)
• Input Radius: 100px
• Shadow: Medium
• Result: Eye-catching, confident style

Classic & Professional

• General Border: 1px (standard)
• General Radius: 0px (rectangular)
• Input Radius: 0px
• Shadow: Subtle
• Result: Traditional, business-like appearance

Design Tips

Match Your Brand

Brand Style	Recommended Settings
Tech/Modern	0-4px radius, no shadow, thin or no borders
Luxury	Larger spacing, subtle shadows, refined borders
Playful	High radius (50-100px), medium shadows, colorful
Traditional	0px radius, 1-2px borders, subtle or no shadow

Create Visual Hierarchy

• Use Option Spacing to group related options together
• Larger spacing between groups helps customers scan quickly
• Consistent spacing creates professional appearance

Consider Mobile

• Ensure touch targets are at least 40px for usability
• Test on actual devices to verify sizing

Shadows Add Depth

• Use shadows to make interactive elements stand out
• More shadow = more emphasis
• Keep consistent across all elements

Troubleshooting

Settings Not Applying

Check:

• You clicked Save (not just previewed)
• Clear browser cache
• Verify Live Preview shows changes
• Test in incognito window

Borders Look Different on Storefront

Possible causes:

• Theme CSS overriding app styles
• Browser rendering differences
• Zoom level affecting appearance

Solution:

• Check for conflicting theme styles
• Test at 100% zoom
• View on multiple browsers

Shadows Not Visible

Check:

• Shadow option is not set to "No Shadow"
• Background colors have enough contrast
• Theme styles aren't overriding shadows
• Try a stronger shadow setting

Swatch Size Unchanged

Verify:

• You're using color swatch option types
• Setting applies only to color swatches
• Other option types have different sizing
• Changes are saved

Next Steps

After customizing borders and shapes:

1. Review Colors to complete your visual styling
2. Configure storefront settings for functionality
3. Test on your live store with real products
4. Check mobile responsiveness