Support Center

Designing Your Malet Storefront

Your Malet is the digital presence of your business on the Mallnline platform. To stand out within the Virtual Mall, we provide you with a powerful, real-time Malet Designer tool that lets you customize your aesthetic and layout without breaking the universal shopping experience.

You can access the designer from your Deck at [your-handle]/manage/designer.

Quick Start: Theme Presets

The fastest way to get started is with Theme Presets. When you open the Designer, the first accordion section shows one-click preset cards that apply a complete theme — colors, fonts, animations, and border radius — all at once.

If your Malet belongs to a specific vertical (like Fashion, Entertainment, or Wellness), you'll see vertical-specific presets curated for your industry at the top. Below those, four universal presets are always available:

  • Mallnline Default — Clean blue & amber, the standard look
  • Midnight Pro — Sleek dark mode with indigo and violet
  • Clean Slate — Minimalist grayscale for a professional feel
  • Warm Editorial — Rich amber tones with serif headings

TIP

Presets are a starting point. After applying one, you can fine-tune individual settings in the other accordion sections below. Nothing is saved until you click Save & Publish.

The Theme Tab: Colors, Fonts & More

The Theme tab organizes your storefront's visual identity into collapsible sections. Each section header shows a summary of your current settings, so you can see everything at a glance.

Brand Colors

Select your Primary, Secondary, Accent, and Background colors using the interactive Color Wheel. The accordion header displays four small color dots showing your current palette.

Typography

Choose your Heading and Body fonts from 11 curated typefaces. The dropdown shows each font name rendered in its own typeface, so you can preview how it looks before selecting. A specimen box below shows your heading and body fonts together.

Display

Choose between LIGHT, DARK, or AUTO (follows your Visitor's system preference) for your theme mode. Set your animation level to MINIMAL, STANDARD, or RICH — this controls hover effects and transition speeds across your storefront.

Border Radius

Drag the slider from 0px (sharp edges) to 64px (fully rounded pills) to control the roundness of buttons, cards, and other elements. A live preview shape shows you the result.

Advanced: Custom CSS

For power users, the Advanced section provides a code editor where you can write custom CSS overrides. This is useful for fine-tuning specific elements beyond what the visual controls offer.

WARNING

Custom CSS can break your storefront layout if used incorrectly. The editor shows a character counter (2000 character limit) and a warning badge. Only use this if you're comfortable with CSS.

The Layout Tab: Building Your Content

The Layout tab manages the physical structure of your Malet's storefront. You can add, remove, reorder, and toggle the visibility of sections.

Active Sections

Your current layout sections are listed with drag handles, visibility toggles, and custom heading inputs:

  • Reorder: Drag the â ŋ handle to reorder the structural stack of your page
  • Toggle Visibility: Not ready to launch your Blog? Click the 👁ī¸ icon to hide the section
  • Custom Headings: Overwrite default titles like "Featured Products" to custom copy like "Our Bestsellers"
  • Remove: Hover over any section to reveal the 🗑ī¸ remove button

Adding New Sections

Click the "Add Section" accordion to browse available widgets. Sections are grouped into two categories:

  • Core Sections — Available to every Malet: Hero Banner, Featured Products, Product Grid, About, Reviews, Blog Feed, Contact Form, Newsletter, Social Links, and Custom HTML
  • Vertical Widgets — Specialized sections for your industry. For example, Fashion Malets can add a Lookbook Gallery and Collection Browser, while Entertainment Malets get an Event Calendar, Credit Store, and Leaderboard

Vertical widgets are highlighted with a purple accent so you can easily identify them.

TIP

You can add as many sections as you need and arrange them in any order. Sections you don't want to show right away can be hidden with the visibility toggle and revealed later.

Preview Toolbar

Above the live preview, a toolbar lets you test your design across different screen sizes:

  • Desktop — Full-width view (default)
  • Tablet — Simulates a 768px tablet screen
  • Mobile — Simulates a 375px phone screen

You can also Refresh the preview or Open in New Tab to see your storefront at full scale.

Need to Start Over?

If you feel your design has gotten away from you, click the 🔄 Reset button at the top of the Designer sidebar. This reverts all fonts, colors, layouts, and custom CSS back to the clean Mallnline default aesthetic. The reset is strictly local to your browser until you click Save & Publish.

Frequently Asked Questions

Can I undo a preset after applying it? Yes — applying a preset only changes your local settings. Nothing is saved until you click Save & Publish. You can apply a different preset, manually adjust values, or hit Reset to revert.

What are vertical widgets? Vertical widgets are specialized layout sections tailored to your Malet's industry category. A Fashion Malet gets lookbook and collection widgets, while a Wellness Malet gets membership plans and practitioner booking. They appear automatically based on your Malet's vertical type.

Will custom CSS overrides survive a theme preset change? No — applying a preset resets all theme settings including custom CSS. If you have important CSS overrides, save them elsewhere before switching presets.

Does the preview update automatically? Yes — all changes are reflected in the live preview in real time. The preview uses the same rendering engine as your actual storefront, so what you see is what your Visitors will see.

Can I preview on different devices? Yes — use the Desktop, Tablet, and Mobile toggles in the preview toolbar to see how your storefront looks on different screen sizes.

NOTE

For Developers: See Organization & Malet Management for the full technical architecture including GraphQL mutations, vertical config queries, and the 31 slot type specifications.