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.

Whether you can switch between the two depends on how you got the template:

• Free website with your Tattoo Studio Pro subscription: pick either one, and switch any time from the Site tab in the editor. New sites start on the Studio template.
• Bought both templates: switch any time from the Site tab.
• Bought one template: that is the one you have. To use the other, purchase it separately.

Switching keeps your content. Your text and images carry across, and the page structure and labels change around them, so you can switch back if you change your mind.

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 open your template, a setup wizard walks you through 8 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
3. Name & Tagline - Your studio or artist name and an optional tagline (appears in header, footer, and browser tab)
4. Contact Info - Phone, email, and address (optional, can be skipped)
5. Theme - Dark or Light mode
6. Primary Color - Pick from 24 preset accent colors
7. Social Media - Instagram, Facebook, TikTok, and website URLs (optional)
8. Complete - Done. Open the admin panel to continue customizing.

You can re-run the wizard at any time from the Site tab → Run Setup Wizard.

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, switch template type, 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 link). Artist: Single featured artist layout with large photo and full bio.
• 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

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.

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.

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

• Hosting - Publishing, custom domains, email forwarding
• Portfolio Template - The free single-page portfolio builder
• Subscription Plans - Purchasing templates through your account