As a developer, Replo allows you to infinitely customize your pages using the Custom HTML and Liquid components and Run Javascript. When creating customizable components using these tools, there are several considerations to keep in mind.

Targeting Replo DOM Nodes

Replo renders DOM nodes for most components.

1. It's not guaranteed that Replo will render exactly one DOM node per component - Replo may add wrappers or no render DOM nodes at all in certain cases. Don't rely on there always being a DOM node available for a Replo element.
2. Replo may render different tags in different circumstances - for example, if a button is a link, Replo may render an <a> tag, but this behavior may change at any time. Don't rely on specific tag names if you need to target DOM elements which were rendered by Replo.
3. Replo may add various attributes to its rendered DOM nodes. These attributes may change at any time, so don't rely on them as a way to target nodes.

Custom Styles

It generally shouldn't be necessary to target Replo DOM nodes in order to add custom CSS to them - instead, these styles can be added via the Replo editor. In the rare case that you need to target a DOM node individually, you can use a Hashmark, which will set the DOM node's id.

Replo element classes

Replo adds certain class names to DOM elements using the "class" HTML attribute. These classes exist so that Replo can apply styles, but the format of the class attribute that Replo renders may change at any time, including when updates are made to the page and when changes are made to the Replo platform. Don't reply on these classes for styles or targeting.

In July 2023, we rolled out a performance improvement which changed the format of how class names were rendered. If you wrote custom code which relies on classes being prefixed with rmq-, you'll need to update your custom code to target elements differently. If you need help or you find that there's no other way to target nodes for your custom code, please reach out to support@replo.app and we'll help evaluate how to structure Replo for your use case.

How Replo Adds To Cart

When an Add to Cart Interaction is triggered, Replo adds product variants (sometimes including selling plans) to the cart using Shopify's standard endpoints. Usually, this happens using the AJAX /cart/add endpoint. However, Replo may choose to use a form submission or some other mechanism to update the cart in certain cases, so don't rely on the /cart/add endpoint for subscribing to Replo's events. If you need to run custom code after an add to cart interaction, add another interaction after the Add to Cart Interaction and select Run Javascript.

Adding Custom Line Item Properties to Cart Items

Inside of a Product container component, you can add a specific liquid snippet to ensure that when a user adds that given product variant to their cart that a line item property is attached to that new cart item. Add a Liquid component to your product container, then configure the liquid snippet using the following code:

<input type="hidden" name="properties[My Property]" value="my property value" form="product-form-{{ product.id }}">

Let's break down this code snippet. The `form` attribute must be equal to `product-from-{{ product.id }}`, this is what matches up the given form input with the add to cart form inside of the product container. This is also the reason this component must be a liquid component and not an html component. The `name` attribute must be `properties[My Property]`, where 'My Property' is the name of the line item property you would like to apply. Lastly, the `value` attribute is set equal to whatever value you would like your property to be set to. Given this example, when a user adds the variant to their cart they will have 'My Property': 'my property value' included in their line item properties.

Adding Data Attributes to Replo DOM Nodes

It is possible to add custom data attributes to certain Replo DOM Nodes. This is currently compatible with Buttons, Containers, Product Containers, and Text components. In the "Config" tab, click on the "+" icon to add a new key-value pair to be added to the root DOM Node of your component. The key will become the dataset label, and will automatically include the `data-` prefix and when rendered will be reformatted to kebab-case. The value you input will become the corresponding value in the dataset. You can click on the dynamic data button to the right of the value's text field to assign a dynamic data value to the dataset attribute. If you want to remove a single key-value pair, click on the trash can icon.

Custom Shopify Theme Deployment

If you have a custom deployment workflow set up for deploying a theme to your store (e.g. you use a github repo with CI which automatically copies files through the Shopify API or ThemeKit), please see Custom Theme Deployment for information on how to merge Replo's content into your deployment pipeline.