Website Templates

Premium tattoo studio website templates are available as a one-time purchase with lifetime access. Each template comes with a visual admin panel - no coding needed. You can customize everything yourself, or add the “Done For You” service to have the team build and launch your site.

You can build your site before you buy. Sign in to the editor with your Tattoo Studio Pro account and your work saves as you go. A license is only needed when you’re ready to publish or download it.

Template Types

Two templates are available. They share the same visual editor and features - the difference is the page structure and default content.

Which one you build depends on how you got the template:

• Free website with your Tattoo Studio Pro subscription: pick either one in the setup wizard. New sites start on the Studio template.
• Bought both templates: pick either one in the setup wizard.
• Bought one template: that is the one you have. To use the other, purchase it separately.

To change type later, re-run the setup wizard from the Site tab and pick the other one. Re-running the wizard starts your site over, so it’s easiest to choose before you add your own text and pictures.

What’s Included

Every template includes:

• 7 pages: Home, About, Portfolio, Services, Aftercare, Policies, Contact
• Visual admin panel (Content, Global, Presets, Site tabs)
• Multiple portfolio galleries with drag-and-drop upload and fullscreen lightbox
• Dark and light themes
• 10 built-in style presets
• 21 heading fonts, 6 body fonts
• Dual accent colors (primary + optional secondary)
• Corner style options (square, rounded, pill)
• Full SEO management with auto-fill
• Open Graph images for social sharing
• Google Analytics integration
• One-click publish or ZIP export
• This Getting Started guide (included in exports)

Studio vs. Artist differences: Most features work the same in both. The Studio template has a team members section and portfolio hub with multiple galleries. The Artist template has a single portfolio gallery and a featured artist bio layout.

Purchasing

From the Templates page in your account portal:

• DIY templates - One-time purchase per template type. Includes lifetime access to the visual editor.
• Done For You - We build and launch your website for you. Includes the template and your first year of hosting, so you can customize it later.

After purchase, a Customize Template button appears that opens the visual editor. You can also publish directly from the editor or download as a ZIP.

Building before you buy

If you build your site while signed in and buy a license later, everything you’ve built is still there. Publish and Download as ZIP show as locked in the Site tab until then.

If you subscribe to Tattoo Studio Pro, you don’t need a license to publish. When you sign in to the editor with a subscription that includes a website you haven’t claimed yet, the Site tab shows “Your subscription includes a website.” Click Claim my website and Publish unlocks right there, no purchase needed. Download as ZIP still needs a license.

Getting Started: Onboarding Wizard

The first time you sign in to the editor, a setup wizard starts on its own and walks you through 9 steps:

1. Welcome - Choose to start with demo content (pre-filled sample content you can edit) or start fresh (blank canvas)
2. Template Type - Studio or Solo Artist. If you bought one template, it’s already picked
3. Connect Tattoo Studio Pro - If you use Tattoo Studio Pro, choose whether your portfolio and booking form come from your account. If you don’t, click Next. See Connecting Tattoo Studio Pro
4. Name & Tagline - Your studio or artist name and an optional tagline (appears in header, footer, and browser tab)
5. Contact Info - Phone, email, and address (optional, can be skipped)
6. Theme - Dark or Light mode
7. Primary Color - Pick from 24 preset accent colors
8. Social Media - Instagram, Facebook, TikTok, and website URLs (optional)
9. Complete - Done. Open the admin panel to continue customizing.

You can re-run the wizard from the Site tab → Run Setup Wizard. Re-running it starts your site over: your current text and sections are replaced, and the editor asks you to confirm first.

Admin Panel

The floating settings button on the right edge of every page opens the admin panel. You can also triple-click the logo in the footer. The panel stays open as you navigate between pages.

The Four Tabs

Content Tab - Adapts to the page you’re viewing. Navigate to a page first, then open the admin panel to see that page’s editors.

Global Tab - Settings that apply across every page: theme, corner style, accent colors, fonts, site identity, SEO, navigation visibility, business hours, and social links.

Presets Tab - Apply a complete look in one click, or save your own custom presets.

Site Tab - Publish your site, download as ZIP, re-run the setup wizard, or reset to demo defaults.

When you’re signed in, all changes save automatically to your Tattoo Studio Pro account and persist across devices, with or without a license. If you’re not signed in, nothing is saved.

Customizing Content

The Content tab shows different editors depending on which page you’re on. Navigate to the page, then open the admin panel.

