Developing a Custom Label App - Advice

Partner Discussions
, ,
1

Hi,

I am fairly new to Shopify App development. I am attempting to create an app that injects custom labels on a collection page. I am aware there are apps that already do this, however, I am wanting to do this for learning purposes.

I have spent the last few days trying to come up with the best solution on how to achieve this functionality. My goal is to create an app that is:

  • Theme agnostic
  • Allows merchants to inject labels on the collection page at various positions within the product item’s card (i.e above title, above the price, etc)

Now, I’ve been playing around and have managed to achieve this somewhat, however, along the way I discovered a few problems that I would love some feedback on.

The collection grid within the theme editor is it’s own block. Therefore you can’t use app blocks to inject labels WITHIN the collection grid, only above and below the the entire collection grid. So, I resorted to using an app embed block that uses JS to scan the page for the correct injection point… Which lead to my next issue.

How would you go about making this app theme agnostic without knowing a themes structure? Currently, I am identifying collection items using common patterns, but these patterns can vary drastically from theme to theme and would be impossible to nail every one. I want to try and avoid just having a known list of theme layout patterns and create something that can figure this out on its own.

So, my next idea was to figure out a theme’s collection grid pattern in the admin panel and store that somewhere. I figured this may be easier, as you’d be able to have access to more of the themes information. Then I could get my front end script to retrieve the exact pattern and then search for it on the page. But that lead to more road blocks that I am struggling to get my head around.

I have seen apps do this before so I know it’s possible. I am just looking for some advice or other ideas that I may have overlooked.

I wasn’t sure if this is the correct spot to write this post so feel free to move if necessary.

TIA

2

I can’t really answer your question, but I’ve seen developers simply add a TextField to allow the merchant to add the element selector - and then choose a prepend/append rule.

Not the best solution; but you might find a more creative solution. I dont think there is any good solutions.

As a theme developer, I’ll never get to like these implementation strategies - but I know some merchants rely heavily on apps and easy implementations. You can take a look at how Appmate (creator of Wishlist King) handles it.

1 Like
3

Hi Curzey,

Thanks for the reply, that’s definitely an option! Yes I agree - the more I look into it, the more problems I discover with no perfect solution :sweat_smile:

I’ll take a look at Appmate, although the ones I’ve looked at so far (BSS labels and Lably) seem to be able to detect injection points without any user input. I’m not sure if they have a massive list of know patterns or they employ some other clever tactics I’m missing!

As a solo developer trying to figure out this space by myself, I’m yet find a good resource to have these sort of discussions and bounce ideas and/or ask for advice.

Docs/Youtube/Forums has its limits! I’ll keep digging though :smiley:

4

I believe they have a list of patterns they look through.

Do they work if you install some random unknown theme? Probably an edge case, but still.