The Design Studio

The Design Studio is the heart of Mashup. The first time you reach it after a build, the page is fully generated — palette, copy, images all picked and arranged. From here, you decide what to keep and what to change before publishing.

The Studio is divided into four areas.

The canvas (centre). A live preview of the page exactly as it will appear when published. You can toggle between desktop and mobile views with the segmented control at the top. Click any text on the canvas to edit it inline. Click any image to swap or upload a replacement.

The section list (left). Every section on the page appears here in order. Drag to reorder. Click the eye icon to hide a section without deleting it (useful for A/B preparation). Click the trash icon to remove a section entirely. Click Add section at the bottom to insert one of the optional sections we did not include automatically — a comparison table, an additional FAQ block, a sticky bar, an announcement ticker, and several others depending on the template.

The inspector (right). When you select a section, the inspector shows everything you can change about it: section-specific text fields, the palette role this section uses (light, dark, accent), and any toggles such as "show ratings" or "hide secondary CTA". When you select an image, the inspector shows the source URL and offers replacement actions.

The header (top). Houses the Save, Preview, Publish, and palette-picker controls. The palette picker is worth a special note: Mashup generates four or five candidate palettes tuned to your product imagery, and you can flip between them with a single click. Each palette is applied to every section instantly, so you can compare aesthetic directions without leaving the Studio.

Editing Text

Click any text on the canvas to edit it inline. The Copy Studio is invoked automatically when you make significant changes — you can ask it to regenerate just one block with a different tone (more playful, more authoritative, more concise), and the rest of the page stays untouched. Copy regenerations are unlimited on every plan.

If you have a specific phrasing in mind, just type it. The page does not require AI for every word.

Editing Images

Click an image to open the image inspector. You can:

• Replace from your imported gallery.
• Upload a new image from your computer.
• Open AI Product Photos in a side panel to generate a fresh image and drop it into this slot.
• Adjust focal point — useful for mobile crops that default to centre but might cut the product in half.

Saving and Drafts

The Studio autosaves every few seconds. You can close the browser at any time and pick up exactly where you left off from My Pages. The only state that is not automatically saved is your draft palette choice — if you switch palettes without saving, leaving and returning resets to the previously saved palette.

Reviewing on Mobile

Click the mobile icon in the header to switch the canvas to a mobile viewport. The published page is fully responsive; this preview is a faithful representation of what mobile shoppers will actually see. Most stores see between 60% and 75% of traffic on mobile, so we strongly recommend reviewing in this mode before publishing.