> ## Documentation Index
> Fetch the complete documentation index at: https://docs.payreque.st/llms.txt
> Use this file to discover all available pages before exploring further.

# PayRequest Page Styling

> Customize your PayRequest Page appearance with avatar, tagline, accent color, social links, and live preview

# PayRequest Page Styling

Customize your PayRequest Page to reflect your brand identity. The Styling tab provides a live preview that updates in real-time as you make changes, so you can see exactly how your page will look to visitors.

## Overview

Your PayRequest Page is your public-facing profile where customers can browse your products and make purchases. The Styling tab lets you personalize:

* **Profile Avatar** - Your photo or logo
* **Name & Tagline** - Your business identity
* **Bio/Description** - Tell visitors about yourself
* **Page Theme** - Crypto-native background and card style (Solana or Crypto Native)
* **Accent Color** - Your brand color for buttons and highlights
* **Social Links** - Connect up to 25 social platforms and contact options

<Tip>
  Changes in the Styling tab update the preview in real-time. No need to save to see how it looks!
</Tip>

## Accessing the Styling Tab

1. Navigate to **PayRequest Page** from the main menu
2. Click the **Styling** tab (between Dynamic Links and Settings)
3. The page displays a two-column layout:
   * **Left**: Live preview of your PayRequest Page
   * **Right**: Styling options and controls

## Live Preview

The left column shows a real-time mockup of your PayRequest Page. This preview:

* Updates instantly as you type
* Shows your avatar, name, tagline, and social links
* Displays your selected products
* Mirrors the dark theme of your actual PayRequest Page

<Info>
  The preview stays fixed while you scroll through the styling options, so you always see your changes.
</Info>

To see your actual live page, click **View Live Page** button to open it in a new tab.

## Profile Avatar

Your avatar appears prominently at the top of your PayRequest Page. You have two options:

### Option 1: Use Social Profile Avatar

If you've added social links, PayRequest can automatically fetch your avatar from those platforms:

| Platform    | How It Works                       |
| ----------- | ---------------------------------- |
| X (Twitter) | Uses your X profile picture        |
| GitHub      | Uses your GitHub avatar            |
| YouTube     | Uses your channel avatar           |
| Twitch      | Uses your Twitch profile picture   |
| Substack    | Uses your Substack author photo    |
| Telegram    | Uses your Telegram profile picture |
| SoundCloud  | Uses your SoundCloud avatar        |
| Website     | Uses your website's favicon        |

Simply click on any available avatar to select it. A blue checkmark indicates your current selection.

### Option 2: Upload Custom Avatar

1. Scroll to **"Or upload your own"** section
2. Drag and drop an image, or click to browse
3. Supported formats: JPG, PNG (up to 10MB)

<Tip>
  For best results, use a square image at least 200x200 pixels.
</Tip>

### Removing Your Avatar

Click the **Remove** button next to your current avatar to revert to the default placeholder.

## Tagline & Bio

### Your Name / Business Name

This is the main heading on your PayRequest Page. It appears large and prominent below your avatar.

* Use your personal name for freelancer pages
* Use your company name for business pages
* Keep it concise and recognizable

### Tagline

A short subtitle that describes what you do. Examples:

* "Creator of Laravel"
* "Web Development & Design"
* "Premium Coffee Roasters"
* "Digital Marketing Expert"

<Note>
  Your tagline appears directly below your name in a lighter color. Keep it under 50 characters for best display.
</Note>

### Description

A longer bio that tells visitors about you or your business. This appears below your social links and before your products.

Tips for a good description:

* Explain what you offer
* Highlight your expertise or unique value
* Keep it 2-3 sentences max
* Include a call to action if appropriate

## Page Theme

Give your page a crypto-native aesthetic with one of two premium themes. The **Page Theme** card sits directly above the Accent Color card in the Styling tab.

| Theme             | Look                                                                      |
| ----------------- | ------------------------------------------------------------------------- |
| **Default**       | Standard PayRequest dark style — clean and neutral                        |
| **Solana**        | Deep dark bg with purple-to-green radial glow, glowing purple card border |
| **Crypto Native** | Animated gradient mesh (cyan/violet), glassmorphism frosted-glass card    |

