Template
The Starter
A finished store you duplicate and make your own. Worth a tour before you start moving things: nearly every question about how the components fit together is already answered somewhere in it.
Walk through the live version first. To take your own copy, open the Soundee plugin in Framer, go to Templates and use Remix for free, or get it from the Framer Marketplace.
What is in it
| Page | Built from |
|---|---|
| Home | Hero, Carousel shelves |
| Beats | Tracks Browser |
| Sample Packs | Kits Browser |
| Services | Services Browser |
| Detail page | The nine detail-page components |
Soundee Setup and the Player Bar sit in the layout template every page inherits, which is why you will not find them on each page individually.
What to change, in order
Each step makes the next one easier to judge:
Connect your store
So the lists fill with your catalogue instead of the demo’s.
Your colours
In Framer’s colour styles, not on the components. See Colours below.
Fonts, radius and button height
Your text styles for the pages, and Soundee Setup’s Text and Buttons groups for the Soundee components. The two are set separately.
Logo and navigation
Ordinary Framer layers — nothing Soundee-specific.
Hero copy and counters
Static text. Put your own numbers in.
The shelves
Give each Carousel the Filters you want to lead with.
Colours
Every colour in the Starter comes from a colour style, in the Colors tab of Framer’s Assets panel. Change a style and everything painted with it changes: your own layers and the Soundee components alike, because Soundee Setup’s colours point at the same styles.
| Styles | Paint |
|---|---|
| Brand / Base | Your accent: buy and play buttons, the cart badge, the played part of a waveform |
| Brand / Ink | Text and icons sitting on the accent |
| Surface | Backgrounds: the page, the nav, cards, the cart and dialogs |
| Text | Headings, body text and the quieter lines under them |
| Line | Borders and dividers |