Homepage

• Hero Section - Badge text, two-line headline (with accent color highlight), subheadline, primary and secondary CTA buttons with custom links, and background image upload
• Styles / Specialties - Cards showcasing your tattoo styles (title, description, icon)
• Artists - Studio: Team member grid (name, title, specialty, bio, photo, Instagram and TikTok links). Artist: Single featured artist layout with large photo and full bio. You can fill this in by hand or import it from Tattoo Studio Pro, see Connecting Tattoo Studio Pro
• Testimonials - Client reviews with quote, author name, and source
• Booking CTA - Call-to-action section with heading, description, embed code field, and button
• FAQ - Frequently asked questions with expandable answers

About Page

• Page Hero - Tag, heading, and subtitle at the top
• Studio Story - Heading, paragraph text, and image upload
• Highlights / Values - Cards for your core values or differentiators (icon, title, description)
• Artists Section - Studio: Display team members. Artist: The story section serves as your bio instead.

Services Page

• Page Hero - Tag, heading, and subtitle
• Service Cards - Each service with title, description, and price
• Process Steps - Your booking and tattoo process (e.g. Consultation, Design, Session)

Portfolio Page

• Studio: Portfolio Folders - Add, edit, or remove multiple gallery categories (title, slug, description). Displays as a hub page with links to each gallery. Show or hide individual folders.
• Artist: A single portfolio gallery for all your work.
• Image Upload - Drag-and-drop images, reorder by dragging, remove individually

Contact Page