Themes control the background and card styling. Your accent color still applies on top — so you can combine a **Solana theme** with a purple accent for a fully Solana-branded page.

<Tip>
  See the full [Crypto Page Themes guide](/shop-and-checkout/crypto-page-themes) for screenshots and combination tips.
</Tip>

## Accent Color

Pick a brand color that's used across your PayRequest Page for buttons, highlights, and your avatar border. If you leave it unset, the page falls back to the default blue.

### Picking a Color

The Accent Color card gives you three ways to choose:

| Method                  | When to Use                                                                                                             |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Swatch palette**      | Pick from a curated set of 10 brand-friendly colors (Blue, Indigo, Violet, Pink, Red, Amber, Emerald, Teal, Sky, Black) |
| **Native color picker** | Click the small color square to open your operating system's color picker — useful for matching an exact brand color    |
| **Hex input**           | Type or paste a hex value like `#f59e0b` directly                                                                       |

A ring around the active swatch shows your current selection. The live preview updates instantly as you change colors.

### Where the Accent Appears

When you set a custom accent color, it's applied to:

* **The "Pay" button** on your PayRequest Page
* **Your avatar border** (the ring around your profile picture)
* **Selected product highlights** — the ring around the product card you've chosen
* **Other primary call-to-action buttons** in the customer flow

<Tip>
  Pick a color with strong contrast against the dark page background. Pure black or very dark colors can blend into the page; bright or saturated colors stand out best.
</Tip>

### Clearing the Color

Click **Clear** next to the picker to reset to the default. Your PayRequest Page will revert to the standard blue accent.

<Info>
  Accent color is a per-page setting. If you have multiple businesses or pages in the future, each can have its own accent.
</Info>

## Social Links

Social links serve two purposes:

1. **Display on your PayRequest Page** - Visitors can click each platform's brand icon to visit your profiles
2. **Avatar selection** - PayRequest fetches avatars from supported platforms

Your page supports **25 platforms** — everything from creator platforms like Instagram, TikTok, and OnlyFans to professional networks and direct contact options like email and phone. Each link appears on your public page with its official brand icon.

### Available Platforms

**Primary platforms** (always visible in the editor):

* Instagram
* TikTok
* Twitter/X
* YouTube
* Website

**More platforms** (click **Add More** to expand):

| Category           | Platforms                                                             |
| ------------------ | --------------------------------------------------------------------- |
| Streaming & Gaming | Twitch, Kick, Discord                                                 |
| Creator & Content  | Snapchat, Spotify, SoundCloud, Substack, Pinterest, Patreon, OnlyFans |
| Social & Community | Facebook, Reddit, Telegram                                            |
| Professional       | LinkedIn, GitHub, Calendly                                            |
| Direct Contact     | Email, Phone, WhatsApp, Signal                                        |

<Tip>
  The **Add More** section includes a search field — start typing a platform name to filter the list instantly instead of scrolling.
</Tip>

### Adding Social Links

<Steps>
  <Step title="Open the Add More section">
    The five most popular platforms are always visible. Click **Add More** to reveal the full list, and use the search field to jump straight to a platform.
  </Step>

  <Step title="Enter your profile URL">
    Paste the full URL (e.g., `https://instagram.com/username`) or just type the address without `https://` — PayRequest adds it automatically.
  </Step>

  <Step title="Add contact options">
    For **Email**, enter your address (e.g., `hello@example.com`) and for **Phone**, your number (e.g., `+31 6 12345678`). Visitors who click these icons get a ready-to-send email or phone call — PayRequest converts them to `mailto:` and `tel:` links automatically.
  </Step>

  <Step title="Check the live preview">
    Every link you add appears instantly in the preview with its brand icon, exactly as visitors will see it.
  </Step>
</Steps>

<Warning>
  Only add links to profiles you actively maintain. Broken links create a poor impression.
</Warning>

## Saving Your Changes

Click **Save Styling** at the bottom of the right column to save all your changes.

