skip to Main Content

So I am trying to build something for my store but a few things are somewhat unclear.

  1. If I need to save some user settings do I need my own backend just
    for that app specifically? For simplicity sake, I want build an app
    to save and display a custom message in cart-template.liquid.To
    achieve that, I think my app should make a request to my backend (let
    say, on heroku) and save it in some db that app is using?

  2. How do I retrieve that data in cart-template.liquid? I guess I
    build a snippet that calls a public endpoint of my backend that
    returns that saved message using fetch() or maybe axios.get and
    embed it using {% render ‘fetch-custom-message-snippet’ %} ?

  3. Say I ask for user input, ie. "Engraved message" and the form is in cart-template.liquid,
    of course. The following snippet is used:

    <p class="line-item-property__field">
      <label for="engraved-message">Engraved message</label>
      <input id="engraved-message" type="text" name="properties[Engraved message]">
    </p>
    

    How do I make sure that bit of information is captured and passed to me? I guess I want to see it somewhere in the order details.

2

Answers


  1. Here is the tutorial specifically for creating custom shopify input field for getting engraving information: https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503

    Login or Signup to reply.
  2. If I need to save some user settings do I need my own backend just for that app specifically? For simplicity sake, I want build an app to save and display a custom message in cart-template.liquid.To achieve that, I think my app should make a request to my backend (let say, on heroku) and save it in some db that app is using?

    Yes, you need your own backend. Your application alone is responsible for storing its own information (there are some exceptions like a special order field which I show you below) – that typically infers a database that back ups your service and holds your data. Please check out this thread as you can find lots of valuable information there.

    Regarding cart-template.liquid I’d suggest taking a look at the official "Shopify Developers" documentation. All information you’re allowed to display and request are neatly explained and ordered there.

    How do I retrieve that data in cart-template.liquid? I guess I build a snippet that calls a public endpoint of my backend that returns that saved message using fetch() or maybe axios.get and embed it using {% render ‘fetch-custom-message-snippet’ %} ?

    Once again there are good guides out there. I suggest taking a look at this blog post which goes into in-depth on this topic. Shopify’s documentation about the Liquid template language is also highly advised to be read.

    How do you retrieve that data? According to this specific example any input will be supplied to your order page in the Shopify admin. For example:

    <label for="CartNote">Special instructions</label>
    <textarea name="note" id="CartNote">{{ cart.note }}</textarea>
    

    *taken from https://shopify.github.io/liquid-code-examples/example/cart-notes*; shows a Special instruction label and textarea for users to submit details about the oder – you will get this data on, as mentioned, the order page in the Shopify admin.

    Say I ask for user input, ie. "Engraved message" and the form is in
    cart-template.liquid, of course. The following snippet is used:
    […] How do I make sure that bit of information is captured and passed to me? I guess I want to see it somewhere in the order details.

    see above

    //EDIT:

    To prevent any confusion: It seems like you want to develop a custom app just for personal usage and not to publish it in the Shopify App Store – in this case you most often than not don’t need an external database; e.g. the example you provided with a simple order request which is easily doable through Shopify’s examples.

    For your specific case this code snippet (I modified your original example to fit the case – it’s not a full cart-template.liquid obviously; in this case the file is called cart.liquid):

    <label for="engraved-message">Engraved message</label>
    <textarea name="message" id="engraved-message">{{ cart.note }}</textarea>
    

    //EDIT 2:

    The link – shared by another user in this thread, namely @Simas Butavičius – is actually kind of useful if you have problems with the customization process in general, i.e. if you want to revise some basic concepts or want to check how to implement the code snippet from above in the whole structure of your website I’d advise to skim through this site.

    Needless to say, there are hundreds of good tutorials, questions regarding the same "issue" or other resources in general.


    I suggest for further reading purposes to check out some of these links and guides (some may be mentioned above):

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search