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.
Often content added via the custom HTML/Liquid component requires Javascript to render correctly. This JS likely won't work in the editor so components might look incorrect in the editor/preview mode but should work correctly on the live page.
Adding a Custom HTML or Liquid Component
- Navigate to the page you want to add to in the editor.
- 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.
- Drag the component into the page.
Editing the Code of a Custom HTML or Liquid Component
- Select the component you want to edit.
- Under "Config" on the right-side panel of the editor, select "Edit Code."
- 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.
Product variables
If a Custom Liquid component is inside a Shopify Product box, Replo will automatically add Liquid to assign a variable called product to the product which is selected. This means that Custom Liquid components can use the product variable for embeds and app integrations which require a product. If you have questions on how this integration works, please contact support@replo.app for more information.
Note that Custom Liquid components are evaluated by Shopify, so if you're using Interactions to change the product which is set on the Product Box, the Custom Liquid component will not reflect the new product.
Liquid Previews
Replo renders Liquid in the background to provide the page with a preview of what the rendered 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.