# RudderStack Shopify Source Solution Offerings

This guide walks you through the different product offerings as a part of the RudderStack Shopify Source Solution.

## RudderStack Pixel

You can install the [RudderStack Pixel](https://apps.shopify.com/rudderstack-pixel?show_store_picker=1) app directly to your Shopify store. This app gives you the option to track Shopify’s [standard pixel events](https://shopify.dev/docs/api/web-pixels-api/standard-events). RudderStack automatically tracks these events and transforms them so that they adhere to the [RudderStack Ecommerce Spec]({{< ref "event-spec/ecommerce-events-spec/" >}}).

Also, this app automatically subscribes you to several of Shopify’s standard webhook topics for server-side ecommerce tracking. RudderStack transforms the event names and properties so that they adhere to the [RudderStack Ecommerce Spec]({{< ref "event-spec/ecommerce-events-spec/" >}}).

{{< info >}}
You can find the raw event name (pre-transformation) in the `context.shopifyDetails` object of the event payload.
{{< /info >}}

## Shopify Custom Pixel

[Shopify Custom Pixel](https://github.com/rudderlabs/shopify-custom-pixel/blob/main/src/index.js) is a script created and maintained by RudderStack. It listens for Shopify’s [standard pixel events](https://shopify.dev/docs/api/web-pixels-api/standard-events) and triggers RudderStack events when they occur.

Because it is a custom pixel, it has relaxed permissions and is able to load the [RudderStack JavaScript SDK]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/" >}}) on your Shopify store. It also lets you edit the code and add additional events, as required.

### Setup

1. Copy the code from the [Custom Pixel Github repository](https://github.com/rudderlabs/shopify-custom-pixel/blob/main/src/index.js). Alternatively, you can also fork this repo so you can make any changes to the code as per your business requirements.
2. Paste the code into a custom pixel that you create in your Shopify store. 
3. Specify the [data plane URL]({{< ref "get-started/introduction/glossary.md#data-plane-url" >}}) and the [Shopify source write key]({{< ref "get-started/introduction/glossary.md#write-key" >}}) at the top of the code script, as shown:

```javascript
// Mandatory credentials for RudderStack to connect this pixel to your account source.
// Replace the below values with your own values.
const DATAPLANE_URL = "<DATA_PLANE_URL>";
const WRITE_KEY = "<SOURCE_WRITE_KEY>";
```