Emails in Spoks are built from blocks. This article lists every block in the email editor's + menu, what you fill in when you add each one, and the settings you can change afterwards. For an overview of the editor itself, see How does the email editor work?

Hover over a block in your email and a row of controls appears beside it:

To change a block's settings, such as a button's font, hover over the block and click the sliders icon above it. Clicking the block itself only edits its content.

Most settings panels start with Looks override. These settings change the look of that one block only, instead of the style set for the whole email. Click Reset at the bottom of the panel to remove your changes. Your draft saves automatically as you work.

The space above and below a block comes from its Top margin and Bottom margin. Both start unset, shown as ∞, which means the block uses the spacing from your email's style rather than none. Type 0 into either field to close the gap on that side; you usually only need one of the two.

Only Section and Columns have an Inner padding setting. Other blocks do not, so if a gap is still there after both margins are 0, check the Section the block sits inside, or Style → Layout, which sets the defaults for the whole email.

Blocks inside a Section or a column keep their own margins too. A white gap around images placed in a Section or columns, such as a row of logos in the footer, usually comes from the images' default margins. Open the Section or column, click each image and set its Top margin and Bottom margin to 0.

The + menu groups the blocks into four sections. Scroll down in the menu to reach Layout.

These four are the same text block in different styles. Select some text and a toolbar appears with:

The block's settings are Max width, Top margin, Bottom margin, Horizontal margin and Text color.

Personalization inserts a field that is filled in for each contact. Search for a field, or filter the list by Contact, Shop, Links, Date or Coupons. Contact fields include Name, First Name, Last Name, Email and Phone. Click the arrow next to a field to set its Default text, which is shown when the contact has no value for that field, then click Insert.

Emoji opens an emoji picker.

A new Image block shows + ADD IMAGE. Click it, or drag an image onto the block to upload it. Animated GIFs are supported: upload a GIF the same way as any other image to add animation to your email.

Click an image in your email to open Edit image:

The block's settings are Alignment, Max width, Corner radius, Top margin, Bottom margin, Full width and Horizontal margin.

Paste a YouTube link, or click + UPLOAD VIDEO or drag a video file into the dialog to upload it. Then click Done.

When you add a button, enter its Text and choose what it links to:

The button can only be saved once you have entered its Text.

The block's settings are Alignment, Max width, Corner radius, Top margin, Bottom margin, Horizontal padding, Full width, Horizontal margin, Thickness of the border, Font size, bold and italic Style, Font, Text color, Button color and Border color.

Form opens Insert form and Poll opens the same kind of list for polls. Your most recent ones are listed first. Click See all for the rest, pick one, or click New form or New poll to create one. A new poll needs a Question and its Poll options, with a desktop and mobile preview beside them.

In the email, the form or poll appears as a button with its title. Both have the same settings as a Button block.

Components opens Pick component, a list of your saved components. Pick one and click Done to add it.

A Divider adds a horizontal line. Its settings are Top margin, Bottom margin, Horizontal margin, Width, Thickness, Style (solid, dashed or dotted) and Color.

Pick a coupon lists your coupons. Filter by All, Static or Dynamic, search by name, and tick Hide expired to hide coupons that have ended. Manage coupons takes you to your coupon list.

After you pick a coupon, Add a link to your coupon lets you choose where customers go when they tap it. Leave the URL empty to show only the code. For a Shopify store, the dialog shows a Shopify discount link that applies the code at checkout. Copy it and paste it into the URL field.

The block's settings are Corner radius, Top margin, Bottom margin, Full width, Horizontal margin, Border style, Thickness, Font size, bold and italic Style, Font, Text color, Background color and Border color.

The Products block shows products from your Shopify catalog. When you add it, choose how products are picked:

Recently viewed, which you can choose in flow emails, shows the products each contact has recently viewed, up to the number of products you set. The Abandoned Browse flow template uses it. If a contact's viewing history is limited, the block falls back to best selling products. From collection also asks for a Collection and a Sort by order: Newest, Price: high to low, Price: low to high or Recently updated.

Click NEXT to open the block's settings. Scroll down in the dialog to see all three parts. Under Product selections you can change how products are picked.

Under Product details you choose what each product shows. Hover over a detail to show its eye icon, which shows or hides that detail, and click the arrow to open its settings:

Under Product layout you set how the products are arranged:

Click DONE to apply your changes.

To change a product after you've added the block, hover over its image and click the pencil at the top right. Edit product lets you change its Title, Price, Original price, Description and Button text.

When you add columns, choose:

Click a column to open it. Hover over the empty line and click the + that appears on its left to add a block. Inside a column you can add Text, Header, Subheader, Quote, Personalization, Emoji, Image, Button, Form, Poll, Divider and Coupons. Click Save when you are done.

The block's settings include everything above, plus Inner padding, Corner radius, Top margin, Bottom margin, Column spacing, Stack order (mobile), Full width, Border style, Thickness, Background color and Border color.

A Section groups blocks together, for example on their own background. Adding one opens an empty area. Add blocks inside it the same way as in the email, then click Save.

The block's settings are Corner radius, Top margin, Bottom margin, Full width, Inner padding, Border style, Thickness, Background image, Background color and Border color.