Borders & Shapes

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.

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

Border Thickness

Control the thickness of borders on different elements.

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.

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.

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

Shadow Effects

Choose from predefined shadow styles to enhance your option widgets.

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 Tab

1. Navigate to Customization page
2. Click the Borders & Shapes tab
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
• Input Shadow: No Shadow
• Result: Clean, flat, contemporary look

Soft & Friendly

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

Bold & Distinctive

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

Classic & Professional

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

Design Tips

Match Your Brand

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