# Design

Customize your guideflow's appearance to fit your brand.

(e.g. customize a guideflow to match your brand by changing colors and button style) 

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/CV9zMHODMHY>" %}

* Open the "Design" tab on the right panel.
* Pick your guideflow's main color (called "Primary Color"). It will become your guideflow's main color (call-to-actions, popup, etc.).&#x20;
* If you want a default call-to-action type, Click on "Default type" to select your call-to-action type (e.g. Hotspot).

### Design options:

* [Customize Hotspot style](#customize-hotspot-style): if you want to customize your hotspot design.&#x20;
* [Customize Walkthrough style](#customize-walkthrough-style): if you want to customize your walkthrough design.
* [Customize start/end popup style](#customize-start-end-popup-style): if you want to customize your start/end popup design.
* [Customize checklist style](#customize-checklist-style): if you want to customize your checklist design.
* [Customize theme design](https://docs.guideflow.com/help/edit-your-guideflow/design/theme): if you want to customize your theme design.

### Customize Hotspot style

A Hotspot is a pulsing dot that displays your audience where to click.

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/CV9zMHOAMHY>" %}

* If you want to define another color for Hotspots than the primary one, define a new one.&#x20;
* Select your Hotspots' style.
* Select your Hotspots' shape.&#x20;

### Customize Walkthrough style

A Walkthrough highlights a specific area where to click thanks to an overlay. In comparison to Hotspot, it contains two buttons and an overlay.&#x20;

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/CV9zMHOPMHY>" %}

* If you want to define another color for Walkthroughs than the primary color, define a new color.&#x20;
* Select your Walkthrough's shape.
* Toggle on to add an Avatar picture.
* Toggle off the step numbers to hide the number of steps of your guideflow.
* Toggle on "Border" to customize the border color.
* Toggle on "Custom overlay" to customize the overlay color and opacity.

### Customize start/end popup style

Start/end popup can be added at the beginning and/or the end of a guideflow.&#x20;

* Pick your "Start" button color, the secondary button color, and the background color of all your popup. Customize the color by using the gradient option for each of them.&#x20;
* Select your popup's shape.
* Customize the overlay color, opacity, and blur, or toggle it off to remove the overlay design.
* If you want to change the margins, toggle on "Custom margins" and customize new horizontal and vertical margins.&#x20;

### Customize checklist style

A checklist can be added to a guideflow to help users navigate between steps.

* If you want to define another color for your checklist, pick a new color.
* Select your checklist's shape.
* You can toggle off "Task counter" to remove the number of items indicated on the launcher button.
* You can toggle off "Progress bar" to remove the bar with the percentage of accomplishment.&#x20;
* You can toggle on "Search" to allow users to search for a specific checklist item.&#x20;
* You can toggle off "Checklist number" to remove item numbering.&#x20;
* Customize the overlay color, opacity, and blur, or toggle it off to remove the overlay design.
* If you want to change the margins, toggle on "Custom margins" and customize new horizontal and vertical margins.&#x20;

{% hint style="info" %}
A checklist item can also open an URL link instead of navigating to a defined step.
{% endhint %}