# Shopping-with Toolbar Custom Integration

**GoAffPro** provides you with the option of custom integration of the Shopping-with Toolbar in the store.

To use custom integration of the Shopping-with Toolbar, go to the **Online Store** section in the Shopify dashboard.

![Online Store](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-M55POHJ1Aj5sgl3E8TE%2F-M55e7lEIAqHSkjBeYuv%2FAnnotation%202020-04-17%20105815.png?alt=media\&token=6bb5bf62-5f83-4e08-9734-2400950fd5d4)

Here, go to the Themes tab.

![Themes](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-M55POHJ1Aj5sgl3E8TE%2F-M55defj4l95OccNmkgU%2FAnnotation%202020-04-17%20110440.png?alt=media\&token=6b2c5505-3fde-4246-aef2-83c2cabc0ee8)

Now, click on **Actions** and select **Edit code** in the Current theme section.

![Current theme > Actions > Edit code](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-M55POHJ1Aj5sgl3E8TE%2F-M55fpLM0krhFp7lZtiG%2FAnnotation%202020-04-17%20110341.png?alt=media\&token=dec17039-aabb-489a-8969-b7e25f25871b)

This will open up the Edit code section

![Edit code](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-M55POHJ1Aj5sgl3E8TE%2F-M55gKZG1xFHlhOqb5rR%2Fimage.png?alt=media\&token=d56e593f-dd3f-42ed-9ca2-df71dbff1f2a)

Now, open up the theme.liquid section and embed the following code wherever you want the Shopping-with Toolbar to appear:

```
 <div id="gfp_affbar"></div>
```

After this, click on **Save**.&#x20;

![theme.liquid](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-M55POHJ1Aj5sgl3E8TE%2F-M55hBVeRxDAgOlI5BxE%2FAnnotation%202020-04-17%20112212.png?alt=media\&token=2e4bdd55-13de-4b47-ab34-d38d78528155)

#### For Example:

By default, the Shopping-with Toolbar gets displayed at the top of the store.

![Shopping-with Toolbar](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-M55POHJ1Aj5sgl3E8TE%2F-M55ljKaJzkpk8EULQoI%2Fimage.png?alt=media\&token=d6d2b3b2-62c5-4483-a007-3425221110d8)

Here we want the Shopping-with Toolbar to appear below the main menu section.

Now, embed the following code in the theme.liquid section accordingly:

```
 <div id="gfp_affbar"></div>
```

![Embed the code](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-M55POHJ1Aj5sgl3E8TE%2F-M55n2wYI9gETyGCkrlX%2FAnnotation%202020-04-17%20114759.png?alt=media\&token=6c4a82e9-3bf0-4b88-be29-0f693e35c8e9)

Click on **Save.**

![Click on Save](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-M55POHJ1Aj5sgl3E8TE%2F-M55nF8Ou74fIxqaStkf%2FAnnotation%202020-04-17%20114759.png?alt=media\&token=32e8e602-9dac-490e-b535-f5cada0b6afa)

After this, the Shopping-with Toolbar will appear below the main menu section.&#x20;

![](https://1200686697-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdPzLtyP46oY7cyXnkw%2F-M55POHJ1Aj5sgl3E8TE%2F-M55nOLfR-m4N3oaIczf%2FAnnotation%202020-04-17%20115215.png?alt=media\&token=9545336d-3b67-49e4-a9e3-ef00ee1337d8)
