Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How can I effectively add a previewable section to my app on a website?

How can I effectively add a previewable section to my app on a website?

Andriy_Vovk
Shopify Partner
5 0 1
Hi, friends! We created an app on Shopify and want to ask you to help us in some issues. The created 
app on Shopify should add a section to the theme pages. The section should take the customer's 
settings from our application. This section can be added through our application to the 
desired place on the page via drug-n-drop: on the top/bottom or based on css selector. It is 
important that we have a feature to preview the added section. That is, without changes on the live 
site, we must show how this section will look and be positioned on the page.

We plan to add a global script to the site, which will check the availability of the GET parameter 
(myapp_preview=true) and make a request to the application server, get the necessary customer 
configurations, find the right place on the site and place the container for React components there. 
Next, React will render in the required place and the section will be displayed where required.
The same thing will be done live, but without re-reading the GET parameter.

This seems like a not very productive way to show the desired section, so we ask for your advice to 
find a better solution. And also that it was correct from the point of view of a public application 
and passed a review by Shopify. We don't need the Shopify editor (Customizer), do we?
Replies 2 (2)

kapspatel
Shopify Partner
25 0 3

Hello @Andriy_Vovk

I understand your concern. I think drag and drop idea is excellent. Theme preview I think not possible. My personal opinion I think if you use app block. So, it's quite good because it's easy to implement your app into the theme. And you don't need to give a drag-drop option you just need to move the block as we move in the theme. click here  

Andriy_Vovk
Shopify Partner
5 0 1

Hi @kapspatel
Thank you, but it isn't thing that I have asked. We know that preview is for other apps, it works. We want know the best way to solve it. Also wee have to implement an accessibility to set section in theme with css-selector in every place, which user selected. Give us some pieces of advice, please