> For the complete documentation index, see [llms.txt](https://wiki.ls.skeepers.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.ls.skeepers.io/features/shopify-app.md).

# Shopify App

You are using Shopify on your website, install our Shopify app to seamlessly integrate the Live Shopping and Shoppable Content solution on your ecommerce website.

Make the onboarding and integration process easier and faster, synchronize your products directly from Shopify then place and customize the Skeepers widget from your theme options.

<figure><img src="https://57693527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhV5jW6s4gHPDshANjYIl%2Fuploads%2FRAhJf0gEwPtTqn7EuZFO%2Fimage.png?alt=media&amp;token=d946dd34-603f-4a99-8cef-87c1a64f1173" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To use the App you will need access to our back office, communicate with your CSM if you don't.
{% endhint %}

Check the video below to see the Shopify App in action

{% embed url="<https://www.canva.com/design/DAFpjg82fG4/-DqP4Oq6aFY1balRJeDdiA/watch>" %}

### How to use the Shoppify App

Regardless the solution you want to integrate, Live Shopping or Shoppable Content, the first steps are identical

* Install the Skeepers Live Shopping App [here](https://apps.shopify.com/skeepers-live-shopping-2?search_id=d6f62120-7693-4a93-a3b4-fded56750e84\&surface_detail=skeepers\&surface_inter_position=1\&surface_intra_position=3\&surface_type=search)
* Open the app from your admin panel

<figure><img src="https://57693527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhV5jW6s4gHPDshANjYIl%2Fuploads%2FJrW5SzL6aepU4QMtA9q9%2Fimage.png?alt=media&amp;token=86def962-1702-4b00-8b89-aa0a3c7d1729" alt=""><figcaption></figcaption></figure>

* Click on "Connect to your account" by using your Skeepers credentials
* Open the "Products" tab, select the products you want to use for your Live Shopping or Shoppable Content, then click "Export"&#x20;

<figure><img src="https://57693527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhV5jW6s4gHPDshANjYIl%2Fuploads%2F7UEwqJSILz1Yh84x2EXH%2Fimage.png?alt=media&amp;token=9f9ddfc1-4a3a-467e-ad5b-c8668e5d6f2d" alt=""><figcaption></figcaption></figure>

* Your shopify products are now available in the Skeepers Backoffice, you can start creating your first live or Shoppable Content. If you update a product in shopify, you will have to export the product again, the status will let you know wich product was modified and needs an update
* Finally place the Skeepers widget wherever you want on your website by heading to Online Store > Themes > Customize

<br>

### Shoppable Content

<figure><img src="https://57693527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhV5jW6s4gHPDshANjYIl%2Fuploads%2FOj5ZPLBV9HPgMVIsfodd%2Fimage.png?alt=media&amp;token=15728f6a-ad7e-40ef-968e-fde6240113bd" alt=""><figcaption></figcaption></figure>

Add the block Shoppable Content where you want to display it.

The Shoppable Content available on Skeepers Backoffice for the product will be matched and displayed automatically.

If you want to display a different product or if you are not using Shoppable Content on a product page, you can enter a specific product ID in the widget settings

<figure><img src="https://57693527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhV5jW6s4gHPDshANjYIl%2Fuploads%2FtCAS02LQiqr6IZ0RnwWJ%2Fimage.png?alt=media&amp;token=7c3b5d39-323f-4511-9be8-14f60ec2fecf" alt=""><figcaption></figcaption></figure>

Customize how your Shoppable Content is displayed by using the different settings available

**Main color:** Change the CTA color

**Width:** Change the width of each media preview

**Height:** Change the Height of each media preview

**Collection ID:** Show a collection by entering his ID displayed on LS Backoffice

**Product ID:**

**Mode:**

* Thumbnail - Show only the first media of the story
* Slider - Show all Story’s media in a carousel

<br>

### Live Shopping

<figure><img src="https://57693527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhV5jW6s4gHPDshANjYIl%2Fuploads%2FFhGaEZhIiNmuWKc5P3V8%2Fimage.png?alt=media&amp;token=3ccb1f0e-c173-43ca-92f1-4ccf33d2e5a3" alt=""><figcaption></figcaption></figure>

In order to display the list of live into your Shopify store, you will need to add the Live Shopping Widget on your Live landing page (wherever you want to show your live).

<figure><img src="https://57693527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhV5jW6s4gHPDshANjYIl%2Fuploads%2FmesokuKXUp32dTAhicqE%2Fimage.png?alt=media&amp;token=2b3f1361-945e-4f6e-a3de-1353538bd1f4" alt=""><figcaption></figcaption></figure>

Customize how your live events are displayed by using the different settings available.

**Main color:** Set the color of all action buttons

**Display:**

* **All:** Display all your live events
* **Upcoming:** Display upcoming events
* **Replay:** Display event in replay

**Keywords:** Add keywords to your live events during creation or edition and add those keywords in the tag to display the list of corresponding events, you can put as many keywords as you want.