Questions and discussions about using the Shopify CLI and Shopify-built libraries.
Hello,
I am completely new to Shopify and I apologize for my total ignorance of the platform.
I am experienced in web application development with Rails, and I've been asked by a friend to help with his store. I decided to try a few things to get a feel for what apps can do and how they might work with Shopify to do what my friend is asking.
I've been through several tutorials, quick-start guides, demo apps, etc., etc., and I am pretty frustrated by now. I have just tried the Shopify CLI gem, which creates a new Rails app and plugs it into a dev store relatively easily, but after I can't find any information on how to add functionality to the app. The "next step" tutorials I've found assume you're working with nodejs, so it's pretty hard to go beyond the initial step.
I think I could keep hacking at it and asking questions and eventually figure something out, but I am wondering if I should even be going down this path. So far I can't tell from the documentation whether an embedded app will even do what I need. I can't find anything that sounds anything like it, even though I would think that it would be a fairly common thing to want to do.
My friend wants to offer customization of his product such that customers can view a product in the store, pick one of a large selection of possible graphics, and enter text that will be overlaid on the selected graphic. The user's choice of graphic and text should be included in the order, of course. He would also like to send the customer a link to a rendered image of the selected product/graphic/text combination to serve as a proof before the order is actually submitted.
The basic function he wants added to the store seems simple enough: in the store, the customer should see an image of the product, with the selected graphic overlaid on top it, and the text should appear on top of that as the customer types it in. This much can be done without an app by adding HTML/CSS/javascript in the product template (I've done a simple proof of concept).
The main difficulty is that there will be a large number of graphics to choose from (the same graphics will be used with many different products). There really should be a way for the merchant to add new designs as needed for the customer to choose from without having to edit the theme's code. Also, each graphic has to have metadata associated with it in order to control how the various text elements will appear on top of the graphic.
It seems to me that a separate Rails app would be just the thing to manage the graphics and metadata. It could also provide the customer-facing UI function if it can be embedded in the product page somehow. The Rails app does not need to fetch product or order data, nor does it need to be notified when various things change in the store. But it does need to capture the user's customizations and fill in the resulting data in the product form so that they can be submitted with the order.
I could of course, embed a view of the app in an iframe in the product template, but then it does not seem possible to have the app communicate the customer's choices back to the containing page. That's why I've been trying to get the hang of an embedded app with App Bridge, etc., hoping to find a way for the two to communicate.
I am sure this is a common use case and if somebody out there has done this I would be very grateful for any guidance at all as it would likely save me many headaches and heartburn. . . . Thanks for any suggestions you may have.
Hi ek0,
The core idea of an embedded app is to provide UI for merchants — not buyers — to do work. So the main embedded app UI that our libraries and guides lead you towards is only accessible for a merchant staff member who can open an app. An embedded app will provide you the functionality for, as you said, "the merchant to add new designs as needed for the customer to choose from", however.
That said, Shopify apps can also extend Online Store themes to include app-specific functionality for the buyer experience, which I think is what you're talking about here. Have a look at Theme app extensions. They're quite new though, so they are only available for Online Store 2.0 themes for development stores created on a partner account.
I also suspect you're going to run into trouble with the idea to "fill in the resulting data in the product form so that they can be submitted with the order". As you noted, there is no way for an app to modify the surrounding page, because of the security implications of that. You will likely want to think about using metafields instead to store and retrieve data for the products that encapsulates the variants that would be possible.
To learn more visit the Shopify Help Center or the Community Blog.
[Deleted duplicate reply.]
Hi @LukeAndrews,
First of all, thank you for your quick reply!
That's what I suspected. There were a few stray hints in the various articles that suggested that the customer-facing view could be augmented with an app, so at any rate it is good to know that there is no point in barking up that tree.
Do you know how soon Online Store 2.0 themes are likely to become available for production?
Once again, thank you very much for your help.