Aedify documentation / Elements

Buttons, icons and dividers

How to use Aedify's Button, Icon and Divider elements: every setting with its default, linking to products and pages with Browse, your theme's button style or Aedify's, icons from open-source sets with optional text, and labels screen readers need.

Last updated October 17, 20266 min read

Three small elements do a lot of work on a page:

Button: a link styled as a button, such as Shop now under a heading.
Icon: an icon from free, open-source icon sets, on its own or with text next to it. Good for "Free returns · Ships in 2 days" rows.
Divider: a horizontal line between parts of a page.

All three are in the Elements group of the palette. New to the builder? Start with Using the builder.

Buttons

A new button reads Shop now and doesn't link anywhere yet. Open its Settings to change both.

Button settings

Setting	Default	What it does
Label	Shop now	The text on the button
Accessible label	Empty	Optional. Read by screen readers instead of the label. See Labels for screen readers
Link	Empty	Where the button goes. See Linking
Open in a new tab	Off
Style	Primary	Primary, Secondary or Link
Look	Theme button (default)	Theme button or Aedify button. Not shown for the Link style
Alignment	Theme default	Theme default, Left, Center or Right
Icon	None	An icon before or after the label

Style and look

Style sets how prominent the button is:

Primary for the main action on a section, such as Shop the sale.
Secondary for a second action next to it, such as See the lookbook.
Link for a quieter text link. It always uses Aedify's look.

Look sets whose design the button uses:

Theme button (default) uses your theme's button style and primary colour, so it matches the buttons on the rest of your store. It works with themes that style Shopify's standard button classes, such as Dawn and Horizon.
Aedify button uses Aedify's own design, which you can change under Style.

Linking

Type an address in Link, or click Browse to pick something from your store: Products, Collections, Pages, Blogs or Blog posts. Each has a search box.

Start with / for a page in your store, such as /collections/all.
Use a full address, starting with https://, for another site.
Add # and an element's Anchor ID (under Advanced) to jump to a spot on the same page, such as #faq.

Icons on buttons

Expand Icon in the button's settings, search, and pick one. Choose Before the text or After the text, or Remove it. You can also drag an Icon element from the palette onto the button on the canvas. The icon takes the label's size and colour.

Icons

Choosing an icon

Open the icon's Settings and type in Search icons, for example "truck", "leaf" or "gift". Narrow the results with Icon set:

Material Symbols
Material Design Icons
Tabler
Lucide
Phosphor
Heroicons
Remix Icon
Carbon
Fluent UI
Simple Icons (brands), for logos such as Instagram or Pinterest

All the sets are free and open source. Only the icon you pick is saved, right in the page, so your storefront loads no icon font or script.

Icon settings

Setting	Default	What it does
Size	48px	Any CSS size, such as 32px or 2rem
Color	Empty	Empty follows the text colour around it
Accessible label	Empty	What the icon means, for screen readers. Leave empty if it's decorative
Link	Empty	Makes the icon a link. Browse works as for buttons
Open in a new tab	Off	Shown once there's a link
Text	Empty	Optional text next to the icon. See below
Alignment	Theme default	Theme default, Left, Center or Right

Icon with text

Text is a small text editor, with bold, italic, lists, links and colours. Use it for a short title and description, such as Free returns / Within 30 days. Once there's text, three more settings appear:

Setting	Default	Options
Text position	Right of the icon	Right of the icon, Left of the icon, Below the icon, Above the icon
Vertical alignment	Top of the icon	Top of the icon, Middle of the icon. Only for right and left
Space between icon and text	Empty (a small gap that grows with the text size)	Any CSS size, such as 12px

Icons inside other elements

Headings, buttons, accordion items and tab titles can each have one icon before or after their text, under Icon in their settings. Text elements can have icons anywhere, with Insert icon in the toolbar. See Text and headings.

Dividers

A divider is a line across its column. It's centered, and takes the text colour unless you pick one.

Setting	Default	What it does
Color	Empty	The line's colour. Empty uses the text colour
Thickness	1px	How thick the line is
Width	100%	How much of the column it spans, such as 50% or 200px

Use Style → Margins and padding to add space above and below it.

Labels for screen readers

Screen reader users often move from link to link and hear only the link's name. Aedify's accessibility check, in the toolbar, looks at buttons and icons:

Issue	Level	How to fix it
Button has no text.	Error	Type a Label, or an Accessible label
Button doesn't link anywhere.	Warning	Add a Link
Button text "Shop now" doesn't say where it goes. Add an accessible label.	Warning	Change the label, or add an Accessible label such as "Shop tulip bulbs"
Linked icon needs an accessible label, so the link has a name.	Error	Add an Accessible label such as "Follow us on Instagram"

The vague-text warning also comes up for labels such as Click here, Learn more, Read more, Buy now and See more. A new button's Shop now triggers it too, so give every button a label or an accessible label that says where it goes.

An icon without a link or an accessible label is treated as decorative, and screen readers skip it. That's right for icons next to text that already says the same thing.

Tips

One primary button per section. Two loud buttons side by side compete. Make the second one Secondary or Link.
Keep the theme look. Buttons then change with your theme, and match your product pages.
Check icons at small sizes. Thin line icons can disappear on a phone. Look with Preview → Mobile.