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.

Content ​

Two checkboxes sit under the Content header in the same Layout group. Both are on by default.

  • Show breadcrumbs shows the breadcrumb trail on product and collection pages.
  • Enable animations — turn it off to disable all motion and transitions site-wide. Motion is always off for visitors whose system asks for reduced motion, whatever this is set to.

Section spacing ​

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

Where the sliders sit in the settings list varies:

  • Most sections group them under a Padding header.
  • Collections list, Custom Liquid, Footer, Product recommendations, and Search results show the two sliders with no Padding header above them, so look for the labels rather than a group.
  • Header, Announcement bar, Hero dynamic carousel, and the customer account sections have no padding settings at all. Their spacing is fixed.

Note

The Product section lists Image ratio and Show only the selected variant's images after its Padding header, with no header of their own, so both appear inside the Padding group in the editor. They are covered under Image ratios and cropping.

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.