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.

Template Types

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

You can switch between template types at any time from the Data tab in the editor - useful if your situation changes or you want to try a different layout.

What’s Included

Every template includes:

• 7 pages: Home, About, Portfolio, Services, Aftercare, Policies, Contact
• Visual admin panel (Content, Global, Presets, Data 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, 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.

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 Data 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.

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

All changes save automatically to your Tattoo Studio Pro account and persist across devices. Your configuration is always backed up.

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
• 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.

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.

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.

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.

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 Data 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.

Data Tab Reference

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

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