> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replo.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Select Mode
> Click an element and change color, font, alignment, or copy yourself, without sending a chat message
export const Screenshot = ({src, altText, width, shadow = true}) => {
const generateAltText = imageSrc => {
if (!imageSrc) return "Screenshot";
const filename = imageSrc.split("/").pop() ?? "";
const nameWithoutExt = filename.replace(/\.[^/.]+$/, "");
const readable = nameWithoutExt.replace(/[-_]/g, " ").replace(/\b\w/g, char => char.toUpperCase());
return readable === "" ? "Screenshot" : readable;
};
const finalAltText = altText ?? generateAltText(src);
const imageWidth = width ? `${width}px` : "100%";
return ;
};
Select mode lets you click something on the page and edit it yourself or ask Replo for specific changes. Change colors, fonts, images, links, etc directly from the toolbar, double-click text to type, or ask Replo to rewrite that same selection. You don't have to describe where the element is, and you don't have to go through chat for everyday tweaks.
You can update the page manually in select mode. The toolbar applies color, font, alignment, image, links, and more changes as soon as you pick a value. Chat is optional for those edits.
***
## Turn on select mode
In [Site Builder](/apps/website-builder), click the **cursor icon** in the chat composer, just left of the send button. It highlights when select mode is on.
The builder then prompts you to **select any content to target your edits**. Hover to highlight an element, then click it.
***
## Edit it yourself
When you click an element, a toolbar appears on the selection. Use it to change that element directly. These controls apply immediately. You do not need to type a prompt or press send.
The controls you see depend on what you selected:
* **Color**: text color and background. Open it to pick a brand token or a custom color.
* **Alignment**: left, center, right, or justify. Shown on text.
* **Font**: font family, size, and weight. Shown on text.
* **Image**: replace the image source. Shown on images.
* **Link**: change the URL. Shown on links.
* **Properties**: component settings, when the selection is a [component](/features/site-components).
### Type on the page
Double-click text to type directly on the page. While you are typing, the toolbar adds **Bold**, **Italic**, **Underline**, and **Strikethrough**.
Some text comes from a product field or a translation and cannot be typed into. Select mode tells you to ask for changes instead.
***
## Ask Replo to change it
Chat is still there when you want a rewrite, a layout change, or anything the toolbar doesn't cover. With an element selected, type in the **Ask for changes** composer. Replo updates just that selection, or uses that selection as context to make your change.
Examples:
* "Make this headline more compelling"
* "Add a button under this text"
* "Turn this into a three-column grid"
* "Make this a product buy box for @Product"
If the selected element belongs to a component in the [Component Library](/features/site-components), a link to that component appears so you can jump to its definition.
Edits auto-save in the background, but will not show on the live page until you publish.
***
## Delete an element
Select a section or element and ask Replo to remove it. You can restore deleted elements with [Version History](/features/version-history).
## Product sections
When you attach a product, Replo can build a product buy box around it. Ask it to add any of these:
* Product image carousels
* Dynamic titles, prices, descriptions, strikethrough/compare-at prices
* Variant, option, and quantity selectors
* Example content like FAQs and review layouts
* Add to Cart and Checkout buttons
* Subscribe and Save / selling plan tabs and dropdowns
* Bundle builders
* Checkboxes for free gifts and product upsell offers
All of that content stays editable. Use the toolbar for color, font, and alignment, or ask Replo to update it after it is built.
***
## Related
Preview and review your site.
Undo an edit.
Write a request that lands.
Reuse a design across pages.