• Page Hero - Tag, heading, and subtitle
• Contact Form - Form handler URL configuration (see #Contact Form Setup)
• Map Embed - Google Maps embed code for your studio location

Book Page

• Booking Page - Switch on Enable Booking Page, set the heading and subtitle, and paste the embed code from your booking service. Click Save Booking Page. When it’s on, the Book Now button in the header and your other booking buttons open this page instead of the contact page. If you chose to take bookings through Tattoo Studio Pro in the setup wizard, your booking form is already here

Aftercare Page

• Page Hero - Tag, heading, subtitle
• Aftercare Steps - Numbered care instructions with title and description
• Tips - Do’s and don’ts for tattoo aftercare
• Warning Signs - Conditions where clients should contact the studio

Policies Page

• Page Hero - Tag, heading, subtitle
• Policy Content - Full text for cancellation, consent, and terms policies

Section Visibility

Each page has visibility toggles at the top of its Content tab. Hide entire sections without deleting their content.

Custom Sections

Every page also has a Custom Sections group where you can add a video, map, booking form, or one of our built-in calculators. See Custom Sections for the full walkthrough.

Global Settings

The Global tab controls settings that apply across every page.

Theme

Switch between Dark and Light mode. Both themes are designed for WCAG AA contrast compliance.

Corner Style

• Square - Sharp angular corners, bold and industrial (default in many presets)
• Rounded - Slightly rounded, balanced and modern
• Pill - Fully rounded capsule buttons, softer and friendly

Primary Accent Color

Choose from 24 preset colors, use the custom color picker with a lightness slider, or enter a hex code directly. Applies to headings, buttons, links, and decorative elements.

Secondary Accent Color

An optional second accent color for extra visual depth. Used for eyebrow text, decorative details, and highlights. Toggle on/off with a switch. Default: gold (#D4AF37). When disabled, the site uses only the primary accent color.

Fonts

Heading fonts (21 options): Oswald (default), Syne, Montserrat, Playfair Display, Raleway, Arvo, Cinzel, UnifrakturMaguntia, Limelight, Great Vibes, Permanent Marker, Kaushan Script, Meow Script, Lacquer, Griffy, Pirata One, Rubik Dirt, Caprasimo, Gravitas One, Bangers, Racing Sans One

Body fonts (6 options): Outfit (default), Inter, DM Sans, Nunito Sans, Lora, Source Serif 4

All Caps Toggle - Apply uppercase to all headings.

Site Identity

• Name - Appears in header, footer, and browser tab
• Tagline - Shown in the header below the name
• Footer Description - A short sentence shown in your site footer. If you leave it empty, the footer uses your SEO meta description instead.
• Logo Visibility - Toggle whether to show a logo in the header (auto-generates a letter icon from your name if no image uploaded)
• Logo Image - Upload a PNG, JPG, or SVG that replaces the auto-generated logo

SEO

Basic SEO:

• Meta Title (60–70 characters recommended)
• Meta Description (150–160 characters recommended)
• Meta Keywords (comma-separated)
• Canonical URL
• Robots (index/follow or noindex/nofollow)
• Auto-Fill - Click to generate SEO fields from your site content automatically

Social Sharing (Open Graph):

• OG Title and Description (defaults to Meta Title/Description)
• OG Image (1200×630px recommended)
• Twitter Card type

Local & Tracking:

• Geo Location (for local SEO)
• Google Analytics ID
• Site URL

Navigation

Toggle visibility of individual pages in the navigation menu. Hiding a page removes it from the nav but doesn’t delete its content. Available pages: About, Portfolio, Services, Aftercare, Policies, Contact.

Client Check-In

If your site is connected to your Tattoo Studio Pro account, you can link clients straight to your walk-in check-in form, so they can fill out their consent form on their own phone before they arrive. Turn on Show client check-in link and your site gets:

• A Client Check-In link in the footer
• A Walking in today? box on your contact page with a Fill out your consent form button
• An Already booked for today? line under the heading on your booking page

All three open your check-in form in a new tab. The settings show your link so you can test it yourself.

This is the same link as Walk-In Check-In Link under Settings > Sharing in Tattoo Studio Pro. Clients who use it land in your queue like any other check-in.

Note for booked clients is a short line under the button on your contact page. By default it tells clients with an appointment to look for their personal check-in link in their reminder, which is what the default reminder text includes. If you’ve changed your reminder text and taken the link out, edit this line to match, or clear it to hide it.

The setting is locked until your site is connected to Tattoo Studio Pro. When you connect during the onboarding wizard, it’s turned on for you.

Business Info

• Address, Phone, Email - shown on the contact page and footer
• Hours - Hours for each day Monday–Sunday, with an option to mark days as “Closed.” Shown on the contact page.

Social Links

Instagram, TikTok, Facebook, X/Twitter, YouTube, and one custom link with a custom label. Appear as icon links in the footer and on the contact page.

Style Presets

The Presets tab lets you change your entire look in one click.

Built-In Presets

Custom Presets

After fine-tuning your settings, save the combination as a custom preset. Custom presets appear at the top of the Presets tab under “My Presets” and can be deleted at any time.

Connecting Tattoo Studio Pro

If you already keep your artists and their work in Tattoo Studio Pro, you don’t have to retype any of it. Turn the connection on from the Site tab, or from the Connect Tattoo Studio Pro step in the onboarding wizard. Your studio is matched from the account you’re signed in with, so there’s nothing to look up or paste.

Two separate things come across, and they behave differently on purpose.

Portfolio galleries, live

Each artist gets their own gallery, pulled straight from their portfolio in the app. It stays current on its own: add work in Tattoo Studio Pro and it shows on the site, with no republishing.

Only artists with Enable Portfolio turned on appear, and only if they have at least one image. See Portfolio for how that toggle works.

Your uploaded images are kept, not deleted. Turn the connection off and they come back.

Team members, imported once

Click Import artists and the team section fills in from the app: name, photo, job title, specialties, bio, and Instagram and TikTok handles. If you started with demo content, the sample artists you haven’t edited are removed at the same time, so your team page shows only your real artists.

This is a one-time copy rather than a live feed, and the difference matters. Import again later and it will:

• Refresh every artist’s name and photo
• Fill in any text field you left empty
• Leave alone anything you wrote yourself. Your bio, your wording, your edits stay exactly as you typed them
• Add artists who are new to Tattoo Studio Pro since last time
• Keep a card whose artist has left the app, and flag it in the editor so you can decide. It’s never deleted for you
• Never touch a card you made by hand

So the import saves you the tedious part and leaves you the writing. If a fetch fails, nothing changes rather than half of it.

Tip: fill in Job Title, Specialties, Bio and the social handles on each artist’s profile in Tattoo Studio Pro first. Then one import gives you a finished team page instead of just a list of names.

Portfolio Images

Uploading via Admin Panel

1. Navigate to the Portfolio page
2. Open the admin panel
3. In the Content tab, expand the portfolio folder you want to edit
4. Drag images onto the upload area, or click to browse
5. Images appear as thumbnails

Organizing

• Reorder - Drag thumbnails to rearrange. The first image becomes the featured image on the portfolio hub.
• Remove - Click the X on any thumbnail

Where Images Are Stored

Images sync to your Tattoo Studio Pro account and are also cached locally in your browser for fast loading. When you export as a ZIP, all uploaded images are included automatically.

Manual File Naming (For Exported Sites)

If you’re working with the exported static files directly, name images sequentially: 001.jpg, 002.jpg, 003.jpg, etc. Place them in the appropriate portfolio folder (e.g. portfolio/portfolio-1/). Supported formats: .jpg, .webp.

Image Optimization Tips

• Resize to 1200–1600px on the longest side
• Use JPG for photos
• Compress before uploading (TinyPNG or Squoosh)
• Aim for under 500KB per image
• First image = featured image on the hub page

Contact Form Setup

The contact form won’t send messages until you connect it to a form handling service.

On a free website included with your subscription, the options are FormSubmit and No Form. The other services below need you to host the site yourself, so they are only offered when you have bought a template and can download it.

Option 1: FormSubmit (Recommended)

1. In the admin panel, go to the Contact page Content tab
2. Select FormSubmit as the form service
3. Enter your email address - no account or signup needed
4. After the first submission, you’ll receive a confirmation email from FormSubmit to activate

Works with any hosting option including Tattoo Studio Pro Hosting.

Option 2: Netlify Forms

If self-hosting on Netlify, forms work automatically with no extra setup. View submissions in the Netlify dashboard. This only works on Netlify. On Tattoo Studio Pro Hosting the form has nowhere to send messages, which is why it is not offered there.

Option 3: Formspree

1. Create a free account at formspree.io
2. Create a form and copy your endpoint URL
3. In the admin panel, paste the URL in the Form Handler field

Free plan: 50 submissions/month.

Map Embed

1. Go to Google Maps and search for your studio address
2. Click Share → Embed a map tab
3. Copy the HTML embed code
4. Paste it in the Map Embed field in the admin panel

Deploying Your Site

Option 1: One-Click Publish (Recommended)

1. In the admin panel, click Publish
2. Your site goes live instantly at yourstudio.portfolio.ink
3. Optionally, connect your own domain from the hosting dashboard

What’s included with hosting: SSL, global CDN (275+ cities), email forwarding, uptime monitoring, and DDoS protection. $10/month or $100/year. If you subscribe to Tattoo Studio Pro, hosting is already included. Claim it from the Hosting page in your account portal.

After publishing, manage everything from account.tattoostudiopro.com/hosting:

• Change your subdomain
• Connect a custom domain
• Set up email forwarding
• View and manage DNS records

Option 2: Self-Host (Free)

1. Go to the Site tab → Download Complete Site
2. Extract the ZIP
3. Upload to your hosting platform

With self-hosting you’ll need to set up DNS, SSL, email forwarding, and contact form handling yourself.

Site Tab Reference

Both reset actions are permanent. Download your site before resetting.

If you haven’t connected a custom domain yet, the Site tab shows a reminder: “Want your own domain, like yourstudio.com? Connect it on the Hosting page.”

File Structure (Exported Site)

your-site/
├── index.html              Homepage
├── about/index.html
├── services/index.html
├── contact/index.html
├── aftercare/index.html
├── policies/index.html
├── portfolio/
│   ├── index.html          Portfolio hub
│   ├── gallery/index.html  Gallery viewer
│   ├── portfolio-1/        Images: 001.jpg, 002.jpg...
│   ├── portfolio-2/
│   └── portfolio-3/
├── css/
│   ├── variables.css       Colors, fonts, spacing
│   ├── base.css
│   ├── components.css
│   ├── sections.css
│   └── themes/
│       ├── dark.css
│       └── light.css
├── js/
│   ├── config.js
│   ├── theme.js
│   ├── content.js
│   └── portfolio.js
├── guide/index.html        This Getting Started guide
├── images/favicon.svg
├── config.json
└── README.txt

Troubleshooting

Admin panel won’t open - The floating settings button is on the right side of every page. You can also triple-click the logo in the footer.

Images not showing after export - Make sure images are in the correct folder and named sequentially (001.jpg, 002.jpg, etc.) if you added them manually.

Contact form not working - You must configure a form service. See #Contact Form Setup.

Related Articles

• Custom Sections - Adding videos, maps, booking forms, and calculators
• Hosting - Publishing, custom domains, email forwarding
• Portfolio Template - The free single-page portfolio builder
• Subscription Plans - Purchasing templates through your account