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 Javascript might not work in the Replo editor, so components might look incorrect in the editor or in preview mode. Make sure to test using Page Preview or by publishing the live page to make sure your custom HTML or Liquid components work, especially when importing existing content from Shopify.
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.
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.
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.
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 when your page loads, 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.
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.
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. You can also use Replo's Shopify Section component to add in a pre-built section from your theme automatically. See How to add a Shopify Section from your theme into the Replo for more info.