How the WordPress Setup Works
Your Apparel Studio is a single HTML file. To embed it in WordPress with full admin/visitor role separation, follow these steps:
Step 1 β Upload the HTML File
Go to WordPress Admin β Media β Add New
Upload apparel-studio-v3.html
Copy the file URL (e.g. https://yoursite.com/wp-content/uploads/2024/apparel-studio-v3.html)
Step 2 β Embed on a Page
Create a WordPress page. In the Gutenberg editor, add a Custom HTML block and paste:
<iframe
src="https://yoursite.com/wp-content/uploads/.../apparel-studio-v3.html"
width="100%"
height="800px"
style="border:none;border-radius:12px"
allowfullscreen
></iframe>
Step 3 β Admin vs Visitor Roles
The studio already has a built-in admin system:
π€ Visitors β see the designer, pick colors/logos/text, export PNG
π Admin β click "Admin" button, enter password (studio2024), upload models
To change the admin password, open the HTML file in a text editor and find:
const ADMIN_PASS = 'studio2024';
Replace with your own secure password.
Step 4 β Saving Models (Persistent Storage)
Currently: Models added by URL persist in browser localStorage.
File uploads are session-only (too large for localStorage).
Best practice for WP:
1. Upload your GLB files to WP Media Library or AWS S3 / Cloudinary
2. Copy the direct URL
3. In studio Admin β "Add by URL" β paste URL + select garment type
4. The studio saves URL-based models in localStorage β they persist across visits
Pro tip: Use the "WP Offload Media" plugin to get permanent CDN URLs for your GLB files.
Step 5 β CORS for 3D Models
If models are hosted on your own WP server, add to your
.htaccess:
<FilesMatch "\.(glb|gltf|obj)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
β
Recommended Workflow Summary
1. Upload GLB β WP Media or S3
2. Embed studio as iframe on WP page
3. Admin logs in β adds model URLs β sets UV zones
4. Visitors open page β select garment β customize β export PNG
5. Customer emails/submits the exported PNG with their order