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 settings → Product 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 settings → Product 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.