Usually, components in Replo are laid out in containers that 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.