Widget Store Front Display

Widget Store Front Display Requirements:

Widget needs to display on store front. Assuming it’s the Netcomm Widget or Normal widget.

1. Primary requirement is the shift away from manually placing the html & js snippet into the theme liquid files to use a button so that it is accessible and present within the Shopify Admin product editor.

   1. Programmatically and Manually altering theme liquid files is being phased away.

   2. Shopify strategy is to favour & feature apps that comply to all their embed progression over apps that do not to force developers to upgrade.
      Non-compliance to this seems to result in not featuring in the recommended apps from shopify search as only apps that support Shopify’s new requirements have favourable search result listings.

2. Widget’s code to be added to where the product / client is displayed is to be embed using the GUI editor button functionality.

   1. The Theme editor doesnt pick up manually added code in the liquid files. So when the theme updates, then the functionality is over written by their system, as it’s a system file. Results in bad UX.

   2. Shopify’s Theme editor should have the widget’s snippet code available when adding to the page.
      This is achieved using the Theme App Extension.

   3. Initial installation should automatically result in the widget snippet being programmatically written to the respective files ie.( product or footer liquid files).

Solution outline

https://shopify.dev/docs/api/admin-rest/2024-07/resources/scripttag
https://shopify.dev/docs/apps/build/online-store/script-tag-legacy

https://shopify.dev/docs/api/admin-rest/2024-07/resources/page

https://shopify.dev/docs/api/admin-rest/2024-07/resources/theme

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

• Legacy retirement date for scripts and certain functionality: August 28, 2025.

• Two streams: Script Tags / Assets verses Theme App Extensions:
  Your app might not pass App Store review if it uses script tags instead of theme app extensions.

• All new apps, and apps that integrate with Online Store 2.0 themes, should use theme app extensions, such as app blocks or app embed blocks.

• Script tags are an alternative you can use with only vintage themes. Seems that all around the documentation mentions app embed blocks / app blocks are compatible with legacy store themes and store 2.0.

• After either the user submitting the NetcommId or eKomi details the plugin should verify credentials.

  • Successful verification will result in the plugin writing to the respective file automatically and still be editable by the GUI. Currently it doesnt register in shopify GUI.

  • Widget Code section should be able to be placed manually / edited via the GUI as failover functionality. User changes theme or deletes the file and needs to later have the ability to add the widget code later.

  • Widget should have settings made available to the user in the GUI / Admin panel.

    • Enable or disable the displaying of the widget.

• Theme app extensions:
  https://shopify.dev/docs/apps/build/online-store/theme-app-extensions
  Different types of extend-ability are made available.
  Apps that don't have a UI component, or that add floating or overlaid elements, extend themes using app embed blocks.
  
  

Theme app extensions resources

Theme app extensions resources

Theme app extensions contain the following resources:

• Blocks - Liquid files that act as the entry point for what you want to inject in a theme. The following block types are supported:

  • App blocks

  • App embed blocks

• Assets - CSS, JavaScript, and other static app content that gets injected into themes.

• Snippets - Reusable Liquid snippets that can be used across multiple blocks.

App blocks for themes

App blocks for themes

Apps that inject inline content on a page extend themes using app blocks. Merchants can add app blocks to a compatible theme section, or as wrapped app blocks that are added at the section level. Create an app block by setting the target in the schema to section.

By default, themes don't include app blocks after an app is installed. Merchants need to add the app blocks to the theme from the Apps section of the theme editor.

App block support in themes

Anchor link to section titled "App block support in themes"

For app blocks to function, a theme must contain the following:

• JSON templates.

• Sections that support and render blocks of type @app.

  Refer to Dawn's main product section for an example implementation.

You can verify whether a theme supports app blocks .

Widget Store Front Display Functionality: