# Integrate apps into the theme

***

{% embed url="<https://www.loom.com/share/80169ebaa79d49e981726afe46f9484a?sid=89c33536-1c81-4ceb-b8ea-f5d3f572ac65>" %}

You can install [apps](https://help.shopify.com/en/manual/apps) to add features and integrations to your theme. You can find apps on the [Shopify App Store](https://apps.shopify.com/).&#x20;

Apps can integrate with your theme in the following ways:

* As an app block: App blocks let you add app functionality exactly where you want to use it in your theme. You can add, remove, preview, reposition, and customize app blocks through the theme editor.
* As an app embed: App embeds are app-provided elements that float or appear as an overlay in your theme, or add code to your online store without being visible to your customers. You can activate, deactivate, preview, and customize app embeds through the theme editor.
* By adding custom code: Some apps inject code directly into your theme's code to add functionality to your theme. You might customize the app using the app settings, or using the theme editor.

### **1. App blocks**

Apps can be added both as blocks in a section, and as sections in a template. This lets you add app functionality exactly where you want to use it on a page. App blocks can be added, removed, repositioned, and customized through the theme editor.App blocks might only be compatible with certain page types. For example, a size chart app might only be compatible with product pages.

#### Add an app block to a section:

* From your Shopify admin, go to **Online Store** > **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* Navigate to the page and section where you want to add the **app block**.
* On the sidebar, click **Add block**.
* From the drop-down menu, in the **APP BLOCKS**, select the app block that you want to add to the section or click the **Search** bar and enter a search term to search through your installed apps.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/b758fd1e-9e22-4c21-a569-0c9f95db6572/Screenshot%202023-12-22%20at%203.37.49%20PM.png" alt=""><figcaption></figcaption></figure>

* Click and drag the `⋮⋮` icon to move the block to another available location on the page. You can also customize the block using any available settings.
* Click **Save**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/56f4ec3c-84af-4971-a583-a88d5f598984/Screenshot%202023-12-22%20at%203.40.55%20PM.png" alt=""><figcaption></figcaption></figure>

#### Add an app section to a page:

* From your Shopify admin, go to **Online Store** > **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* Navigate to the page where you want to add the app section.
* On the sidebar, click **Add section**.
* From the drop-down menu, in the **Apps** section, select the app that you want to add to the page or click the **Search** bar and enter some text to search through your installed apps.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/4857beba-5daf-406b-a7af-7378b2ae50a1/Screenshot%202023-12-22%20at%203.44.06%20PM.png" alt=""><figcaption></figcaption></figure>

* Click and drag the `⋮⋮` icon to move the block to another available location on the page. You can also customize the block using any available settings.
* Click **Save**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/b41c48f3-c366-4e80-8ad2-4a1cb38f6094/Screenshot%202023-12-22%20at%203.45.52%20PM.png" alt=""><figcaption></figcaption></figure>

> ***Note**: Before customizing with the app block/section, you need to **activate*** [***App embeds***](#2.-app-embeds)*.*

### **2. App embeds**

App embeds are app-provided elements that float or appear as an overlay in your theme, or add code to your online store without being visible to your customers. For example, a chat bubble app that appears in the corner of your store, or an analytics or tracking app might be added to your store as an app embed. App embeds can be activated, deactivated, and customized through the theme editor. App embeds can be used with any theme version.

{% hint style="info" %}

#### Activate an app embed

* From your Shopify admin, go to **Online Store** > **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* On the sidebar, click the **App embeds** icon.
* Select the app embed that you want to activate or click the **Search** bar and enter a search term to search through your installed apps.
* Beside the app embed that you want to activate, click the toggle to activate it.
* Preview your store to view the embedded app live.
  {% endhint %}

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/512daafa-830e-4698-a6b7-11b765292461/Screenshot%202023-12-22%20at%203.50.22%20PM.png" alt=""><figcaption></figcaption></figure>

> ***Note**: Only when **App embeds** are activated, you can customize the theme editor with apps, such as adding an app block/section.*

### **3. Apps added to theme code**

Some apps inject code directly into your theme's code to add functionality to your theme. After you install the app, you might receive onboarding instructions that include editing your own code to add app functionality where you want it to appear in your theme. You might customize the app using the app settings, or using the theme editor.

If your theme offers a Custom Liquid section, then you might be able to add your app code into a Custom Liquid section in the theme editor instead of editing your theme code directly.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/1c2df423-7e13-444c-84c3-c8d141acdc46/Screenshot%202023-12-22%20at%203.53.07%20PM.png" alt=""><figcaption></figcaption></figure>