How to test the new app snippets feature?

Highlighted
Shopify Partner
13 0 2

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?

Highlighted
Shopify Staff
Shopify Staff
635 16 205

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 Griffin
Shopify | Developer Community Manager
0 Likes
Highlighted
Shopify Partner
13 0 2

@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.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
635 16 205

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

Liam Griffin
Shopify | Developer Community Manager
0 Likes
Highlighted
Tourist
11 1 16

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!

Highlighted
Tourist
4 0 0

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.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
635 16 205

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

Liam Griffin
Shopify | Developer Community Manager
Highlighted
Tourist
4 0 0

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

0 Likes
Highlighted
Shopify Staff
Shopify Staff
635 16 205

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

Liam Griffin
Shopify | Developer Community Manager
0 Likes
Highlighted
New Member
1 0 0

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 


 

0 Likes