# How to add Details+ app block to your storefront?

Details+ uses **Shopify's OS 2.0 app blocks** to display published details on your storefront. App block helps to add details to the storefront without altering the theme code. Also keeps your code clean in case of removal of the app. Learn more about app blocks [here](https://shopify.dev/themes/os20#app-blocks).

Follow the steps below to add the Details+ app block to your theme. It won't take more than 5 minutes and have to do it only once. Unless there is a change in the store's theme.

Open the **Details+** app from your Shopify admin and go to the **App block** section.

![](https://2276022828-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDuhElDOAueoYZ5H4uId4%2Fuploads%2FRqSvxkua9pN4VgF5RxwA%2FD%2B%201.png?alt=media\&token=34f697a5-734a-4f21-b3f7-1cd0c45adb82)

Click on the **Open theme editor** button to open your current theme in **Shopify's theme editor**.

![](https://2276022828-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDuhElDOAueoYZ5H4uId4%2Fuploads%2F8l0QEn8Uzj27IBBcFCNu%2FD%2B%202.png?alt=media\&token=dd19a30d-7488-4772-9416-259ab700110a)

Open the **product information** section on the left panel and click on **add block**.

![](https://2276022828-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDuhElDOAueoYZ5H4uId4%2Fuploads%2FbLgKyqfh7MV6Dw4e0zPN%2FD%2B%203.png?alt=media\&token=c5d41635-3d5f-4f02-b1e5-7f6ce9a7d02b)

Click on **Details+** under the apps section.

![](https://2276022828-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDuhElDOAueoYZ5H4uId4%2Fuploads%2FsaHVyp44iybOdug7yKmk%2FD%2B%204.png?alt=media\&token=491e23dd-09c3-4eb6-ad56-88eaa327a339)

The app block will be now visible in the preview.

![](https://2276022828-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDuhElDOAueoYZ5H4uId4%2Fuploads%2FhVtGhaER6U4JD6NioDPV%2FD%2B%205.png?alt=media\&token=dae35e3b-5f82-40a9-9bcc-8ebaa2f0edff)

Use the icon buttons to reposition or hide the app block.

![](https://2276022828-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDuhElDOAueoYZ5H4uId4%2Fuploads%2FfM8nKoJADTqWhhfWrxio%2FD%2B%206.png?alt=media\&token=d38a2a01-a28d-4e70-a5f1-a755ffb006ea)

Now go back to the app block page and click on the **check now** button.

![](https://2276022828-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDuhElDOAueoYZ5H4uId4%2Fuploads%2FFhoOu70XzOWtWBR5ETdZ%2FD%2B%207.png?alt=media\&token=b3ddb644-2a5b-4a4c-aa18-8b413188c612)

The status will show **connected** if the app block is added. 

![](https://2276022828-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDuhElDOAueoYZ5H4uId4%2Fuploads%2FCLoXSxPN5tq8ke3QKITq%2FD%2B%208.png?alt=media\&token=7d97299b-d354-4788-bfe2-059ab7a7ff99)

Your storefront is now ready to publish details.

![](https://2276022828-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDuhElDOAueoYZ5H4uId4%2Fuploads%2FVwTgmXTCfG0tUoagNkkC%2FD%2B%209.png?alt=media\&token=5d596d2d-dfc2-4a72-a369-a36801011201)