Customize Your Store
Learn how to customize your hosted store's branding, manage products, and preview changes in real-time
Once your hosted store is created, you can customize every aspect of its appearance and manage the products displayed on your storefront. This guide walks you through the store editor interface and shows you how to make your store uniquely yours.
Accessing the Store Editor
Navigate to Stores
Click Stores in the main navigation sidebar.
Select Your Store
Click on the store you want to customize to open the store dashboard.
Click Edit Store
Click the Edit Store button to open the visual editor, or click View to see your live storefront.
Store Editor Overview
The store editor provides a side-by-side view with editing controls on the left and a live preview on the right.
Editor Navigation
The editor has three main tabs at the top:
| Tab | Purpose |
|---|---|
| Editor | Visual customization of your store's appearance |
| Billing | Manage Stripe payments and view transaction history |
| Settings | Configure domain, email notifications, and store visibility |
Page Selector
Use the dropdown in the top-right corner to switch between different pages of your store:
- Home page - Your main landing page with hero section and featured products
- Catalog - Product listing page
- About - Your brand story
- Contact - Customer contact information
Customizing Store Identity
The Identity section controls your store's core branding elements that appear across all pages.
Store Name
Your store name appears in the header and browser tab:
- Click on the Store Name field
- Enter your desired store name
- Changes save automatically
Tagline
The tagline appears in your hero section and SEO metadata:
- Click the Tagline text area
- Write a compelling description of your business
- This text is also used for search engine optimization
Keep your tagline concise but descriptive. It helps customers understand what makes your coffee unique.
Logo and Favicon
Add your brand assets for a professional look:
- Logo URL - Enter a URL to your logo image (displayed in the store header)
- Favicon URL - Enter a URL to your favicon (displayed in browser tabs)
Click the upload icon next to each field to browse and upload images directly.
Social Links
Connect your social media profiles:
- Select a platform from the dropdown (Instagram, Facebook, etc.)
- Enter your username (not the full URL)
- Click the trash icon to remove a social link
- Add multiple platforms as needed
Customizing Store Sections
The left sidebar contains different sections you can customize:
| Section | What You Can Edit |
|---|---|
| Identity | Store name, tagline, logo, favicon, social links |
| SEO | Meta descriptions and search optimization |
| Style | Colors, fonts, and visual theme |
| Nav | Navigation menu items |
| Sections | Hero, featured products, testimonials, etc. |
| Settings | Advanced store configuration |
| Media | Image library and uploads |
Managing Products for Your Store
Products are managed separately from the store editor. Here's how to edit products that appear in your store.
Viewing Your Products
Go to My Products
Click My Products in the main navigation to see all your products.
View Product Details
Click on any product to open its detail page.
Product Detail Page
The product detail page shows all information about a product and provides quick actions.
Product Information
- Product Name - Click the edit icon to rename your product
- Description - Add a compelling description that appears on your storefront
- Store Price - Set the price customers will pay
- Status - Shows if the product is Active or Draft
Product Images
Your product displays with automatically generated 3D renders:
- Featured Image - The main image shown in product listings (marked with a star icon)
- Additional Images - Carousel images for the product page
- Click Add Product Image to upload custom photos
Set Featured Image
Hover over any product image and click the star icon to set it as the featured image.
Upload New Images
Click Add Product Image to open the upload modal.
Drag and drop or click to select files. Supported formats: JPG, PNG, WEBP (max 20MB).
Remove Images
Hover over an image and click the X icon to remove it from the product.
Editing Product Details
Update Product Name
Click on the product name or the edit icon next to it.
Enter the new name and click the checkmark to save, or X to cancel.
Update Description
Click the edit icon next to the Description section.
Enter your product description. This text appears on your storefront's product page.
Click the checkmark to save your changes.
Update Store Price
Click on the Store Price value or the edit icon.
Enter the new price and save. You'll see a confirmation message when the price is updated.
The Store Price is what customers pay on your Roastify hosted store. This may differ from prices on other sales channels like Shopify.
Managing Store Integrations
Products can be pushed to multiple sales channels. The Integrations panel shows which stores have this product.
View Connected Stores
The Integrations section shows which Roastify stores and Shopify stores have this product.
Manage Integrations
Click Manage Integrations to add or remove the product from different stores.
Select a Store
In the modal, you'll see available Shopify stores and Roastify stores. Click Select to push the product to that store.
Product Actions
The Actions panel provides quick access to common tasks:
| Action | Description |
|---|---|
| Download Images | Download all product images as a ZIP file |
| Share 3D Model | Get a shareable link to the 3D product preview |
| Edit Design | Open the product designer to modify artwork |
| Delete Product | Permanently remove the product |
Previewing Your Store
Live Preview in Editor
The right side of the store editor shows a real-time preview of your store:
- Changes appear instantly as you make edits
- Use the page selector to preview different pages
- The preview is interactive - you can scroll and click
Viewing the Live Storefront
To see exactly what customers see:
From the Store Dashboard
Click the View button to open your live store in a new tab.
Browse Your Store
Navigate through your store as a customer would - view the homepage, browse products, and check product details.
View Product Pages
Click on any product to see its full detail page with description, tasting notes, and purchase options.
Store Settings
Access additional configuration options from the Settings tab.
Available Settings
- Store Visibility - Make your store visible or hidden from customers
- Email Settings - Configure order confirmation and shipping notification emails
- Domain Settings - View your subdomain or configure a custom domain
- Danger Zone - Option to permanently delete your store
Deleting a store is permanent and cannot be undone. All store data, orders, and settings will be removed.
Saving Your Changes
Most changes in the store editor save automatically. However, for major layout changes, click the Save Changes button in the top-right corner to ensure everything is saved.
When Changes Take Effect
- Store Editor changes - Appear immediately on your live store after saving
- Product changes - Update in real-time across all connected stores
- Domain changes - May take 1-48 hours for DNS propagation
Best Practices
Branding Tips
- Use high-quality images that represent your brand
- Keep your tagline focused on what makes your coffee special
- Ensure your logo is readable at small sizes
- Use consistent colors across your brand
Product Presentation
- Write detailed, appetizing descriptions
- Set competitive prices based on your market
- Use the best 3D render angle as your featured image
- Add multiple images to showcase different views
Regular Maintenance
- Check your store regularly from a customer's perspective
- Update product descriptions seasonally
- Refresh images periodically
- Monitor your pricing against competitors
Next Steps
Activate Your Store
Connect Stripe and go live with your store. Activate Store →
Create Products
Add more products to your store catalog. Create Product →
Manage Your Store
Monitor sales and handle day-to-day operations. Manage Store →