Part 1Build objective
Use the client’s existing:
- Header, footer, navigation and breadcrumb styles
- Collection and product-card components
- Cart, inventory and variant logic
- Financing integration
- Review platform
- Forms, CRM and scheduling integrations
- Typography, spacing, colors, buttons and form controls
- Shipping, warranty, return and policy data
Do not introduce a visually separate microsite or duplicate live commerce functionality.
Source hierarchy
When values differ or are unavailable, use this order:
- Live product/catalog and policy data
- Facts explicitly supplied in the written page
- Existing site-wide components and settings
Never invent prices, monthly payments, stock status, shipping locations, regulatory status, review counts, warranty terms or response times. Suppress an unavailable field rather than filling it with a guess.
Keep the writer’s wording and headings. Do not replace them with headings from this guide. Identify sections by their subject and order.
Part 2Page shell and hierarchy
Build on the site’s standard full-width collection template with a restrained content width for passages and wider containers for grids and tables.
Required order:
- Breadcrumb and opening hero
- Products, filters and prices
- RF type comparison
- Choose by concern
- How RF works, results and recovery
- Professional machines versus home devices
- Safety and operator requirements
- Prices, running costs and payback
- Buyer reviews
- Quote/demo form
Use one H1 only. Preserve the supplied H2 and H3 hierarchy. Do not turn the educational sections into a collapsed FAQ or hide important content in accordions.
Add comfortable section spacing and subtle background changes where useful, but keep the products and purchasing actions visually dominant.
Part 3Opening hero
Layout
Use:
- Breadcrumb above the hero
- Two-column hero on desktop
- Copy first and image second
- Single-column on mobile, with copy before image
- Full-width trust strip immediately below the hero
The copy column contains:
- H1
- Lead definition paragraph
- Short “used in” or suitable-settings line
Use a real image of one of the collection’s consoles with its handpieces, preferably shown in legitimate use. If no approved in-use image exists, use a high-quality product image rather than generic spa stock.
Trust strip
Render the supplied warranty, training, support, parts, returns and financing statement as readable text. Decorative checkmarks or separators are acceptable, but the meaning must not depend on icons.
Do not turn “FDA registered” or “FDA cleared” into an “FDA approved” badge.
Part 4Product collection and filters
This is the main commercial section and should appear before the long explanations.
Intro and quick paths
Place the supplied collection introduction directly below its H2.
Below it, render the short passages for facial, body, face-and-body, fractional/microneedling and 448 kHz or monopolar equipment as compact quick-path rows or cards. Each should include a visible filter control tied to the corresponding product attribute.
Selecting a quick path must:
- Apply the relevant product filter
- Move focus to or scroll to the filtered grid
- Update the URL query string where the site supports persistent filters
- Be removable without reloading the full page
Filter toolbar
Provide filter controls for:
- Face
- Body
- Face and body
- Fractional or microneedling
- 448 kHz
- RF type where catalog data permits
- Price band
- Financing availability
Provide sorting by:
- Featured/default
- Price, low to high
- Price, high to low
- RF type
Use accessible buttons, checkboxes or the site’s established collection-filter component. Chips must have a clear selected state and expose aria-pressed or equivalent state.
On mobile, the full filter set may open in the site’s standard filter drawer, but active filters and result count must remain visible above the grid.
Product grid
Use the existing collection grid:
- Four columns on wide desktop if card width remains readable
- Three or two columns at intermediate widths
- One column on narrow mobile
Every card should source live values and include:
- Product image
- Machine name linked to its product page
- RF type: monopolar, bipolar, multipolar, fractional, 448 kHz or hybrid
- Treatment areas
- Included standard handpieces
- Current price or accurate “From” price
- Monthly financing figure from the live financing provider
- Regulatory status, phrased accurately
- Live stock status
- “Ships from [US location]” only when verified
- Add to cart
- Request a quote
Also show the supplied starter consumable inclusion where it applies.
Do not calculate financing manually. Use the provider’s widget or approved calculation rules so monthly figures remain synchronized with variants and price changes.
If a machine is marked quote-only in the catalog, make “Request a quote” the primary action and do not create a nonfunctional add-to-cart button. The quote action should populate the machine field in the final form.
Regulatory information should use a neutral label such as Regulatory status. Link to the applicable document or detail page when one exists.
Part 5RF type comparison
Place the writer’s type-comparison table directly after the product grid.
Desktop layout
Use a wide comparison area with:
- Comparison table as the primary element
- Simple RF-depth diagram beside it where space permits
The table columns are:
- RF type
- How current travels
- Typical depth
- Best suited to
- Operator note
- Price band in this range
The rows cover the six types described in the copy: monopolar, bipolar, multipolar, fractional/microneedling, 448 kHz capacitive/resistive and hybrid.
Depth diagram
Create a lightweight SVG or CSS diagram rather than a large image. It should illustrate relative treatment depth for the relevant RF types and be labeled Illustrative; not to scale.
Do not encode essential information only in the diagram. Associate it with a text description or the adjacent table for screen-reader users.
Follow-up passages
Keep each supplied comparison topic under its own H3:
- Monopolar versus bipolar
- Fractional RF and RF microneedling
- Facial versus body equipment
- Dedicated versus multifunction equipment
- RF versus HIFU
Use a two-column text layout only where each passage remains easy to scan. Stack all passages on mobile.
Part 6Choosing by concern
Render the concern-to-machine information as a second comparison table.
Columns:
- Concern or treatment goal
- Suitable machine type
- Machines in this collection to consider first
- What may rule that option out
Any machine names in this table should link to the relevant product detail page or filtered product result. Do not link to unavailable products.
Place the numbered five-step decision process immediately below the table. Use a true ordered list with visibly numbered steps, not five unrelated cards.
Place the high-volume-clinic passage after the steps in a lightly emphasized callout. It should remain informational rather than looking like a promotional banner.
Part 7How RF works, results and recovery
Use the supplied H2 and H3 headings. On desktop, this section may use two balanced columns of content cards or passages. Preserve logical reading order in the DOM.
Include the supplied topics covering:
- Heating mechanism
- Evidence and realistic limits
- Benefits and suitable candidates
- Results timeline
- Downtime and tradeoffs
- What operating a session involves
Benefits and candidate content
Use ordinary bullets for the supplied benefits and candidate criteria. Do not add treatment claims, percentages or before-and-after imagery unless those assets and claims are already approved by the client.
Results timeline
Build a simple horizontal timeline on desktop and vertical timeline on mobile. The visual milestones should be derived only from the supplied paragraph, such as:
- Same-day firmer feel
- First visible changes
- Peak result
- Maintenance
The full explanation must remain in visible text next to the graphic. Do not reduce the passage to unexplained timeline labels.
Part 8Professional versus home devices
Render the supplied comparison as a table with rows for:
- Depth and output
- Controls
- Schedule and expected results
- Price and consumables
Use columns for professional equipment and home handheld devices, with the comparison criterion as the first column.
Follow it with the home-buyer passage. Include a soft link back to the relevant home-suitable filter in the product grid. The link should apply the filter and move the visitor to the products.
Do not classify fractional or microneedling units as suitable for home use.
Part 9Safety and operator requirements
This section should be visually calm and authoritative, not styled as an alarm banner.
Safety passage and checklist
Place the risk-and-controls paragraph first. Follow it with the contraindication and screening checklist in two columns on desktop and one column on mobile.
Use real list markup and visible checkboxes only as decorative checklist markers; users should not be able to submit or “complete” this list.
Do not add a blanket claim that RF is painless, risk-free or safe for every person. Preserve the distinction between pigment independence and individual contraindications.
Regulatory status
Place the FDA terminology passage in a bordered information note. Do not display an FDA logo or approval seal. Preserve the distinction between:
- Approved
- Cleared
- Registered
- Intended use
Only display device-specific numbers when supplied by verified catalog or document data.
Operator rules
Keep the operator-scope paragraph visible. Link to a state-by-state scope page only if that page exists. Otherwise link to the appropriate general compliance or contact route rather than creating a dead link.
The nearby quote CTA should state that intended-use and compliance documents can be supplied, only where this is supported by the written copy and business process.
Part 10Price, running costs and payback
This section contains several distinct components.
Price explanation
Use the writer’s paragraph as standard editorial content. References to branded systems are comparisons only; do not add competitor logos, product cards or outbound purchase links.
Worked payback example
Place the worked example in a compact calculation box with:
- Total investment
- Net revenue per session
- Sessions to break even
- Time to break even at the stated weekly volume
Use the exact figures and assumptions in the supplied copy. Do not turn it into an interactive calculator unless the site already has an approved calculator component.
Label it as an example so it is not presented as a guaranteed return.
Consumables table
Columns should include:
- Item
- Single-use or reusable
- Replacement interval or use
- Cost per session or stated cost band
Rows should cover the consumables and maintenance items present in the copy, including gel, pads, heads, fractional cartridges, cooling fluid and service where applicable.
Do not attach a consumable to machines that do not use it.
Included support and policies
Use separate compact blocks for:
- Training and onboarding
- Warranty and support
- Shipping, returns and financing
- Manufacturing, certification and inspection
Where the copy gives global collection terms, include them here. Product-specific differences should remain on product pages or cards.
Link policy references to the site’s live policy pages. Do not duplicate policy text in a way that can drift out of date.
Part 11Reviews
Use the site’s real review source. Do not hard-code invented testimonials.
Display:
- Live average rating
- Live review count
- Review cards
- Filter or sort by machine when the review platform supports it
Each review card should show available verified context:
- Reviewer name or approved display name
- Business type and state
- Machine purchased
- Time owned
- Areas treated
- Review text
- Verified-purchase marker only when verified by the review system
Include reviews that mention limitations or a learning curve when genuine reviews of that kind are available. Do not rewrite reviews to manufacture balance.
If no valid reviews exist, omit the rating summary and show the site’s approved empty state rather than displaying zero-star markup or placeholder reviews.
Do not use a rotating carousel as the only way to access reviews. A grid or list is preferable.
Part 12Quote and demo section
Build the final section as a prominent but theme-consistent conversion panel.
Content and actions
Include:
- The supplied closing paragraph
- Quote/advice form
- Separate “Book a video demo” action
- Stated response time, if verified
- Repeated trust statement below the form
Use the existing scheduler for the video demo. Open it in the site’s standard modal or linked booking page.
Form fields
Include:
- Name
- Phone
- Business type
- State
- Concerns or services to be treated
- Budget band
- Face, body or both
- Machine of interest
- Current license or operator status
Use appropriate controls:
- State: select
- Budget: select or radio group
- Treatment area: radio group or checkboxes
- Machine: select populated from the live collection
- Concerns: textarea or controlled multi-select
- License status: select with a neutral “Not sure” option
Require only the information needed to respond: name, email, state, business type and use case. Phone may remain optional unless the client’s established sales process requires it.
A product-card quote CTA should jump to this form and preselect the relevant machine.
Form behavior
Use the site’s existing CRM/form endpoint and include:
- Inline accessible validation
- Clear error summary
- Visible success confirmation
- Spam protection
- Privacy-policy link
- UTM parameters and page URL in hidden fields
- Selected machine/filter context in hidden fields where available
Do not place the full form in multiple locations. Product CTAs should route to this single form.
Part 13Responsive treatment
Mobile
- Stack hero content before the image
- Keep price and primary product actions above secondary card details
- Use the existing filter drawer
- Show active filter chips above results
- Convert comparison-table rows into labeled cards when supported
- Otherwise provide a contained horizontal scroll area with a visible cue
- Stack all two-column copy and checklist layouts
- Convert the results timeline to vertical
- Keep buttons at least 44px high
- Avoid horizontal page overflow
Tables
Every table must have:
- A visible caption or immediately preceding heading
- Proper header cells
- Correct row and column scope
- Adequate contrast
- Sticky first column only if it does not impair mobile use
Do not place tables inside accordions.
Part 14Accessibility
Meet the site’s current accessibility standard, at minimum:
- Logical heading order
- Keyboard-operable filters, sorting, modals and forms
- Visible focus styles
- Descriptive link and button labels
- Programmatic filter state and result announcements
- Text alternatives for meaningful images
- Empty alt text for purely decorative graphics
- Form labels that remain visible
- Error messages connected to their fields
- No information conveyed by color alone
- Reduced-motion support for scrolling or timeline effects
Product images should use concise alt text based on the machine name and visible configuration, not keyword-stuffed descriptions.
Part 15SEO and structured data
Use the written page’s supplied SEO title and meta description. Follow the site’s URL convention for collection pages and add a self-referencing canonical.
Add:
BreadcrumbListItemListfor the visible product collectionProductandOfferdata through the existing commerce implementationAggregateRatingandReviewonly when sourced from genuine live review data
Ensure structured prices, currency, availability and ratings match visible live content.
Do not add FAQ schema because this is not an FAQ page. Do not mark editorial statements or worked ROI examples as product offers.
Keep all core explanatory copy server-rendered and indexable. Filtering may be client-side, but the default product list must render without requiring search-engine interaction.
Part 16Performance and media
- Eager-load the hero image and set explicit dimensions
- Lazy-load below-the-fold product and review images
- Use responsive image sizes and the site CDN
- Avoid heavy animation, auto-playing video and unnecessary sliders
- Build the depth diagram and timeline as lightweight HTML/CSS/SVG
- Prevent layout shift from financing widgets and review embeds
- Preserve usable product browsing if third-party financing or review scripts fail
Part 17Analytics
Use the client’s existing analytics conventions and track:
- Filter selected/removed
- Sort changed
- Product card viewed
- Product detail click
- Add to cart
- Request quote click
- Machine preselected in form
- Quote form started
- Quote form submitted
- Video demo booked
- Financing link or widget interaction
Do not add a second analytics library.
Part 18Final acceptance checklist
Before publishing, confirm that:
- There is one H1 and all supplied sections appear in the required order.
- Products and prices appear before the long buying guide.
- Filters work, expose state accessibly and use live product attributes.
- Every purchasable card has working cart and quote paths.
- Financing, stock, price and shipping values come from live data.
- Regulatory wording never turns “cleared” or “registered” into “approved.”
- The RF type, concern, professional-versus-home and consumables comparisons are visible and usable on mobile.
- The results timeline does not replace its explanatory text.
- Safety, contraindications and operator rules are not hidden.
- ROI figures are labeled as examples rather than guarantees.
- Reviews are genuine and schema values match the visible review data.
- Quote CTAs preselect the applicable machine.
- The form reaches the existing CRM and has a tested confirmation state.
- No dead policy, compliance or state-scope links remain.
- No invented claims, terms, testimonials, badges or catalog values were added.
- The page works with keyboard navigation, at 200% zoom and on narrow mobile screens.
- The default collection and core copy remain indexable without interacting with JavaScript.