All Tutorials

Modify the online store channel

All Tutorials

Modify the online store channel

Modify the online store channel

Shopify provides several different ways to add additional functionality to the Online Store through your app.

App sections

App sections are automatically made available for the merchant to add to a page when an app is installed. They allow a merchant to configure how an app is displayed or reposition it on the page. App sections are a familiar, intuitive experience, and are the preferred way for apps to be installed on the storefront. App sections are only available when using the online store design experience preview.

Get started with App Sections

ScriptTags

A ScriptTag is a tag that represents some javascript code running on a remote server. If you load a ScriptTag into an Online Store page, then the javascript code from the remote server will be added to the page when the page is viewed.

Using ScriptTags in your app allows you to add functionality to an Online Store page without having to manually edit any theme templates. This means that if a merchant uninstalls your app, then they won't need to edit their theme templates to revert any changes.

Get started with ScriptTags

Application proxies

An application proxy is a feature that fetches and displays data on an Online Store page from an outside location that you specify. The content you add to the Online Store with proxy pages can be dynamic. You can use application proxies to display content such as image galleries, statistics, and custom forms.

Get started with Application Proxies

App snippets

App snippets are blocks of liquid code that are automatically made available when an app is installed, and automatically removed from the store when the app is uninstalled. App snippets allow for more precise injection points within an existing section, but require direct changes to the theme code. App snippets are only available when using the online store design experience preview.

Get started with App Snippets

Javascript best practices

Since Shopify is a hosted solution, there are a few best practices to keep in mind when using JavaScript on a Shopify store.

Use Javascript responsibly

Adding code to storefronts

If a merchant has installed a sections-compatible theme, using app sections is the preferred method of adding custom code to a storefront. Within your app, check if Pages/{page-type}.liquid exists in order to see if sections have been enabled for the given page.

If sections have not been enabled, use app snippets to add custom code to legacy theme templates.