Usually components in Replo are laid out in containers which are stacked horizontally or vertically. However, sometimes it's useful to have a component positioned over another one - for example, to have a callout button on the corner of a product image.

Types of Positioning

Replo allows you to change the positioning of a component using the Position dropdown.

Default

This means that the component will be positioned normally within its container.

Relative to Container

This means that the component will ignore everything and be positioned offset from one of the corners of its container. How far away it is from the corner can be configured using the offset fields.

Fixed

The same as Relative To Container, except that the component is offset from the corner of the entire viewport, instead of from a container. This is useful when you want to have a component in the corner of the page always, even when the user scrolls.

Sticky

The same as Default except that when the user scrolls down the page, the component will stay "stuck" to the top of the viewport until its container is scrolled out of view.

Sticky To Header

The same as Sticky, except the component will stick to your Shopify Store's header instead of to the top of the page.

Positioning Examples

Creating a Sticky Header Bar

To create a sticky header bar in Replo, you can use "Sticky" positioning with an optional offset from the top of the page.