How to customize The Hotel Framer template, step by step

Short answer: set your colors and fonts first, replace the text (with the included AI setup system or by hand), fill the 9 CMS collections starting with Rooms, point every Book Now button to your booking engine, then set up SEO and connect your domain. Most of the work is your content, not the design.

I designed The Hotel, and it has been used more than 5,000 times on the Framer Marketplace. These are the steps I follow when I set it up for a client, plus the mistakes I see most often.

What’s inside The Hotel?

✓ 12 pages: Homepage, Rooms, Room Detail, Services, Dining, About, Gallery, Contact, FAQ, Blog, Blog Post and Legal

✓ 9 CMS collections: Rooms, Services, Dining, Testimonials, Blog Posts, Team, FAQs, Gallery and Legal Pages

✓ An AI setup system: a content spreadsheet, a Framer Agent prompt, a Claude CMS prompt and a setup guide

✓ A design system with 7 color styles and 13 text styles

✓ A sticky navigation with a Book Now button, and a booking card on every room page

What do you need before you start?

✓ Your logo, plus your brand colors and fonts if you have them

✓ Room names, descriptions, prices and at least 3 good photos per room

✓ The link to your booking engine or reservation page

✓ Your address, phone number, email and social links

✓ A Framer account. You need a paid site plan to publish on your own domain.

Good photos matter more than anything else on a hotel website. If you only fix one thing before launch, fix the photos.

Step 1: Set your colors and fonts

Start with styles, not pages. The Hotel uses 7 color styles and 13 text styles, so changing a style updates every page at once. Edit the colors first, then the text styles. The headings use Inter Display. If you swap the font, check long headings on mobile afterwards, because a wider font can push them onto extra lines.

Then replace the logo in the navigation and footer, and upload your favicon in the site settings.

Step 2: Replace the text

You have two options.

✓ The fast way. Fill in the content spreadsheet, then run the Framer Agent prompt. It updates the static text on every page in one pass: headlines, navigation, footer and hero copy. It runs within 2,500 AI credits on a Framer Pro plan.

✓ The manual way. Go page by page, starting with the homepage. It takes longer, but you see every change as you make it.

Either way, read every page once at the end. AI is fast, but it doesn’t know your hotel.

Step 3: Fill the CMS collections

Most of The Hotel’s content lives in its 9 CMS collections. Start with Rooms, because the Rooms page, the room detail pages and the homepage all pull from it. Then do Services, Dining and Gallery, and finish with FAQs and Legal Pages. If you’re new to collections, read Framer CMS, explained.

The Claude CMS prompt can fill all 9 collections for you through Framer’s MCP connection. If you fill them by hand, use the same image ratio for every room photo so the room cards line up.

Delete every demo item you don’t replace. Leftover sample blog posts and team members are the most common sign that a site started as a template.

Step 4: Connect your booking engine

The Hotel doesn’t take reservations or payments itself. The Book Now button in the navigation and the booking card on each room page are links, so point them to wherever guests actually book: your booking engine, your channel manager’s booking page, or a contact form if you take requests by email.

✓ If your booking engine supports links to a specific room, use them on the room pages. Guests skip a step.

✓ Test every Book Now button on your phone before launch.

Step 5: Set up SEO

✓ Give every page a unique title and description in its page settings. Include your hotel name and city, for example “Rooms and Suites | Hotel Name, Lisbon”.

✓ Check that room pages and blog posts take their titles from the CMS, so each room gets its own title in Google.

✓ Add alt text to every photo. Describe the room or the view, not “image1”.

✓ Upload a social share image, so links to your site look good on WhatsApp and Facebook.

✓ Keep one H1 per page. If you add sections, use the heading styles for looks and keep the H1 tag for the main page title.

More detail in Is Framer good for SEO?.

Step 6: Connect your domain and publish

Choose a Framer site plan, add your domain in the site settings and follow Framer’s DNS instructions. Publish, then open the live site on your phone and click through every page once. If you’re replacing an old website, set up redirects from your old URLs so you keep your Google rankings.

What are the most common mistakes?

✓ Leaving the demo address, phone number and email in the footer.

✓ Keeping the sample guest reviews. Only publish real reviews from real guests.

✓ Forgetting the Legal pages. Replace the sample privacy policy and terms with your own.

✓ Uploading huge photos. Export them at about 2,400 pixels wide first.

✓ Not testing on mobile. Many guests browse and book on their phones.

Want it done for you?

I designed The Hotel, so I know every page and collection in it. My template customization service starts at $1,100 and usually takes 1 to 2 weeks. I apply your brand, fill the CMS with your rooms and content, connect your booking engine, set up SEO and launch on your domain.

Frequently asked questions

How long does it take to customize The Hotel?

If your text and photos are ready, a basic setup takes a few days. Most of the time goes into room descriptions and photos, not into Framer. A full customization with new sections usually takes me 1 to 2 weeks.

Do I need a paid Framer plan?

You can build and preview for free. To publish on your own domain you need a Framer site plan. The Framer Agent step of the AI setup system uses AI credits from a Framer Pro plan.

Can The Hotel take bookings and payments?

Not on its own. The Book Now buttons link to your booking engine, which handles availability and payment. That keeps your rates and availability in one system.

Can I use The Hotel for a villa, B&B or apartments?

Yes. Rename the Rooms items to villas, apartments or suites, adjust the Services and Dining pages, and hide any page you don’t need. The layout works for any property where guests pick a unit and book a stay.

Need help setting up The Hotel?

Send me your booking link and brand assets, and get a fixed quote within one business day. Book a free 30-minute call or see template customization.