Orbit section

The Orbit section shows up to six round photos along the top edge of a large circle, with a short story and a few figures under them. The photos travel along the arc on their own, staying upright, and the arc turns a little more as customers scroll past. To add one, click Add section in the editor and select Orbit.

The Orbit preset puts the section on a near-black panel with rounded corners. Under the arc, it has a Scroll text block with a centered paragraph and a Columns block with three figures. Each figure is a large number over a short label, such as 100% over Specialty Arabica. No preset comes with photos. Until you choose them, the arc shows six plain circles, on your store as well as in the editor.

Layout

Alignment sets the text alignment of the blocks, and is centered by default. Gap is the space between the blocks under the arc. Padding bottom, Margin top and Margin bottom work as in other sections. There is no Padding top, because the arc fills the top of the section. Section layout settings describes them.

Background

The background works as in other sections, and Section background settings covers it. In this section, it also changes how the arc is cut:

  • With a background, the photos at the top of the arc are cut by the top edge of the background. With Background width set to Inset, they are also cut by its rounded corners.

  • With Background type set to None, the circle sits lower, so every photo shows whole at the top.

Content

Setting

What it does

Arc spread

The space between the photos along the arc, from 20° to 120°. The default is 60°. A larger value spreads them farther apart. The photos never sit closer than a tenth of a photo's width.

Arc curve

The size of the circle as a share of the section's width, from 50% to 200%. The default is 100%. A larger value makes a flatter arc, and a smaller one a rounder dome.

Size

The width of each photo as a share of the section's width, from 8% to 34%. The default is 18%. A photo is never wider than 320 px. On screens narrower than 600 px, each photo is 104 px to 120 px wide.

Scroll rotation

An extra turn of the arc while the section passes through the screen, from 0° to 60°. The default is 16°. At 0°, the photos move only on their own.

Scrolling speed

How fast the photos travel along the arc, in pixels per second, from 8 to 120. The default is 32.

Scroll direction

Right (default) moves the photos to the right along the arc. Left moves them to the left.

At the default settings, the outer photos reach the sides of the section and are cut off there. Visitors whose device is set to reduce motion see the arc standing still.

Images

Six Image pickers, one per photo. The photos repeat around the circle in the order of the pickers, and empty pickers are skipped. Each photo is cropped to a circle around its center, so keep the subject in the middle.

Motion

Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.

Blocks

The section takes any theme block and app blocks, always under the photos. The preset uses a Scroll text block and a Columns block with the three figures inside it.

Was this article helpful?