Building in Replo

Editing Components

Parts of a Replo page are called "components". In Replo all components of the page are editable, which means you can customize your site down to the pixel.

Some types of components have different editable attributes (for example, text has configurable text alignment) but almost all components of the page have the following editable properties:

Spacing

Replo Editor screenshot showing spacing controls

Spacing controls allow you to edit the margin (spacing outside the component's background) and padding (spacing inside the component's background), as well as the component's width and height.

Margin and Padding

You can use margin and padding to expand and reposition components in Replo. Each component in Replo has a box, and that box's size is determine by the component's content, margin and padding.

  1. Padding for a component adjusts spacing inside its box
  2. Margin for a component adjust spacing outside its box

Replo component with margin and padding

Background colors and background images in Replo apply only to the space inside the component's box. This means margin is great for adding spacing between components, and padding is great for adding spacing inside a component.

Replo component with margin and red background

Add spacing on one side

To add spacing to a single side, either:

  1. Click the side you want to adjust in the spacing control, then type the number of pixels you want to add to that side. If you're not sure how much to add, we recommend starting with 50 and adjusting from there.
  2. Click and drag on the side you want to adjust to see it preview in real-time in the page.

Add spacing on complementary sides

To add spacing to both horizontal or vertical sides, hold option/alt and drag on one of the spacing controls - the complementary side will update automatically.

Add spacing on all sides

To add spacing to all sides at the same time, hold shift and drag on one of the spacing controls - the complementary side will update automatically.

Another pro tip: hold option/alt while clicking on the spacing fields to reset them back to 0.

Resetting spacing

To reset the spacing on a one of the sides, hold option/alt and click on the side you want to reset.

Negative margin

Components can have negative margin - if a component has a negative margin, it will be positioned outside its regular box. You can use negative margin to overlap elements.

Spacing Units

Like many fields in Replo, margin and padding default to being set in pixels. However, you can use other units for margin and padding as well.

To use a percentage of the container's width instead of a pixel value, type a value like "10%" into the margin or padding fields.

Background

Almost every component in Replo can have a background, which can be a color (solid, or a gradient) or an image.

Background Colors

To add a background color to a component:

  1. Select the component you want to give the background color to.
  2. Scroll down on the right side of the editor to "Background".
    1. If you want to enter the color as a hex code directly, you can type it into the input field.
    2. You can also click on the icon on the left to open a color picker. From there, you can choose a color from the color wheel, or you can click on the "Linear" button to add a gradient.

To add a background image to a component:

  1. Select the component you want to give the background color to.
  2. Scroll down on the right side of the editor to "Background".
  3. Click "Choose Image".
  4. Click "Select Background" to open the image library. Here, you can choose an image from your Shopify Store's theme, or simply add an image via URL.

Adjusting the Background Image's Positioning

After you've added a background image, you have a few options to adjust it's positioning and sizing.

  1. The "Size" dropdown lets you specify how the image should be adjusted to fill the background of the container.
    1. "Cover" will resize the image fill the entire background of the container. This is usually a good first choice!
    2. "Contain" will resize the image to fit inside the container, but might not fill the entire background.
    3. "Default" means the image won't be resized at all, even if it doesn't cover the entire background.
  2. The "Repeat" dropdown lets you control what happens when the background is big enough that the entire image is too small to fit inside it.
    1. "Tile" means the image will be repeated in order to fill the background.
    2. "No Repeat" means the image will not be repeated, even if it doesn't fill the whole background.
    3. "Repeat X" means the same thing as "Tile", but only in the horizontal direction.
    4. "Repeat Y" means the same thing as "Tile", but only in the vertical direction.
  3. The "X Position" and "Y Position" fields let you control how the image is positioned. To nudge the image left and right, you can increase or decrease these values. This is usually the most useful when the "Size" option is set to "Cover".

Border

Every component in Replo can have a border, which displays around the component's box (outside of the padding/background, but inside of the margin). You can either edit the entire border, or one side at a time.

Several properties of the border can be edited:

  • To set the color of the border, click the color input and select a color from the color picker.
  • To set the width of the border, click the "Border Width" input and type in the desired width. Larger values mean a thicker border.
  • To adjust the border style (solid, dashed, dotted, etc.), click the "Border Style" dropdown and select the desired style.
  • To adjust whether the border's corners are rounded, use the "Corner Rounding" input or adjust the slider. You can even click the "Individual Corners" button to edit each corner rounding independently!

Visibility

Sometimes, you don't want components to display - for example, you might have a big title that you only want to display when the page is viewed on a desktop, not on mobile.

To Edit the Visibility of a Component:

  1. Select the component you want to edit.
  2. Find the "Visibility" section in the right side of the editor.
  3. Click on the toggles for the side you want the component to be hidden on. When a component is hidden on a certain device size, its toggle will be grayed out and you won't see it in the page preview.

Positioning

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.

Replo allows you to change the positioning of a component using the Position dropdown. You can change the position to:

  1. Default, which means that the component will be positioned normally within its container.
  2. Relative to Container, which 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.
  3. Fixed, which is the same as Offset From 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.
  4. Sticky When Scrolled, which is 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.
  5. Sticky To Header, which is the same as Sticky When Scrolled except the component will stick to your Shopify Store's header instead of to the top of the page.
Previous
The Replo Editor