The Replo Editor

The Replo editor includes a variety of tools and controls to help you create and manage your Shopify store's pages.

Page Preview

Front and center in the editor is the page preview. This is where you can see the page, and click on different components within the page to edit them.

Page Preview

Moving Around

The Replo page preview isn't static - you can move it around, zoom in to edit something small, or zoom out to get a better view.

  • With a trackpad, scroll with two fingers to move around the page preview.
  • With a trackpad, pinch to zoom in and out.
  • With a mouse, scroll with the wheel to move up and down around the page preview.
  • With a mouse, scroll while holding the SHIFT key to move left and right around the page preview.
  • With a mouse, scroll while holding the CMD/CTRL key to zoom in and out.
  • At any time, hold down the space bar then click and drag to move around the page preview.

You can also use keyboard shortcuts to zoom in and out in the preview:

  • Use the CMD/CTRL + PLUS key to zoom in.
  • Use the CMD/CTRL + MINUS key to zoom out.
Replo Header

The Replo editor header contains controls for viewing, configuring, and publishing the pages you create in Replo.

Plan details

The left side of the header displays the current project and the details of your current Replo plan. You can change or update plan details here.

Section Library

Replo has hundreds of pre-built page section templates, fully licensed and ready to use on your pages. To browse the section library, click the "Sections" button:

Sections button

Here, you can browse and filter through all of Replo's pre-built templates. When you're ready to add a section, hover over it and press the "Add to Page" button to add the section to your page. Learn more in the Section Library documentation.

Sections library

Sharing Projects

To share a project with a teammate, click the share button. For more information, see Replo Projects.

Version History

Version History Button

Replo automatically saves versions of your pages when you publish them. You can see the saved versions of the page by clicking the "Version History" button. For more information, see Version History.

Page Settings

Open A Popup action

You can view and update all the settings of your page (title, page URL, visibility, etc) by clicking the "Page Settings" button.

Page Settings Configuration

Publish Page

Publish Button

When you're ready for your page to go live, press this button to publish it! For more information, see Publishing Your Page.

View Live Page

View Live Page Button

When you've published your page, you can view it live on your Shopify store by clicking the "View Live Page" button.

Note: if your Shopify store is password-protected, you may need to enter the password to enable viewing the store. However, Shopify will only display the homepage of your store after entering the password. If this is the case, go back to the Replo editor and click the "View Live Page" button again to view the page.

The Replo Editor footer displays information about the current preview device and quick actions.

Replo footer

Preview Mode

Replo includes a preview mode where you can interact with the current page just as if a user was viewing it on your site. Preview mode is useful for viewing interactive content on the page, animations, hover states, links, and more.

To enable preview mode, click the "Preview" button:

Preview button

In preview mode, click the "Edit" button to go back to edit mode:

Edit button

Undo/Redo

Whenever you make a change to your page, Replo saves that change automatically, but doesn't publish it live to your Shopify store until you click Publish. Before publishing, you can use the undo/redo buttons to undo and restore previous changes.

With the keyboard, use CMD/CTRL-Z and CMD/CTRL-Shift-Z to undo and redo.

Device previews

Device Preview

You can use Replo to design for multiple devices. To preview your page on a different device, click the button for the device you want to preview on. For more information, see Responsive Design.

Editing Styles in the Right Bar

The right bar of the editor allows you to edit the styles of the currently selected component. For more information, see Editing Components.

Pages and Component Tree

Pages and Component Tree

Pages

All your pages are shown on the left side of the editor, and you can search through them using the search bar and select the one you want to edit.

To Select a Page:

  1. Find the page on the left side of the editor, and click on it.
  2. The preview of the page shows up immediately after loading in the center pane of the editor.

To Duplicate a Page:

  1. Find the page on the left side of the editor that you want to duplicate.
  2. Right-click or control-click on that page, then select "Duplicate Page" from the dropdown.
  3. Pick a name for the new page and edit any of the settings if desired, then click "Create Page".
  4. The new page will appear in the center pane of the editor.

To Delete a Page:

  1. Find the page on the left side of the editor that you want to duplicate.
  2. Right-click or control-click on that page, then select "Delete Page" from the dropdown.
  3. Confirm that you want to delete the page: if you delete a page, it will be lost and you won't be able to get it back. If you'd like to hide the page instead of deleting it, use the "Settings" button in the upper right of the editor, then toggle "Is Visible" to off.

To Edit a Page's Settings:

  1. Find the page on the left side of the editor, and click to select it.
  2. Find the "Settings" button in the upper-right corner of the editor and click it.
  3. Update any settings if desired, then click "Update Page" to save the page settings.

Component Tree

Every component in Replo is part of a container, and those containers can also be part of containers, and so on. These containers inside of containers create a "tree" of components, which you can view and edit on the left side of the screen, directly under the pages list.

To Select a Component in the Tree:

  1. Find the component you want to select and click it
  2. The component becomes selected and you can edit it, just like if you had clicked it in the page preview.

To Select Multiple Components at Once:

  1. Find the first component you want to select, and click to select it.
  2. Cmd/ctrl-click to select another component, or shift-click to select a range of components.

To Rearrange Components:

  1. Find the component or components you want to rearrange, and select them.
  2. Drag the component or components to a new location in the tree.

To Copy/Paste Components:

  1. Find the component or components you want to copy/paste, and select them.
  2. Either use the cmd/ctrl-C or cmd/ctrl-V keyboard shortcuts to copy or paste the component, or right-click and select "Copy" or "Paste".

To Group Components into a New Container:

  1. Find the component or components you want to group, and select them.
  2. Either use the cmd/ctrl-G keyboard shortcuts to group the components into a new container, or right-click and select "Group Into Container".

To Rename a Component:

  1. Find the component you want to rename, and select it.
  2. Double-click on the component in the tree, then type in the new name.
  3. Press enter to confirm the new name.

Closing Store PopUps

Sometimes, the editor may seem unresponsive when clicking on the center component canvas. This is usually because your store/theme is displaying a pop-up that needs to be closed first. We are working on an automatic way to close these pop-ups for you in the editor, but for now, the best way to fix this is:

  1. Toggle to preview mode by clicking “Preview” on the left side of the Footer
  2. Once in preview mode, you can interact with the page and close the popup as any site visitor would (usually x in the top right)
  3. To go back to editing the page, toggle back to “Edit” mode on the left side of the Footer

Pretty simple. Here is a quick video to help if needed.