Skip to content

Rebuild the demo homepage

The demo homepage you see in previews is a stack of native Wonpa sections. There is no custom code and no page-builder app — every band is a section you can add yourself from Add section. This page lists the demo homepage in order so you can reproduce the look with your own products.

The Wonpa demo homepage hero with wholesale pricing eyebrow and case-pricing headline

The shipped homepage template points at demo images and collections that don't exist in a new store. So the tiles and featured collection look empty until you swap in your own. Rebuilding the demo means keeping these sections and pointing their content at your catalog.

The demo homepage, top to bottom

A full-bleed slideshow. The section ships with two placeholder slides; the demo uses four. Section settings control Transition style (Parallax slide or Smooth fade), Enable autoplay, Autoplay interval, Show navigation arrows, and Show dot indicators.

Each Slide block sets a Desktop image (recommended 2880 × 1620px), an optional video, an Overlay darkness, a Text background style (None, Semi-transparent black, or Glassmorphism), a Text position among nine anchor points, and up to two buttons.

Note: A slide with a hosted Desktop video (hosted) file plays that; a Desktop video (YouTube or Vimeo) URL is next in line; the Desktop image is the fallback when neither is set.

2. Hero

A single static banner below the carousel. Set the Eyebrow, Heading, Text, a primary button, and a Secondary button label and link. Italic text in the heading renders in a lightened accent tone on the dark background. Height offers Small, Medium, and Large; the demo uses Medium.

The demo stacks the carousel and this static hero. Keep both, or hide whichever you don't need.

3. Trust strip

A thin row of four Item blocks. Each block picks an Icon — Box, Credit, Truck, or File — and sets a Heading and Text. The demo reads Case pricing, Net 30 terms, Ships in 24h, and Spec sheets on file. Up to six items fit.

4. Category tiles

A grid of collection shortcuts under a Heading and a "View all" link. Each Collection block points at one collection and picks an Icon — T-shirt, Hoodie, Jacket, Pants, Cap, or Bag — shown when the collection has no image of its own. The demo has six tiles.

A product row. Set the Heading and Collection, then Products to show (2 to 12) and Columns (2, 3, or 4). The demo shows 8 products across 4 columns.

6. Quote request banner

A call to action pointing returning buyers at quick order. Set the Eyebrow, Heading, Text, and two buttons.

Note: This section only renders when Enable quote requests is on under Theme settings → Wholesale. With it off, the section stays hidden on the storefront even while it sits in the editor.

7. Testimonials

A logo wall plus pull quotes. Client blocks hold a name for the wall; Testimonial blocks hold a Quote, an Author, and a Company / role. The demo uses five clients and three quotes under one Heading.

8. Newsletter

An email signup with a Heading and Text. Submissions go to your Shopify customer list.

Rebuild it on your store

  1. On a fresh install, open the homepage in the theme editor and work down the list above.
  2. For Category tiles and Featured collection, replace the demo collections with your own.
  3. For the carousel and hero, upload your images and rewrite the copy.
  4. Apply a style preset to recolor the whole page at once.