<Tip>
  While the preview updates in real-time, your changes aren't saved until you click the save button. The actual live page only updates after saving.
</Tip>

## Best Practices

<AccordionGroup>
  <Accordion title="Use a professional, high-quality avatar">
    Your avatar is the first thing visitors see. Use a clear, well-lit photo or a clean logo. Avoid blurry images or complex graphics that don't scale well.
  </Accordion>

  <Accordion title="Keep your tagline focused">
    Your tagline should instantly communicate what you do. Avoid jargon or overly clever phrases. Clear and simple wins.
  </Accordion>

  <Accordion title="Only include active social profiles">
    Quality over quantity. It's better to have 2-3 active profiles than 8 dormant ones. Remove links to profiles you no longer use.
  </Accordion>

  <Accordion title="Write your description for your audience">
    Think about who visits your PayRequest Page. What do they need to know? Focus on benefits and outcomes, not just features.
  </Accordion>

  <Accordion title="Test on mobile">
    After saving, visit your PayRequest Page on your phone to ensure everything looks good on smaller screens.
  </Accordion>
</AccordionGroup>

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="Why can't I see some avatar options?">
    Avatar options only appear for platforms where you've entered a valid social link. Add your social profile URLs first, then the avatar options will become available.
  </Accordion>

  <Accordion title="How do I change my PayRequest Page URL?">
    The URL handle is configured in the **Settings** tab, not the Styling tab. Go to Settings and update the "PayRequest Page Handle" field.
  </Accordion>

  <Accordion title="Can I use custom colors or fonts?">
    Yes — the **Accent Color** card on the Styling tab lets you pick any brand color (from the curated swatches, your OS color picker, or a hex value) for buttons, highlights, and your avatar border. The rest of the page uses a consistent dark theme; for deeper customization see [Custom CSS](/advanced-features/custom-css).
  </Accordion>

  <Accordion title="Why doesn't my avatar update immediately on the live page?">
    The preview updates in real-time, but the actual live page only updates after you click **Save Styling**. Make sure to save your changes.
  </Accordion>

  <Accordion title="What size should my avatar be?">
    Avatars are displayed at 96x96 pixels on desktop. Upload an image at least 200x200 pixels for crisp display on high-resolution screens.
  </Accordion>

  <Accordion title="Do email and phone links expose my contact details?">
    The email address and phone number you add are visible to anyone who visits your page — that's the point, visitors can contact you with one click. If you prefer not to share them publicly, simply leave those fields empty.
  </Accordion>

  <Accordion title="Can I link my OnlyFans, Twitch, or other creator profiles?">
    Yes. PayRequest Pages are built for creators — OnlyFans, Twitch, Kick, Discord, Patreon, Snapchat, and more are all supported with their official brand icons. Click **Add More** in the Social Links card and search for the platform.
  </Accordion>
</AccordionGroup>

## Related Documentation

<CardGroup cols={2}>
  <Card title="Crypto Page Themes" icon="palette" href="/shop-and-checkout/crypto-page-themes">
    Solana and Crypto Native themes for your payrequest.me page
  </Card>

  <Card title="Apple Wallet Card" icon="wallet" href="/shop-and-checkout/apple-wallet-card">
    Carry your PayRequest Page as a card in Apple Wallet
  </Card>

  <Card title="P2P Wallet Payments" icon="arrow-right-arrow-left" href="/payment-processing/p2p-wallet-payments">
    Let visitors send USDC directly to your wallet from your page
  </Card>

  <Card title="Custom Domains" icon="globe" href="/shop-and-checkout/custom-domains">
    Use your own domain for your PayRequest Page
  </Card>

  <Card title="Business Details" icon="building" href="/business-settings/business-details">
    Configure your business information
  </Card>

  <Card title="Product Display Layout" icon="squares-2x2" href="/shop-and-checkout/product-display">
    Switch between carousel and grid for your product showcase
  </Card>

  <Card title="Visitor Analytics" icon="chart-line" href="/analytics-and-reporting/payrequest-page-visitors">
    See how many people visit your PayRequest Page each day (Premium)
  </Card>
</CardGroup>