Introduction
Thank you for purchasing the Aromatic Template by Pixco.
This documentation provides all the necessary steps to help you set up and customize the template to suit your needs.
Aromatic is built for SaaS and marketing teams: a product site that explains what you do, shows the product working, answers the obvious questions, and moves people towards a trial.
Don’t have the template yet? Purchase it here.
Getting Started
To maintain brand consistency, we recommend starting with your "Styles" settings.
This helps ensure consistent fonts and colors across your website. To get started, click the Assets tab in the top-left panel, scroll down to Styles and update the fonts and colors to align with your brand.
Colors
Aromatic uses twelve named color styles, so changing a single entry updates every element that uses it:
Blue Ribbon and Dodger Blue are the action colors, used on buttons, links and highlights. These are usually the only two you need to change.
Whitey, Zirconium and Periwinkle Gray handle the light surfaces and section backgrounds.
Charcoal Black, Pickled Bluewood, River Bed and Waikawa Gray cover the text and the darker panels.
Outer Stroke #1 and Outer Stroke #2 are the border and outline colors on cards.
Medium Purple is the secondary accent, used sparingly.
Typography
Aromatic pairs two typefaces. Satoshi carries the headings through Heading 1 at 80px, Heading 2 at 56px and Heading 3 at 32px, along with the Satoshi XS, Satoshi S, Satoshi M and Satoshi L styles used on buttons, labels and larger supporting copy. Noto Sans handles the running text through Body, Body S, Body S – MD, Body XS and Fineprint Copy.
There is one exception worth knowing about. A third font, Besley, appears in italic on single highlighted words, such as “brand” in the homepage headline and the numerals on the 404 page. It is applied directly to those words rather than through a text style, so if you change your fonts in Styles, remember to update those few words by hand.
Customizing the Header
The header is a key component of your site’s navigation, ideal for giving users quick access to important links.
You can fully customize the header within the Layout Template, Framer’s approach to designing reusable elements that can be applied across all pages, eliminating the need to edit components and elements individually on each page.
Elements within a Layout Template are easy to recognize, as they’re outlined with dashed lines around the component.
Editing the Header
To edit the header, double-click the header component, or go to Assets and select Main under the Template section.
Within the header, you can easily:
Upload your logo by double-clicking the Logo component and replacing it with your own file.
Change the button label and assign a link to it, both from the properties panel on the right.
Switch between the
OpenandClosedstates while you design, so you can style the expanded navigation without leaving the canvas.
Editing the Dropdown Menu
Aromatic includes a dropdown navigation panel, the kind of larger menu that gives each destination an icon, a title and a line of supporting copy. It is the piece most people want to change first, and everything in it is editable from the properties panel.
For each of the six menu entries you can set:
The icon, by uploading your own image.
The title and the short description underneath it.
The link, pointing at a page on your site or an external address.
The panel also holds a promotional image with its own link, which is a good place for a feature announcement or a seasonal offer. The component has Desktop and Mobile variants, so check both after editing.
Editing the Mobile Menu
On smaller screens the navigation collapses into a fullscreen menu. To edit it, double-click the Menu component and switch between its Open and Close states. The mobile menu keeps its own set of items, so update it alongside the desktop navigation whenever your links change.
Customizing the Footer
Editing the footer is simple and straightforward. Just like the header, the footer can also be fully customized within the Layout Template.
Select the Footer component and everything in it is exposed in the properties panel on the right, so you can rewrite the whole thing without digging through layers.
From the panel you can edit:
The short introduction paragraph and the link attached to it.
The two navigation columns, covering Features, Testimonials, Pricing, FAQ, Home, Services, About and Blog. Each one has its own label and link, so you can rename or repoint them freely.
The three contact entries, Write Us, Call Us and Email Us, again with their own labels and links.
Four social icons, each with its own image and link.
The copyright line, which is split into the text before and after the year. The year itself updates automatically, so you never have to touch it again.
The footer has Desktop and Mobile variants. Check both once you have finished editing.
Customizing the Homepage
The homepage is built from four sections, and the last of them carries most of the content.
Hero
The headline, supporting copy and primary call to action. Note that the highlighted word in the headline uses the italic accent font described above, so if you rewrite the headline you may want to apply the same styling to whichever word you want to emphasise.
Carousel and Ticker
A product showcase with a scrolling logo strip beneath it. The Carousel holds four slides, and each slide has its own icon in an active and an inactive state, a title, a line of copy and the slide image itself. Swap the logos in the Ticker by double-clicking it and replacing the images.
Features
Three feature blocks, Smart Collaboration, Analytics at Hand and Integrated Task Management, each built as its own component so you can restyle one without affecting the others.
Pricing
The pricing section, which also carries the testimonials, the customer rating and the FAQ. Setup for the plans themselves is covered in the next chapter.
Setting Up Your Pricing
Aromatic ships with two plan components, Pricing Card Standard and Pricing Card Pro, so the highlighted plan can carry its own styling without you having to rebuild the card.
Select either card and you can set:
The plan name.
The yearly price and the monthly price, as separate fields.
The button label and link for the yearly view, and a separate label and link for the monthly view.
Each card has a Yearly and a Monthly variant. Switch between them while you work to check that both sets of prices and buttons read correctly, and remember to fill in both, since a plan that only has yearly filled in will look empty when a visitor switches the toggle.
The FAQ
The FAQ sits directly underneath the pricing and uses an accordion, which is an effective way to provide clear, accessible answers without a wall of text. It is designed to scale, so add as many questions as you need. It has Desktop, Tablet and Phone variants.
Customizing the Services Page
The Services page is built from a hero, a features area and a consultation section, and it reuses several of the components you have already met.
The pieces you are most likely to edit:
Service Card, which takes a title, a description and an image. Duplicate one to add another service.
Split Block 50-50, the alternating image and text rows. This one is worth knowing well, see below.
Testimonials and the FAQ, both shared with other pages.
Working with the Split Block
The Split Block 50-50 is the most flexible component in the template, and it does the heavy lifting on both the Services and About pages. From the properties panel you can set a label, a title and an image, then choose how the body copy behaves.
Two content modes are available:
Plain copy for a single straightforward paragraph.
Rich text when you need headings, lists or links inside the block.
Toggle on whichever one suits the section and leave the other off. There is also an optional call to action with its own label and link, which you can hide entirely when a block is purely informational.
The component has six variants covering Desktop, Tablet and Mobile with the image on either the left or the right, which is how the page alternates its rhythm as you scroll.
Customizing the About Page
The About page is built from a hero, an about section and a contact section. It uses Split Blocks for the narrative, Team Member components for the people, and the contact form at the bottom.
Each Team Member takes a name, a role and a photo. Duplicate one to add someone, delete one to remove them, and the row reflows on its own.
Editing the Contact Form
The contact form has been carefully designed to capture all the essential information from your clients. It collects a first name, a last name, an email address, a location chosen from a dropdown, and a message.
The component has Desktop, Mobile and Sent variants, so you can preview the confirmation state without submitting anything. There is also a control that switches the two name fields between sitting side by side and stacking, which is useful if you add a longer field.
To edit the form, double-click the Form Component to access the fields.
To remove a field, select the field label either from the canvas or the layer panel, then press Delete.
To add a new field, click on the Form component in the layer panel. A “+” sign will appear at the bottom of the form, indicating the option to Add a new field. Click the “+”, choose your desired field type.
Lastly, you’ll need to assign an email address to receive the form submissions. Select the form in the layer panel, go to the form section in the right panel, and enter the desired email address in the “Send To” field. This will ensure that submissions are directed to the correct recipient.
Customizing the Blog
The blog runs on Framer’s CMS, using two collections that work together.
The Articles collection holds each post:
Title and Description, used on the cards and at the top of the post.
Date, which drives the ordering.
Image, the cover shown on the index and the post itself.
Categories, a reference to the Categories collection. Because it is a multiple reference, one post can sit under several categories at once.
Content, the body of the post with full rich text formatting.
The second collection, Categories, simply holds the category names. Add an entry there first, then assign it to your posts.
The Blog Index
The index page lists your posts using the Article Index Item component, which pulls the image, title, description and button straight from the CMS. Add a post to the collection and it appears here automatically, with no layout work needed.
The Post Page
Each article gets its own page, generated from the CMS. Every element on it is connected to a field, so posts fill themselves in as you write, and editing the layout once updates every post at the same time.
The 404 Page
A styled 404 page is included, using the same italic accent treatment as the homepage headline. Edit the copy directly on the canvas and point the link at wherever you want lost visitors to land.
Responsive Design
Every page in the template is designed at three breakpoints, Desktop, Tablet and Phone, and each one is already laid out for you.
When you add or edit a section, remember to check all three. Tablet and phone layouts don’t inherit your changes automatically, and several components in this template carry their own device variants that need switching as well.
Before You Publish
A short checklist to run through before you go live:
Delete the Pixco badge. In the Main Layout Template there’s a component named
DELETE THIS, remove it.Set your own email address in the “Send To” field on the contact form.
Fill in both the yearly and the monthly prices on every plan.
Update the footer links, the social icons and the copyright line.
Replace the placeholder logos in the ticker.
Check every page at all three breakpoints.
Update your site settings: favicon, social share image, page titles and descriptions.
