Components

Custom HTML and Liquid

Replo components are very customizable, but sometimes for advanced components, you might want to embed custom HTML code or Shopify Liquid code into a page. Replo provides a Custom HTML and Custom Liquid component to help you embed custom code.

To Add a Custom HTML or Liquid Component:

  1. Navigate to the page you want to add to in the editor.
  2. On the left side of the editor, click the "Components" toggle, then search for "HTML" or "Liquid" depending on which coding language you want to use.
  3. Drag the component into the page.

To Edit the Code of a Custom HTML or Liquid Component:

  1. Select the component you want to edit.
  2. Under "Config" on the right-side panel of the editor, select "Edit Code."
  3. A code editor appears where you can edit your embedded code.

Available Liquid Variables

All the normal Shopify Liquid variables are available in the code editor. However, certain variables may only be available depending on what type of page you're editing. For example, the article global variable is only available if you're editing a blog post page.

Liquid Previews

Replo renders Liquid in the background to provide the page with a preview of what the rendred Liquid code will look like on the published page. During the time when the Liquid preview is loading, the Replo page preview may look incorrect. However, the Liquid should render correctly on the published page.

If you encounter problems with Liquid previews, please reach out to support@replo.app.

Shopify Sections

The Custom Liquid component supports embedding Shopify Sections using the {% section %} tag. After embedding these sections on a Replo page, they can be configured using the Shopify Theme Editor.

Previous
Collapsible