🖼️Designing in Savvy

Quick guide to get started into styling flow components.

Some specific things like tags and a few component options are set on the Options Tab, but all of the styling itself gets done in the Design Tab. Here you'll find a detailed explanation of the Design Tab and its different areas.

Component and Element Selection

• Select the component you want to add styles to

• Go to the Design Tab on the Right Sidebar

• "Choose an element" will allow you to affect different parts of the component

Tagging Components

• Go to the Options Tab on the Right Sidebar

• Below the parent container dropdown, you'll see the component tags

• No tags? Just write a new tag for it

This is helpful and good practice if you are going to apply the same styles to similar components in the flow

Applying Styles

• Go to the Design Tab

• Choose whether to apply the styles to:

  • This particular component

  • All components with the same key

  • All components with the same tag

  • Etc.

Setting Styles

• Keep scrolling on that Design Tab until you get to the Styles List.

• Make your components beautiful.

Here you can add custom styles that are not included in the common styles list.

Using States

• At the bottom of the "Choose an Element" area, there's a "Use states" Toggle.

• Toggle it!

• This will let you style different states of the component such as hover, selected, etc.

Not all types of components have states, this feature is only available for components that do.

Useful Links

📏How to Center Components👗How to Style Buttons📽️How to Add a Video/GIF Placeholder to a Video Component🩺How to Use Custom Selectors🖥️How to make a Full-Page Flow📤How to set up a Micro-Product as a Popup on your Site🆘Common Button States and Styles