Introduction
Thank you for choosing the Skandic Template by Pixco.
This documentation provides all the necessary steps to help you set up and customize the template to suit your needs.
Skandic is built for holiday homes, cabins and independent stays. It brings your property, its surroundings and the practical details together in one place, with a journal, seasonal rates and a contact form for booking enquiries.
Don’t have the template yet? Get it here.
Getting Started
Before editing individual sections, start with your Styles. Open the Assets panel and find Styles. This is where you can update the colors and typography used throughout the template.
Colors
Skandic uses a quiet palette of pale backgrounds, dark text and forest green accents. The color styles are organized into Template and Accents. Update the existing styles to bring in your own brand colors while keeping the relationships between backgrounds, text and borders consistent.
Some code components also have their own color controls in the right panel. Check these when changing the palette, especially the hero, galleries, FAQ and phone input.
Typography
The main text styles use Switzer. Headings are grouped under Heading, with supporting styles for body copy, labels, navigation and buttons under Text.
Edit a style to update the text connected to it. Components with their own Font controls, including the hero and preloader, should be checked separately. After changing fonts or sizes, preview longer headings and paragraphs on Desktop, Tablet and Phone.
Working with the Main Layout
The Main Layout Template holds the shared Navigation, Footer, Smooth Scroll and Preloader. Open it when you want to change something that appears across the site.
Page content is organized into layers named Section / …. Inside each section, look for layers such as Container, Header, Content and Visual to find the part you want to edit. Change the content within the existing structure first, then adjust the layout if your content needs more room.
Customizing the Header
Open the Navigation component from Main to edit the logo, menu labels and links. The component includes separate variants for light and dark backgrounds, along with mobile menu states.
The homepage starts with light navigation over the hero and changes appearance as you scroll into the page. The Main layout exposes Nav Style, Mobile Nav Style and Scroll Section controls for this behavior. Keep the scroll target connected if you move or replace the section below the hero.
When updating links, check the desktop navigation and the open mobile menu. Keep the logo linked to the homepage, and point enquiry buttons to your Contact page.
Links to Homepage Sections
Several navigation and footer links lead to a section on the homepage. Select the destination section and check its scroll section settings before changing the link.
Use the homepage together with the section target for links that also appear on other pages. For example, /#house takes visitors back to the house section from a journal article or the Contact page. Keep the existing House Anchor layer when changing the house section, or update the links that point to it.
Customizing the Hero
The hero uses a Carousel component with a list of slides. Select the Carousel layer in the hero section, then open its slide list in the right panel.
Media: choose an image or video for each slide. For a video, also add a poster image.
Title and Description: replace the headline and supporting copy. Keep the text short enough to sit comfortably over the image on a phone.
Number and Name: update the small slide labels, such as “01” and “The Cabin”.
Link: add a destination if you want the slide to link somewhere.
The component also has layout, typography, overlay and autoplay settings. Start by replacing the media and copy while keeping these settings in place. Preview each slide to make sure the text remains readable over your new images.
Editing the Property Sections
The house introduction, rooms, benefits, local area and booking explanation can be edited directly on the canvas. Replace the property details, host introduction and images with your own.
For an image inside a frame, select the Visual layer and replace its image fill. Keep the existing crop as a starting point, then check the focal point on smaller screens. Add a short alt description that describes the new image.
The local area section contains four portrait images with supporting content. Use it for nearby places, activities or useful recommendations for guests. Keep the photography consistent so the section feels like part of the same stay.
The Scrolling Gallery
The Gallery component displays a set of images that fan out as visitors scroll. Select the Gallery layer and open its Images settings to replace or reorder the photos.
Its movement is connected to the layers named Trigger A and Trigger B. Keep these layers and the matching trigger names in place when editing the section. If you change the section’s height, preview the full scroll sequence to check where the images enter, spread out and finish.
The Amenities Carousel
The amenities carousel uses connected card layers. Edit the content on those cards to change the image, heading and description. To add another amenity, duplicate an existing card and include it in the Carousel’s Cards connection.
The Carousel has settings for card width, spacing, arrows and movement. Keep the cards connected to the component, and check the first and last cards on both desktop and mobile after changing the list.
Customizing the Preloader
The Preloader lives in Main and plays a short welcome animation when a page opens. Words roll through several languages before settling on “Welcome”. The sequence lasts around 1.5 seconds and temporarily prevents scrolling while it plays.
Select the Preloader to change its Font settings, including the font size. The canvas preview setting lets you see the text while designing; use the site preview to watch the animation itself.
The words and animation timing are defined in GreetingPreloader.tsx in the Code section of Assets. They are not separate controls in the right panel. If you prefer to remove the animation, remove the Preloader instance from Main so the change applies across the site.
Frequently Asked Questions
Select the FAQ accordion and open its list of questions in the right panel. Each item contains a Question and an Answer, so you can replace the copy, reorder the list or add another item.
The component also includes controls for spacing, backgrounds, borders, question and answer styling, and whether the first answer starts open. When adjusting the typography, check an expanded answer with several lines of text.
Check the FAQ on both the homepage and Contact page when updating your booking or house rules. For more detail on the component itself, see the Custom FAQs Accordion guide.
Setting Up Your Rates
The seasonal pricing is managed through the Rates CMS collection. Open CMS, choose Rates and edit each season.
Season and Period: the season name and the dates or months it covers.
Price Per Night: the nightly amount.
Minimum Nights: the minimum length of stay.
Note: any extra information shown for that season.
Enter numbers in the price and minimum stay fields. If you change currency, also update the currency symbol and supporting labels in the rates layout.
Skandic’s booking flow sends guests to the Contact page to ask about dates. The rates are information for guests; they do not connect to a live availability calendar or take payments. If you use a separate booking service, you can link your booking buttons to it.
Customizing the Journal
The Journal CMS collection supplies the article cards and individual journal pages. Open an existing entry to replace its content, or add a new item for another story.
Title and Slug: the article headline and its URL.
Excerpt: the short introduction shown on article cards.
Image: the cover photo used for the article.
Published: the date displayed with the article.
Body: the article itself, with rich text formatting for headings, paragraphs and links.
Host Name, Host Bio and Host Portrait: the author information shown below the article.
Use a square image for the Host Portrait. Author information is stored on each article, so update every relevant entry if you change a host’s name, bio or photo.
The Category field is retained in the collection, but category labels are not displayed in the current journal card layouts.
The Journal Pages
The Journal index lists the articles, and each entry uses the same journal detail layout. Edit the detail layout once to change the structure for all articles. Edit the CMS item to change an individual story.
Use Heading 2 for the main sections inside an article and Heading 3 for subsections. The article title already serves as the page’s main heading. Keep a clear paragraph break before each heading and avoid adding several empty paragraphs to create space.
If you change an article’s slug, check any links pointing to that article, including the footer’s travel information link.
Updating Guest Reviews
Guest feedback comes from the Reviews CMS collection. Each entry contains Guest, Origin, Quote, Rating and Stayed fields, plus an Index field for ordering.
Replace the sample reviews with feedback from your own guests. Keep quotes reasonably short so the cards remain easy to read, and check the collection list’s sorting when changing their order.
Editing the Contact Form
The Contact page uses the Sections/Booking Form component. It includes Desktop, Phone, Success and Error variants, so you can edit the form and its feedback states together.
The form collects First Name, Last Name and Email, with an optional Phone field and message. The message input is named Notes in the component’s layers.
Double-click the form component to access its fields. Select an input to change its placeholder, field name or required setting. Keep the visible label and the field name consistent so the submitted information is easy to understand.
To receive enquiries, select the native form layer inside the component and set your email address in Send To in the right panel. Editing the contact email displayed below the form does not change where submissions are sent.
The Phone Field
The Phone field is an instance of Pixco’s Country & Phone Input Field component. Select the instance to customize it. Its default country is Norway, with the +47 prefix; change the default country setting if your property is elsewhere.
You can also adjust the phone field’s font, colors and dropdown styling. Keep it inside the form when moving fields. See the Country & Phone Input Field guide for its full settings.
Success and Error Messages
Open the Success and Error variants to edit the full-form feedback messages. The submit button also has its own progress and feedback states. Keep the existing interactions connected when changing the wording or styling.
After configuring the recipient and publishing your own site, send a test enquiry. Check that the success message appears and that the email arrives in the correct inbox.
Address, Contact Details and Consent
Below the form, replace the Address and Contact columns with your property’s details. Update both the visible email and phone number and their links. Email links should use mailto:, and phone links should use tel: with the country prefix.
Update the submission agreement beneath the form to suit your business and keep its Privacy Policy link connected to the correct legal page.
Customizing the Footer
Open Footer inside Main to change the enquiry call to action, navigation, social links and copyright name. These changes carry through to the pages using Main.
The copyright line is made from text, a Pixco Dynamic Year component instance and your property name. Edit the surrounding text and keep the year instance in place so the year updates automatically.
When moving or removing homepage sections, check the matching footer links. Also replace the social destinations and check the Journal, Contact and legal page links.
Legal Pages
The Privacy Policy and Terms of Service are managed in the Policies CMS collection. Each entry includes Title, Last Updated, Introduction, SEO Description and Body.
Replace the sample content with your own policies, including your booking and cancellation terms where relevant. Use the Body field’s rich text editor to add headings, paragraphs and links. Keep the footer and form consent links pointing to the correct entries if you change their URLs.
Responsive Design
The template includes Desktop, Tablet and Phone layouts. Start with the primary layout, then check the smaller breakpoints. Changes can inherit from the primary breakpoint, while existing overrides may keep different values on Tablet or Phone.
After replacing content, preview long headings, gallery crops, article cards, open FAQ answers and the form. Test the mobile menu and links as well as the layout itself.
Before You Publish
A short checklist to run through before you go live:
Remove the Pixco badge by deleting the component named
DELETE THISin Main.Replace the property copy, photos, host details, address, email and phone number.
Set your seasons, rates, minimum stays and currency, and replace the sample guest reviews.
Update the Journal and Policies collections, including author portraits and legal contact details.
Set the form’s Send To address and check its Success and Error messages.
Test the logo, homepage section links, enquiry buttons, footer links and mobile menu.
Preview every page on Desktop, Tablet and Phone, including the preloader and galleries.
Update your favicon, social share image, page titles, descriptions and image alt text in Framer.
After publishing your site, send a test enquiry and confirm it reaches your inbox.
