How to Build a Real-Time Personalized Book Preview Based on Name Input

Store Design
, , ,

Topic summary

Building a live, name-based book preview is achievable on Shopify via advanced theme customization rather than apps. The product maps each letter of a child’s name to a pre-designed illustrated page and shows a full preview (cover + ordered pages).

Implementation options:

  • Capture the entered name using line-item properties (custom fields on items) or cart attributes (cart-wide fields) via JavaScript; these pass into the cart and order for fulfillment.
  • Use the Section Rendering API (AJAX-rendered theme sections) to dynamically assemble and display the correct pages, either as separate renders or a combined view.
  • Store letter-to-page mappings with metaobjects if not tied to a single product.
  • An alternative is sending users to a search/collection filtered by letters, but name-order sorting is a challenge.

Constraints and considerations:

  • Checkout is locked down (no dynamic image display) unless on Shopify Plus.
  • “Preview” format (images, PDF, viewer, watermarking) adds complexity and must be defined.

Outcome: No specific app recommendations provided; custom code is suggested. The discussion remains open with an offer for paid customization services.

Summarized with AI on December 10. AI used: gpt-5.
1

Hi everyone,

I’m building a Shopify-based personalized product where the customer enters a child’s name and gets a live preview of a custom book, with one illustrated page for each letter of the name.

The goal is similar to what sites like Wonderbly.com and LaylBooks.com offer:

  • The user types a name.

  • Each letter of the name maps to a unique page (e.g., “A” = a theme like “Adventure”, “M” = “Magic”).

  • The site instantly shows a preview of the entire book: the cover plus a full sequence of pages in name order.

  • The customer can then proceed to checkout, and I’ll print the book using the selected letter pages (all pre-designed).

I already have custom illustrations ready for each letter. I don’t need AI or dynamic generation, just a system to select and display the right pages based on the input name.

I’m trying to figure out:

  1. What’s the best way to do this on Shopify: apps vs. custom code?

  2. Are there any Shopify apps that support this kind of personalized live preview (e.g., Customily, Zakeke, Live Preview Options)?

  3. If building it myself, should I use metafields, theme code, or JavaScript to dynamically show the correct images?

  4. Any tips on passing the entered name into the cart and order for fulfillment?

Appreciate any guidance or examples from anyone who’s built something similar! Would love to hear how others have approached this.

Thanks!

1 Like
2

HI @123imran100 that’s possible as an advanced theme customization without apps.
It is beyond the scope of the forums to teach web development to implement such things.

Roughly use line-item-properties, or cart attributes.
And or the section rendering api to get the results(pages) for display purposes.

So set a cart attribute with javascript, then use the section rendering api to either get separate pages, or some combined page that renders out all the items.

Or use search and collection filters, and send the visitor to a search page filtered to those LETTERS; but there’s probably some issues with the sort order not being made for something like this so more advanced work.
There’s also using metaobjects for stuff like this is there’s not an actual underlying product.

Keep in mind this is for the online-sales channel, so your not gonna be able to show all these different images during the checkout process which is locked down for all plans except for shopify-Plus.

There’s a lot of moving parts here, even by itslef what “preview” alone can be it’s own complexity in what it even means varies, pdf, graphics, some sort of viewer to add copyright or image protection, video, modal, popups, embeds etc etc etc ad nauseum.

If you need to figure this out in depth and get it built then reach out to me for customization services.
CLICK my profile-pic or visit my profile on the forums
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc