Looking for advice on building my first app

jasongroulx
New Member
2 0 1

Hey everyone, I am planning on building an announcement bar app simply to better understand the ecosystem and the process of building an app for Shopify.

I have a pretty good understanding of how this could be accomplished using theme files. My question is this, what would be considered best practice for having an app modify the theme? 

Would I use something like the Asset API to add a new section and then add it to the template programmatically? Or do I use something like the Script​Tag and inject the whole thing into the page?

Also, is there any advice you can give me as a new aspiring app developer?

Thanks in advance for any insight you can share on the topic, I have so much to learn and this community has so much to offer.

Replies 6 (6)
ianherri
Excursionist
13 0 12

Hey Jason,

These are good questions. To the best of my knowledge, Shopify wants all newly submitted apps to follow the guidelines I attached in the screenshot below.

Basically, Shopify's newest themes are using the Storefront 2.0 architecture, and it is recommended that App Blocks are used. In order to be backward compatible with older storefronts you can still do code injections. 

The article I stole that screenshot from is here. (Expand section 9, Online Store). Hoping that helps!

 

Screen Shot 2021-10-01 at 2.23.38 PM.png

PaulNewton
Shopify Partner
4211 303 901

Use the more developer focused subforums 

https://community.shopify.com/c/shopify-apps-and-partners/ct-p/appdev and partially https://community.shopify.com/c/technical-q-a/bd-p/technical-qa though technical gets a lot of no effort garbage so consider it a merchant space

Sign up to be partner if not already and join the shopify partners slack, then search here and there for "new developer" or other mix of search terms and see responses others have gotten to simiar. For google " "shopify" new developer " if not a power searcher already:  https://coursebuilder.withgoogle.com/ 


@jasongroulx wrote:

My question is this, what would be considered best practice for having an app modify the theme? 


This has yet to be written in a cohesive way there's just not enough time. You have to piece it together from your specific context from various online resources.

A starting point with heavy time investment is to go through the partner friendly apps on the app store and install and research each with free themes you put in git to track changes they make that you nuke in between testing different apps.

https://apps.shopify.com/collections/partner-friendly-apps 

 


@jasongroulx wrote:

Hey everyone, I am planning on building an announcement bar app simply to better understand the ecosystem and the process of building an app for Shopify.

...

Would I use something like the Asset API to add a new section and then add it to the template programmatically? Or do I use something like the Script​Tag and inject the whole thing into the page?


Context matters, XY problem https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem , stack, deployment, background, etc.

Though even if you spend time detailing you may not get any answer /shrug.

If your in a good place with plenty of time and it's only for learning do both assets api and scripttags to support a broader range of edge cases.

 

For a modern OS2.0 announcement bar app in the most rudimentary sense, use app blocks and for sanity only support newer Online Store 2.0 capable themes to start with.

https://shopify.dev/apps/online-store/theme-app-extensions 

https://github.com/Shopify/product-reviews-sample-app (JavaScript ,Liquid,  CSS, Dockerfile)

https://shopify.dev/themes/best-practices/templates-sections-blocks 

 

For online store 2.0 themes use app blocks when you need large rendered html structure and/or need to not slow down a store with scripttags, or synchronous action is needed.

For vintage themes expect handholding merchants if there is some piece of code they must manually install in existing files such as a javascript hook element or attribute.

Also scripttags load at run/load time to affect the frontend of a theme and have nothing to do with modifying the admin.

Use scripttags when you do not need underlying html rendered ,  or for vintage themes(non OS2.0) that may not support app blocks , or when synchronous action is not needed.

Notice if a browsers javascript is disabled so is your apps frontend website features.

 

If you must modify an existing theme asset, back it up in that theme untouched , or backup the entire theme or make a duplicate before changes(stores have a 20 theme limit, Plus stores get more).

If you must create your own files clearly state who,what,when,where,and why this file exists or expect it to be deleted, make a comment if the file is not to be modified at the top of the file.

Some apps add a hash to the end of file to quickly check the rest of the contents for changes so they know whether or not to overwrite that or that a merchant has customized a basic asset from the app beyond the default.

 


@jasongroulx wrote:

Also, is there any advice you can give me as a new aspiring app developer?


For shopify apps that affect themes the wild variety of inconsistency between themes will be your bugbear, there is no rhyme or reason sometimes why one theme has a structure that benefits your app and another doesn't beyond the required folder structure and base template names. So always have existence checks, and possibly logging.

After the learning, I think the hottest areas to get into are product subscriptions, and checkout extensions but also the more competition.

https://news.ycombinator.com/item?id=26514612 

App dev is messy and while they've been putting a lot of effort into making the development docs look cool there is a ton of omitted information and gotchas as it's mostly written as if the reader already knows how it all works and there's never any errors, strong search skills and note taking will save sanity.

https://shopify.dev  

As a developer, or a person, troubleshooting skills when you hit issues of being able to effectively communicate the problem without ambiguity will be everyones biggest time saver.

https://stackoverflow.com/help/how-to-ask

http://www.catb.org/~esr/faqs/smart-questions.html 

And you may want to spend time in the merchant areas of these forums to see common issues, traps and cliches.

 

 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
sillycube
Shopify Partner
693 16 101

The short answer is to use an app block of a theme app extension. Then the merchants can install your app and activate the app block in the theme editor. Shopify designs theme app extensions to add elements to the theme easily

ScriptTag is good since it's flexible. You can add your js to any page. But it also causes a lot of problems of app conflicts. Also, ScriptTag is going to deprecate soon. 

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
ianherri
Excursionist
13 0 12

@sillycube I've been trying to find out when the ScriptTag will be deprecated, do you have any idea here?

Also, I have noticed some of the incompatibilities you mentioned for ScriptTag apps, especially those that modify entire pages (like the cart). Oftentimes it will not allow for any additional apps to work on that page. So hoping that the depreciation happens sooner than later.

sillycube
Shopify Partner
693 16 101
There is not a timeline to remove script tag but Shopify is going to
deprecate it according to the last online event
BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
jasongroulx
New Member
2 0 1

Thank you for the very detailed and insightful responses, everyone.