Skip to content

Alignment and width in Emerge

Open a section in Edit theme, not Theme settings.

Emerge Image with text overlay section settings

Pick a default Text alignment per template and keep supporting sections on it: left for catalogs and long copy, center for heroes and short announcements, then back to your default. Mobile text alignment is separate.

Maximum container width is on each section: contained for text-heavy blocks, Full width for slideshows and large photography. A useful rhythm is full-width hero → contained story → full-width collection.

Text alignment

Left, center, or right, plus a mobile control.

Emerge heroes and Cafe-style banners often center. Collection grids and long copy usually read better left-aligned. Pick a default for each template (home vs collection vs page) and stick to it.

Product card alignment is global under Theme settingsProduct grid.

Maximum container width

Extra small through Full width.

Full width is natural for slideshows and image-with-text-overlay. Contained widths keep FAQ, rich text, and newsletters readable. A contained heading over a full-width shape is a common Emerge move: the color or wave goes edge to edge, the words stay in a column.

Mobile

Center short banners on mobile even if desktop is left-aligned in a split layout. Check the preview; shapes plus large type plus center alignment can stack into a long scroll.

Width, then shape

Set container width before you pick a shape style. A close wave on a narrow contained section looks different from the same wave at Full width.

Product grid

Text alignment for product cards is in Theme settingsProduct grid, not the collection section.

Ask Sidekick

Open Sidekick from the theme editor toolbar (top right, next to the device preview icon), or press ⌘. (Ctrl+. on Windows). Alignment and width choices are easy to second-guess in isolation, ask it how a layout choice reads.

"Should my hero text be centered or left-aligned for a laid-back, cafe-style homepage, and what Maximum container width fits it?"

It'll reason through the trade-off with you rather than you flipping the setting back and forth to compare.

Opening Sidekick from the theme editor toolbar

Troubleshooting

  • The wave is full-bleed but the heading is a narrow column: that can be correct. If it looks accidental, set Maximum container width to Full width, or put the shape on a neighboring full-width section.
  • Product cards didn’t follow: Product grid text alignment, not this section.
  • Mobile is a long centered stack: lower heading Mobile size in Typography, or drop Extra large spacing, before you turn the shape off.