Display custom content for a line item prop

Extensions
1

Hi
In my app, I would like to store an ID in a custom line prop then replace that ID with custom html coming from my own API.
Is this possible? If so, how can it be done?

Thank you

1 Like
2

Hey @mirrorcode :waving_hand: - it’s definitely possible to store data in a line item property and then have it surface on a shop’s theme in the Liquid code on the storefront if that’s what you’re looking at setting up, but I just want to make sure I’m understanding things correctly here.

Could you share a bit more detail about the specific information or HTML structure you’re planning to display based on that ID/what ID you want to store in terms of the data you’d be using? I just want to make sure I’m understanding the nature of the content you want to use (e.g., is it text, an image, etc) to see if we can give you the best recommendation here.

Speak soon!

3

Hi Alan, thank you for your reply

I’m making a custom fields app where the merchant can display any number of fields and with different types.

For example, when the customer fills in a width & height for the product, I would like to store that customization in my table and then only place an ID in the line item props.

Then when, the cart is displayed, I want to replace that ID with generated html based on the customization that is related to the stored ID. such as

Width: 15 cm
Height: 20 cm
Custom image: [image here]
etc..

I thought maybe there’s an extension or hook that I can use, but if not, I may require the merchant to modify the theme code.

Thank you

4

Hey @mirrorcode - no worries!

You might want to look into Theme App Extensions
Your app could theoretically provide an App Embed Block that merchants can enable and place in their cart section via the Theme Editor.

Since theme app extensions let you inject Liquid/ JavaScript, you could technically build something that runs when the cart page/drawer loads and when the cart is updated, it then scans the cart items for your specific line item property ID (you could render the ID in a Liquid snippet for the property, for example). Then, you could run an API call to your server, and then the app block could take the formatting response returned by your API and inject that formatting into the corresponding element in the extension block.

If you’re making external calls to your app’s server directly from the theme though, you’d need to use our App Proxy framework. Hope this helps - let me know if I can clarify anything more on our end here!

5

Thank you, that’s very helpful! I will see what I can do.

Cheers

1 Like