How to test the new app snippets feature?

[Rishabh_Tayal]

Recently Shopify released the app sections and app snippets feature for developer preview. I cannot get the app snippets to be showing on a developer preview store. I have followed the docs from here https://help.shopify.com/en/api/guides/modifying-online-store/app-snippets

I am not sure where to use the {% render %} code?

Is anyone able to make it work?

[Liam]

Hi there @Rishabh_Tayal 

Great to see you're exploring the new app snippets feature. To test out an app that is included into an online store as an app snippet, you will need to generate the render tag, and then copy and paste this tag into the code of the theme, where you want the app to appear. For example, if you'd like the app to be in a specific position on a product page, you'd add the generated tag:

{% render "code-for-app" %}

into the `product.liquid` file of the theme. Then when you view the theme from the front-end, you should see the app appearing. 

I hope this helps Rishabh- let me know if you're still seeing any issues,

Liam Griffin

Shopify | Partner Education 

[Rishabh_Tayal]

@Liam Thanks for your help. We are able to add the snippets in the app extensions section. And also able to add the {% render "code-for-app" %} in the theme file. However when I go to the online store editing experience I do not see the snippet UI there.

Let me know if I can provide you with any more info to look into it.

[Liam]

Hi Rishabh,

When you are adding the {% render %} tag, which file are you adding it to? EG: the product.liquid file in the `/pages` folder? Have you tested this app on a regular Shopify store before generating an app snippet?

Cheers,

Liam

[valiermedia]

Hello - I wanted to bump this thread as I am running into a similar situation. I have an app that seems to be properly set up with an app snippet extension. This app snippet extension just renders some basic HTML:

<div class="test-wrapper">Hello snippet!</div>

It should be appearing on the site here: https://product-addon-bundler.myshopify.com/ in between the "TEST" and "In store snippet works" text near the top of the page. I am using the basic starter theme with no other running apps, and I copied the {% render %} code from my app snippet that I created to the theme.liquid file, right at the top of the main content area between the "TEST" and "In store snippet works" text. Any ideas?

Thanks for your help!

[LucasFranson]

I have the same issue. The neither the render of shopify works in the product template liquid. 

Im using {% render "shopify://apps/product-reviews/snippets/star-reviews/5fb1e11a-9ef0-4898-892f-3feba729af78" %}, and the aplication is installed, but doesn't work.
Regards.

[Liam]

Hi Lucas & mert86,

Can you both confirm if you are 1. using a developer preview store with the Online Store Design Experience beta features, and 2. testing app snippets on a sections-compatible theme (eg: this version of Debut)? Once you are using these, you should be able to surface your app snippets by following this guide.

Hope this helps,

Liam Griffin

Shopify | Developer Community Manager

[LucasFranson]

Hi Liam,

I want make a simple app test. Basically what I am trying to do it's a "free shipping app" for Shopify to understand how the app development works. Then I would like to use the app snippet or section for this test. But, if you say that it is still in beta, probably it is not the best way to do it today. In this case, do you have any suggestions that allows me to edit the theme without modifying the theme directly?

I was thinking to use the script tag, but I can't use the variables of liquid, for example: product title in JS:

Function in JS:  "$('body').prepend('<div class="header" id="myHeader"><h1> Hello World from Lucas Modificando {{ product.title }} </h1></div>');"

------------------
I have not found any tutorial showing how to modify the page of products in an app, most of them are addressing the installation process.
If you could help me, I will appreciate it.
Warm regards,

Lucas

[Liam]

Hi @LucasFranson 

For this example app, that can be used on a regular test store, it might be better to create a "regular" app using the Online Store API which would allow you to write and write to theme assets on a customers store. What libraries/ language are looking to use? If you're using Node & React the first few steps of this guide will get you to a Hello World scenario. 

Hope this helps,

Liam

[qsmarant]

Hi i have tried many times your guidance however it doesnt work at all... it doesnt render anything. i uploaded basic code in liquid file like <div>something</div> and when i put generated render tag on developement store's theme.liquid or product or collection liquid files, it renders nothing. it seems like it finds no file. how can we test if it finds a liquid file to render? I would appreciate if you can assist on that. 

---

@Liam wrote:

Hi there @Rishabh_Tayal 

Great to see you're exploring the new app snippets feature. To test out an app that is included into an online store as an app snippet, you will need to generate the render tag, and then copy and paste this tag into the code of the theme, where you want the app to appear. For example, if you'd like the app to be in a specific position on a product page, you'd add the generated tag:

{% render "code-for-app" %}

into the `product.liquid` file of the theme. Then when you view the theme from the front-end, you should see the app appearing. 

I hope this helps Rishabh- let me know if you're still seeing any issues,

Liam Griffin

Shopify | Partner Education 

---

[Liam]

Hi @qsmarant 

Can you link me to the dev store that you're testing this on?

Cheers,

Liam

[EleonoreFilhol]

Hi Liam!

I'm experiencing the exact same issue @qsmarant is going through. Could it be possible to have an update?

In the Extensions tab of my app I added a snippet in the Online Store tab with a simple form:

<form accept-charset="UTF-8" action="/" autocomplete="off" method="POST" target="_blank">
    <fieldset>
    <legend>Data:</legend>
    <input name="data" type="text" placeholder="IBAN Number" /> <br /><br /> 
    <button type="submit" value="Submit">Submit</button>
    </fieldset>
</form>

I copied the link provided by the extension manager: {% render 'shopify://apps/returns/snippets/input-test/12d13e5c-4f21-4b6a-9f0a-c0129bb46403' %} and I added the render tag to my page template, and I correctly attributed the right page template in my page admin.

Then I head to my dev store and on the correct page, but the form from the snippet is not outputted.

You can check it under this link: https://returns-interface.myshopify.com/pages/test

My app is correctly installed on my dev store also.

Is there any ways you could help me with that?

Thanks in advance, Eleonore

[Liam]

Hi Eleonore,

I think the reason you were not seeing this issue could be because you were using a regular version of Debut, rather than the sections-enabled version of Debut that is linked in our docs here. This phase of the beta is closed now however so I cannot confirm for sure. There is more info regarding this on our developer changelog. 

I hope this helps!

[darrynten]

Is it possible to create dynamic snippets?

Is it possible to update sippets programmatically?

[Liam]

Hi there @darrynten 

By dynamic snippets, do you mean will snippets be able to be added to all pages in the same way that sections can be added to the homepage today? If so, no - only sections will be able to be added to pages through the online store editor. 

It is possible to access and write to snippet files using the REST API, would this be what you mean by "programmatically update snippets"? 

Hope this helps!

[Cratetrain]

Yes but for all payments  can we sell our own logos what do we sell and is payroll taken care of too shipping I need a parter for that as well and can we auto pilot our sales and email 

[Cratetrain]

thankyou parter because it's time to make money 💰lots if we can