Storefront Customization
Make your storefront unique with custom colors, layouts, and advanced styling options. Export and import configurations to share with others or backup your settings.
Overview
WERM's storefront customization system gives you complete control over how your server's store looks. Start with one of our 7 preset themes, then customize every aspect - from colors to layouts to advanced CSS.
Override any color in your theme - primary, secondary, accent, backgrounds, and more.
Choose header styles, grid columns, card designs, and spacing to match your brand.
Add custom CSS, enable animations, configure watermarks, and set SEO metadata.
Getting Started
Access the Customizer
Go to your server dashboard → Settings → Appearance tab. You'll see the full customization interface with live preview.
Choose a Base Theme
Start by selecting one of the 7 preset themes: Futurist (cyberpunk),Medieval (dark fantasy), Modern (clean), Space (cosmic),Steampunk (industrial), Water (oceanic), or Default.
Customize Colors
Expand the Colors section to override individual colors. Click any color input to open the color picker, or paste a hex code directly. Use the reset button to revert to the theme default.
Adjust Layout
Configure header style (banner, minimal, gradient, full-image), grid columns (2-4), product card style, corner roundness, and spacing.
Save Your Changes
Click "Save Changes" at the top or bottom of the settings page. Your storefront will immediately update with the new design.
Color Configuration
Every theme has a complete color palette that you can customize. Colors are organized into groups for easier management.
Buttons, links, highlights
Text on primary buttons
Hover state for primary elements
Secondary buttons, badges
Text on secondary elements
Decorative highlights, icons
Text on accent elements
Main page background
Product cards, panels
Header banner gradient
Overlay on banner images
Layout Options
Import & Export
Share your storefront configuration with others or backup your settings for safekeeping.
Export your current configuration as a JSON file that you can share or backup.
How to export:
- Click the "Export" button in the customizer
- Choose "Download JSON" or "Copy to Clipboard"
- Save the file for backup or sharing
{
"_wermExport": true,
"version": 1,
"baseTheme": "futurist",
"colors": { "primary": "#00ffcc" },
"layout": { "gridColumns": 3 }
}Load a configuration from a JSON file or paste JSON directly.
How to import:
- Click the "Import" button in the customizer
- Choose "From File" or "Paste JSON"
- Review the preview and confirm the import
- Save changes to apply
Theme Presets
In addition to the base themes, we offer curated presets for common use cases.
Vibrant purple theme perfect for gaming communities. Bold and energetic.
Clean, refreshing green theme. Great for survival and SMP servers.
Intense red/orange theme for PvP and competitive servers.
Minimal dark theme with subtle accents. Professional and clean.
Warm, inviting gold theme. Perfect for RPG and adventure servers.
Soft pink theme with Japanese aesthetics. Unique and memorable.
Advanced Settings
Advanced Users Only
Write custom CSS to override any style. Your CSS is scoped to your storefront and won't affect other pages.
/* Example: Custom button glow effect */
.product-card:hover {
box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
transform: translateY(-2px);
}
/* Example: Custom banner animation */
.storefront-banner {
animation: pulse 3s ease-in-out infinite;
}Override the page title in search results
Custom description for search engine snippets
SEO keywords for better discoverability
Tips & Best Practices
Use High Contrast
Ensure text is readable against backgrounds. Test with both light and dark modes.
Match Your Brand
Use colors from your server logo or website for a consistent brand experience.
Export Regularly
Backup your configuration before making major changes. Export after finalizing your design.
Start with a Theme
Choose the closest preset theme first, then customize. This ensures a cohesive design.
Test on Mobile
Preview your store on mobile devices. Many players browse on phones.
Keep It Simple
Don't over-customize. A clean, fast-loading store converts better than a flashy one.
Configuration Format Reference
The full JSON structure for storefront configurations. Use this as a reference when manually editing or debugging configurations.
{
"_wermExport": true,
"version": 1,
"exportedAt": "2024-01-15T10:30:00.000Z",
"baseTheme": "futurist", // futurist | medieval | modern | space | steampunk | water | other
"colors": {
"primary": "#00ffcc",
"primaryForeground": "#000000",
"primaryHover": "#00e6b8",
"secondary": "#1a1f2e",
"secondaryForeground": "#e0e0e0",
"accent": "#00ffcc",
"accentForeground": "#000000",
"background": "#0a0f1a",
"foreground": "#ffffff",
"muted": "#1a1f2e",
"mutedForeground": "#9ca3af",
"cardBackground": "rgba(26, 31, 46, 0.8)",
"border": "rgba(0, 255, 204, 0.2)",
"bannerGradient": "linear-gradient(135deg, #0a0f1a 0%, #1a1f2e 50%, #0a0f1a 100%)",
"bannerOverlay": "linear-gradient(to bottom, transparent 0%, rgba(10, 15, 26, 0.8) 100%)",
"textShadow": "0 0 10px rgba(0, 255, 204, 0.3)"
},
"layout": {
"headerStyle": "banner", // banner | minimal | gradient | full-image
"gridColumns": 3, // 2 | 3 | 4
"productCardStyle": "default", // default | compact | featured | minimal
"roundedCorners": "lg", // none | sm | md | lg | xl | full
"contentWidth": "normal", // normal | wide | full
"spacing": "normal", // compact | normal | relaxed
"showHeaderGlow": true,
"showProductShadows": true,
"showCategoryFilters": true,
"enableHoverEffects": true
},
"advanced": {
"customCSS": "",
"animations": true,
"watermark": {
"enabled": false,
"text": "",
"position": "bottom-right"
},
"seoSettings": {
"customTitle": "",
"metaDescription": "",
"keywords": []
}
}
}Need Help?
Join our Discord community to get help from other server owners, share your storefront designs, and request new features.