# Build guide: Tattoo Removal Machines collection page ## 1. Page type and implementation rules Build this as a commerce collection landing page, not a blog post or a manufacturer-style catalog. - Use the site’s existing collection template, design tokens, header, footer, cart, forms, financing integration and product-card behavior. - Use the supplied page copy verbatim. Do not rewrite, shorten or add marketing or medical claims. - Use the supplied headings as written. The labels in this guide identify sections by purpose, not by exact heading text. - Keep all substantive answers visible. Do not place buying guidance, specifications, regulations or support information inside accordions. - Do not add patient-oriented sections about pain, aftercare, booking tattoo-removal appointments or general treatment efficacy. - Do not add generic related-post, recently viewed or unrelated equipment modules below the page. - Preserve a single H1 and a logical heading hierarchy. - If an existing collection already targets this subject, upgrade that URL instead of creating a duplicate. Otherwise use `/collections/tattoo-removal-machines` or the site’s standard equivalent. - Include the normal breadcrumb above the hero. The page must remain fully transactional: buyers can add products to the cart, apply for financing and contact a specialist without needing to leave this page. --- ## 2. Page order Build the supplied content in this order: 1. Hero, introduction and three-route quick pick 2. Filters and four grouped product rows 3. Equipment selection guide 4. Price tiers, ownership costs and payback 5. Regulations, professional-versus-home equipment and seller support 6. Results, demo video and operator reviews 7. Final purchase/financing/specialist CTA Do not move the educational content above the product offer. --- ## 3. Hero and quick pick ### Layout Use a two-column hero within the theme’s normal maximum-width container: - **Left:** H1, introductory copy, professional-equipment qualification and quick-pick list - **Right:** one approved image of a professional machine in a treatment room On mobile, stack the copy first and image second. Do not place purchase, quote or financing buttons in the hero. The only hero actions are links to relevant product rows. ### Quick-pick component Render the three practice routes as three compact cards or a clearly divided list. Each item must contain: - Practice type - Recommended machine type - The supplied reason or selection criteria - A text link that scrolls to the relevant product group If a route names two relevant technologies, link each named technology to its corresponding row rather than choosing one arbitrarily. Use these stable row anchors: - `#q-switched-lasers` - `#picosecond-lasers` - `#multi-function-lasers` - `#portable-lasers` Apply `scroll-margin-top` so anchored headings remain visible below the site’s fixed header. --- ## 4. Product collection and filters ### Collection structure Place the filter bar immediately before the first product group. Build four visibly distinct product rows in this order: 1. Q-switched Nd:YAG machines 2. Picosecond machines 3. Multi-function hair and tattoo removal machines 4. Compact and portable machines Each row must contain: - An anchor target - The supplied heading - The supplied one-line explanation - Its product-card grid - The supplied inclusion or fulfillment line beneath the cards If the written page provides one shared inclusion/fulfillment statement rather than separate statements, place it once after the final product row instead of repeating it. If there is a supplied umbrella heading above all products, make that an H2 and the four group headings H3. Otherwise, use the four group headings as H2s. ### Filters Provide filters for: - Laser type - Installed wavelengths - Price Use the existing collection filter component where possible, extended with product metafields as needed. Filter behavior: - Update all four product groups without a full page reload. - Hide a group when no products in that group match. - Display a visible result count. - Provide a clear/reset control. - Preserve selections in URL query parameters so a filtered view can be linked and restored. - Make filter controls keyboard-operable and expose the updated result count through an `aria-live` region. - Do not add an unrelated sort control unless the existing collection template requires one. Use actual numeric product prices for filtering, not financing amounts. ### Responsive grid Use the site’s standard product grid: - Desktop: three cards per row where space permits - Tablet: two cards per row - Mobile: one card per row Keep cards equal height within each product group. Keep purchase controls aligned toward the bottom of each card. --- ## 5. Product card specification Extend the site’s existing product-card component rather than introducing an unrelated card style. Each card must display, in this order: 1. Product image 2. Model name 3. Laser-type badge 4. Verified star rating and review count 5. Reviewer practice-type label, where supplied 6. Six-line technical specification block 7. Full USD purchase price 8. Monthly financing line 9. Stock status or stated lead time 10. Add to cart button 11. Talk to a specialist button ### Six-line specification block Combine the supplied specifications into these consistent rows: 1. **Laser type / pulse width** 2. **Installed wavelengths** 3. **Maximum energy per pulse** 4. **Spot-size range / repetition rate** 5. **Delivery system / cooling** 6. **Input voltage / footprint and weight** Do not omit the pulse-width unit. Display `ns` or `ps` directly beside the value so the machine class can be verified from the card. Do not replace measured values with vague labels such as “high power,” “advanced pico” or “professional energy.” ### Commerce data rules Use the commerce catalog as the source of truth for transactional price and availability. Use the supplied copy or product metafields for measured technical specifications. Recommended product metafields: - `laser_type` - `pulse_width` - `pulse_width_unit` - `wavelengths` - `energy_per_pulse` - `spot_size_range` - `repetition_rate` - `delivery_system` - `cooling` - `input_voltage` - `dimensions` - `weight` - `lead_time` - `financing_amount` - `included_items` - `warranty_summary` - `reviewer_practice_type` Rules: - Show a complete configured price, not “Request price.” - Do not use “From” unless the product genuinely has differently priced configurations. If it does, require configuration through an on-page variant drawer before adding to cart. - Financing figures must come from the site’s financing provider or supplied approved content. Do not calculate an unofficial monthly payment. - Do not invent ratings, review counts, certifications, specifications or availability. - Product images must match the exact model. ### Product actions **Add to cart** - Use the existing AJAX cart. - For a single-variant product, add it directly. - For products requiring a configuration, open the existing quick-view or variant-selection drawer without navigating away. - Confirm success through the normal cart drawer or accessible status message. **Talk to a specialist** Open the site’s existing consultation form in a modal, drawer or inline panel. Prefill hidden fields with: - Product name - Product or variant ID - Product group - Current page URL - Source value identifying this collection page Keep the selected product visible in the form. **Financing** The card’s financing line may link to the existing financing application or open its modal. Preserve product and price context where the provider supports it. --- ## 6. Selection guide Place the buying guide after all four product groups. Use a readable article width for prose, while allowing tables to use the full content width. Build its content in the supplied order: 1. How the machine works 2. Types of tattoo removal laser 3. Picosecond versus Q-switched 4. Wavelengths by ink color and skin type 5. Specification checklist 6. How to verify a true picosecond machine 7. Tattoo-removal laser versus hair-removal laser 8. Other services and handpiece tips ### Mechanism diagram Place the supplied ink-shattering diagram beside or immediately after the mechanism explanation. - Desktop: text and diagram may use a two-column layout. - Mobile: text first, diagram second. - Include concise alternative text that describes the useful information shown. - Do not use decorative animations. ### Equipment-types table Render the supplied technology comparison as a real HTML table with: - Technology/class - Pulse class - Typical wavelength coverage - Primary use or ink coverage - Relevant build differences Do not convert this table into an image. ### Wavelength table Render the supplied ink-to-wavelength information as a second HTML table. Preserve the darker-skin qualification immediately below or alongside the table rather than hiding it in a tooltip. ### Specification checklist Render the buying criteria as a visible checklist. Each item must retain both: - The range or technical detail to expect - Why that detail matters A two-column checklist is acceptable on desktop; use one column on mobile. ### Links back to products At the end of each relevant guide passage, render the supplied text link back to the applicable product row. Use the four stable anchors defined above. --- ## 7. Pricing, brands, payback and maintenance Build this as a separate content section after the selection guide. ### Price-tier table Render the five supplied market tiers in a real table. Include the supplied: - Price band - Equipment category - What the buyer receives at that tier - Support or ownership trade-off Visually distinguish the tiers represented by products sold on this page, but do not imply that unsupported marketplace products are available for purchase. On small screens, use a horizontally scrollable table with a visible scroll affordance. Keep the table headers associated with cells. ### Brand positioning Keep the flagship-brand comparison as normal prose directly after the tier table. Do not use unverified brand logos. Do not imply that products are equivalent to flagship platforms beyond the specific wavelengths, pulse classes or measured specifications stated in the supplied copy. ### Payback example Place the supplied worked example in a highlighted calculation box. Use the theme’s callout component and clearly separate: - Per-session assumptions - Sessions per week - Monthly financing or ownership cost - Example revenue/output Keep all qualifications and assumptions visible. Do not turn this into an interactive calculator unless the written content explicitly supplies calculator behavior. ### Maintenance Render the upkeep content as a short visible list. Preserve intervals, part-life figures, warranty qualifications and annual-budget guidance exactly as supplied. Place a financing CTA at the end of this overall section. Connect it to the site’s real financing flow. --- ## 8. Buying-confidence section Build the supplied content in this order: 1. State regulations and operator requirements 2. Home devices and cheap marketplace units 3. Warranty, training and support 4. Manufacturer, certification and testing 5. Items included in the box ### State-rule lookup Use a two-column block: - **Left:** supplied regulations copy - **Right:** state-rule lookup or specialist-confirmation panel If the site already has a maintained state requirements table, provide the supplied link to it. Otherwise use a short specialist form rather than attempting to generate legal advice automatically. Form fields: - State - Practice type or professional role - Name - Business email - Phone, if standard for the site - Optional machine of interest - Required consent checkbox where applicable Submit through the existing CRM/contact endpoint and tag the lead as a tattoo-removal-machine regulation inquiry. Do not provide an automated “legal/illegal” result unless the site has a maintained, approved regulatory dataset. ### Professional-versus-home equipment Present this as a normal visible comparison passage. Do not link home devices into the professional product grid or promote them as alternatives. ### Warranty, training and support Use a checklist or compact support grid for the supplied items, including: - Warranty term and covered components - Response time and loaner policy - US parts availability - Technical support - Training format - Certification - Protocols, manuals and maintenance resources - Technical documentation - Operator references Only show commitments contained in the supplied content or actual commercial terms. ### Manufacturer trust strip Place a restrained trust strip with the manufacturer/testing passage. Use certification badges only when the certification is verified and a corresponding approved asset exists. Every badge needs an accessible text label. Do not create certification seals or use generic “FDA approved” graphics. ### In-the-box list Render the supplied parts list as an icon list or clean bulleted list. Keep the list visibly associated with the products’ inclusion terms. --- ## 9. Results, demo and reviews ### Before-and-after gallery Use side-by-side before-and-after pairs rather than hidden sliders. Each pair must have its complete caption visible underneath. Every caption must retain the supplied: - Machine model - Ink colors - Number of sessions - Session spacing - Wavelength and spot size - Skin type Use only consented, approved case images that correspond to the caption. Do not use stock imagery, generated results or one case image with another case’s settings. ### Demo video Embed the supplied video using the site’s normal responsive video component. - Use a poster image. - Defer loading the player until interaction where possible. - Keep the supplied caption visible below the video. - Add captions/subtitles to the video and provide a transcript if one is available. - Do not autoplay with sound. ### Operator reviews Render reviews as visible cards, not a hidden carousel. Each card must show: - Reviewer name - Practice type - Machine purchased - Supplied review - Rating or review date where supplied and verified Do not invent names, ratings or practice types. Link a review to the relevant product only when the relationship is verified. --- ## 10. Closing CTA Use a full-width theme callout after the proof section. Include the supplied closing line and three actions: 1. Product-selection or purchase action 2. Apply for financing 3. Book a specialist call The first action should return the user to the product grid unless the supplied implementation includes an explicit selected product. Do not make a generic button add an arbitrary machine to the cart. The financing and call buttons must use the same real integrations used earlier on the page. --- ## 11. Visual treatment Follow the existing site theme rather than creating a microsite. - Use the theme’s standard container widths, spacing scale, buttons, cards, tables and form controls. - Keep educational prose on a narrower reading measure, approximately 70–80 characters per line. - Technical tables and product grids may extend to the full content width. - Use restrained badges only for laser class and verified certification. - Avoid excessive gradients, animated counters, medical imagery or decorative stock icons. - Use consistent units and notation throughout: `nm`, `ns`, `ps`, `mJ`, `J`, `Hz`, inches and pounds as supplied. - Do not place important text inside images. --- ## 12. Accessibility and responsive behavior - One H1 only. - Preserve logical H2/H3 nesting. - All buttons and filter controls must work by keyboard. - Provide visible focus states using the theme’s accessible focus style. - Use native buttons for actions and links for navigation. - Give each table a visible heading or accessible caption. - Maintain adequate color contrast for badges, financing text and stock labels. - Do not communicate availability or comparison results by color alone. - Give product and gallery images useful alternative text. - Mark decorative imagery with empty alt text. - Stack two-column sections into one column on mobile. - Allow tables to scroll horizontally without clipping content. - Keep tap targets at least 44×44 CSS pixels. - Announce filter updates and add-to-cart results to assistive technology. --- ## 13. SEO and structured data Use the supplied SEO title and meta description. Do not make the visible H1 identical to the title unless that is how the written page is supplied. Add or retain: - Self-referencing canonical URL - `BreadcrumbList` - `CollectionPage` - `ItemList` containing the products in their displayed order - Product offer data using current price, currency, availability and product URL - `VideoObject` only when the required video metadata is available For product or review structured data: - Use only current catalog values. - Include `AggregateRating` or `Review` only for genuine reviews tied to the relevant product. - Do not add FAQ schema; this page should not be converted into an FAQ. - Do not use medical-clinic or physician schema for the retailer. Ensure anchor links are crawlable links with real fragment URLs. --- ## 14. Performance - Use responsive image sources and modern formats supported by the site. - Load the hero image eagerly with appropriate priority. - Lazy-load product images below the first viewport, guide media and gallery images. - Reserve image dimensions to prevent layout shift. - Defer the demo video player until interaction. - Do not install a second filtering, review or modal library when the theme already provides one. - Keep all key copy and product data present in server-rendered HTML rather than depending entirely on client-side rendering. --- ## 15. Analytics Use the site’s existing analytics/data-layer conventions. Track: - Quick-pick row-link clicks - Filter changes and filter resets - Product-card impressions - Add-to-cart attempts and successes - Specialist-form opens and submissions - Financing clicks - State-rule inquiry submissions - Demo video starts and completions - Final CTA clicks Include product ID, product group, price and page location where available. Do not send sensitive form values into analytics. --- ## 16. Final acceptance checklist Before publishing, verify that: - The page is an active collection page with one canonical URL. - The hero contains no sales CTA beyond product-row links. - All three quick-pick routes reach the correct anchored rows. - All four product groups appear in the required order. - Filters work across every group and can be reset. - Every product card shows full price, pulse width with unit, wavelengths, energy, spot size, repetition rate, delivery/cooling, electrical/size information, availability and purchase controls. - Add to cart uses the live cart and never adds an arbitrary variant. - Financing figures and links use the approved provider. - No technical values, ratings, testimonials or certifications were invented. - Both comparison tables are real accessible tables. - Buying guidance and regulatory answers remain expanded and visible. - The state inquiry reaches the existing CRM or contact destination. - Every before-and-after image matches its caption and has approval. - The video is captioned and does not autoplay with sound. - Operator reviews identify the practice type and machine. - The final financing and consultation actions work. - Mobile layouts do not clip filters, cards, tables, forms or captions. - Prices, stock status and structured data agree with the live catalog.