Adding Patterns to Your Konfiwear Account

---

Before You Begin

Make sure you have the following ready:

• An active Konfiwear account with admin or owner access

• An SVG pattern file designed to tile seamlessly (see SVG requirements below)

• The SVG hosted at a publicly accessible URL (e.g., Supabase Storage, S3, or any CDN)

⚠️ Important: The Patterns module currently requires a public URL for the SVG file. Direct file upload from the dashboard is planned for a future update. You'll need to host your SVG externally and paste the URL during creation.

---

Setup Instructions

1. Navigate to the Patterns page

From your account dashboard, click Patterns under the Customizer section in the left sidebar.

Caption: The Patterns link in the sidebar under the Customizer section.

2. Open the pattern creation dialog

Click the Add Pattern button in the top-right corner of the Patterns list page. A dialog opens with the creation form.

3. Fill in the pattern details

Complete the following fields:

Caption: The pattern creation dialog with sample data entered.

💡 Tip: Use a naming convention that includes the pattern style and a distinguishing detail — e.g., "Stripes - Horizontal Thin", "Stripes - Diagonal Thick". This helps customers quickly find the right pattern in the grid.

4. Save the pattern

Click Save to create the pattern. The dialog closes and the new pattern appears in the list. You can click it to open the detail page.

---

5. Verify the SVG preview

Click the newly created pattern in the list to open its detail page. On the right column, the Preview card renders your SVG at its natural aspect ratio.

Check for:

• The SVG renders correctly — no broken images or missing elements

• Fill colors are visible and distinct (these become the recolorable swatches in the customizer)

• The proportions look correct at thumbnail size

Caption: The pattern detail page with the SVG preview rendering correctly.

If the preview shows a placeholder icon instead of your pattern, the URL may be incorrect or the SVG file may not be publicly accessible. See the Troubleshooting section below.

---

6. Edit pattern details (optional)

On the detail page, the Info card in the left column lets you update any field:

1. Click the edit icon next to the field you want to change (Name, Image URL, or Status)

2. A modal dialog opens with the current value

3. Make your changes and click Save

Changes take effect immediately after saving.

---

Hosting Your SVG

Since the Patterns module requires a URL, here are recommended hosting options:

⚠️ Important: The SVG URL must be accessible without authentication. If the URL requires login or returns a redirect, the customizer won't be able to load the pattern.

---

SVG File Requirements

For reliable rendering and recoloring in the customizer, your pattern SVGs should meet these specifications:

---

Verify It Works

Follow these steps to confirm your pattern is working in the customizer:

1. Navigate back to the Patterns list and confirm your new pattern appears with the correct name and status

2. Open the customizer with a product that has patterns enabled

3. Go to the Patterns panel in the customizer

4. Select a zone (e.g., primary or sleeves) and click your pattern's thumbnail

5. Verify:

   • The pattern tiles correctly across the zone shape

   • Scale, rotation, and opacity sliders work

   • Per-fill color pickers show the correct colors from your SVG

   • The 3D model updates in real time

✅ Done! Your pattern is live and available for customers to apply in the 3D customizer.

---

Troubleshooting

The preview shows a placeholder icon instead of my SVG Check that the Image URL is correct and publicly accessible. Open the URL directly in your browser to verify it returns the raw SVG. Ensure the server sets the Content-Type header to image/svg+xml.

The pattern doesn't appear in the customizer Verify the pattern's Enabled status is set to on. Also confirm that the product you're testing with has patterns enabled in its customizer configuration (the enablePatterns flag in the product's customizer JSONB).

Colors aren't showing in the recolor controls The customizer detects fills using regex pattern matching on the SVG text. Make sure your fills use standard hex notation (#RRGGBB or #RGB). Fills defined with rgb(), hsl(), or named colors (e.g., red) are not detected.

The pattern has visible seams when tiled Your SVG isn't seamlessly tileable. Open the SVG in your design tool and ensure the edges match perfectly when repeated. Many vector tools have a "tile preview" mode to verify this.

The pattern renders at the wrong size Your SVG likely lacks a viewBox attribute. Add one that matches the intended tile dimensions (e.g., viewBox="0 0 256 256" for a 256×256px tile).

💡 Tip: If you're still experiencing issues, contact our support team at support@konfiwear.com or use the live chat in your dashboard.

---

Next Steps

Now that your pattern is added, here's what to do next:

• → Understanding the Patterns Module — Learn about pattern rendering, zone interaction, and how patterns connect to designs and colors

• → Understanding the Designs Module — Designs define the zones that patterns apply to — understand the relationship

• → Creating a Design — Set up designs that work with your patterns