Getting started

Build your first page

A browse page is the smallest useful store: a catalogue people can filter, play and buy from. It is four components, and two of them belong in your layout template.

A finished browse page with gold tutorial callouts: Page: Tracks Browser points to the Genre filter, Layout: Cart points to the cart icon in the navigation and Layout: Player Bar points to the bar across the bottom. The page also shows sort controls, search, suggested tags and five priced track rows.
The result of the five steps below. Everything from the dropdowns down is one component; the player bar and the cart button come from the layout template rather than from this page.

  1. Put the furniture in a layout template

    Create a Framer layout template with your nav and footer, and add Soundee Setup and the Player Bar to it. Pin the player to the bottom.

    Every page built on that template now has both, and you change them in one place instead of eighteen.

  2. Drop in a browser

    On the page itself, insert Tracks Browser from the plugin. That single component is the filter bar, the suggested tags and the list — already aligned with each other.

  3. Set Layout per breakpoint

    On the desktop breakpoint leave it on Desktop; on the phone breakpoint set it to Mobile. That swaps the row of dropdowns for a floating Filters button and a sheet.

  4. Add a cart button

    Put Cart Button in your nav. It shows the live item count and opens the cart that Soundee Setup draws.

  5. Publish

    Publish the site as usual. Preview and published are separate builds — the editor can look right while the live site is still yesterday’s.

Where to go next

A browse page is enough to sell from. The next thing most stores want is a page per track, so people can land on one from a search result or a link.

Detail pages — one track, one page

PreviousSync the CMSNextHow components work