Wonpa docs

Appearance

Layout ​

These settings control the storefront's overall frame — page width, corner rounding, button shape, and how the cart opens. Most live under Theme settings → Layout, with buttons, badges, and the cart in their own groups.

Page width and margins ​

  1. Open Theme settings → Layout.
  2. Set Page width to Narrow or Wide. This caps how far content stretches on large screens.
  3. Set Page margin, the minimum gap between content and the screen edge, from 10 to 100px.

Corner style ​

Corner style rounds images, cards, inputs, and other surfaces together, so the storefront stays consistent. It offers four levels: Sharp, Standard, Soft, and Round. Standard is the default.

Buttons can override this — see below.

Section spacing ​

Vertical spacing is set per section, not globally. Each section has a Padding group in the theme editor with Top padding and Bottom padding sliders (0–96px). Use them to tighten or open the gap above and below a section.

Buttons ​

Button shape and size live under Theme settings → Buttons.

  1. Set Button corners: Inherit theme corners follows the Corner style above; Pill makes fully rounded buttons; Sharp makes square corners.
  2. Set Button size: Standard or Compact. Compact reduces the minimum button height for a denser layout.
  3. Turn on Uppercase button text to render button labels in uppercase.

Badges ​

Sale and sold-out badges on product cards are off by default. Turn them on under Theme settings → Product cards → Badges with Show badges.

Wholesale catalogs commonly use the compare-at price to carry the MSRP, not a discount. A sale badge reads any compare-at price above the selling price as a markdown, so on a B2B store it would tag full-margin products as "on sale". That's why the badges stay off unless you turn them on.

When on, Sale badge style chooses how the badge reads: Percent off shows the discount amount; Sale label shows a plain "Sale". Card badges are covered in full under Product cards.

Cart type ​

Cart type, under Theme settings → Cart, decides what happens when a shopper adds an item. Drawer slides the cart in from the side. Page sends the shopper to the full cart page. Drawer is the default.