> ## Documentation Index
> Fetch the complete documentation index at: https://developer.dashsocial.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Get started with Social Commerce

> Connect your product data and display shoppable galleries on your website with Dash Social.

This guide provides an overview of the steps required to connect your product data and display product galleries on your website. Follow the steps in order for a smooth integration.

```mermaid theme={null}
flowchart LR
  A[fa:fa-database Set Up Product Feed] --> B[fa:fa-images Choose Gallery Type]
  B --> C[fa:fa-th-large Shoppable Gallery]
  B --> D[fa:fa-box Product Page Gallery]
  B --> E[fa:fa-link Likeshop Gallery]

  C --> F[fa:fa-code Select Integration Method]
  D --> F
  E --> F

  F --> G[fa:fa-cogs JavaScript Widget]
  F --> H[fa:fa-code API Integration]

  G --> I[fa:fa-rocket Implement Gallery]
  H --> I

```

## Implementation

### Step 1: Set up your product feed

Before creating galleries, connect your product catalog to our system. This imports product details such as names, prices, images, and stock status.

<CardGroup cols={1}>
  <Card title="Product Feed Setup Guide" href="https://developer.dashsocial.com/guides/social-commerce/product-feed/product-feed-setup-guide">
    Set up a product feed to import and sync your product data in Dash.
  </Card>
</CardGroup>

***

### Step 2: Choose your gallery type

After the product feed is set up, decide how you want to display your products.

#### Shoppable Gallery

A clickable, curated gallery that links social content to product pages. Best for homepages, landing pages, or editorial sections.

#### Product Page Gallery

A product-specific carousel or grid that displays user-generated or brand content for a single product. Best for product detail pages (PDPs).

See more difference between Shoppable Gallery and Product Page Gallery here:

<CardGroup cols={1}>
  <Card title="Galleries Overview & Implementation" href="https://developer.dashsocial.com/guides/social-commerce/shoppable-and-product-page-galleries/galleries-overview-and-implementation">
    Understand the differences between Shoppable and Product Page Galleries
  </Card>
</CardGroup>

#### Likeshop Gallery

A scrollable carousel or gallery that displays clickable posts from your LikeShop, linking Instagram and TikTok content directly to product pages. Best for creating a link-in-bio shopping experience that connects social traffic to your site.

***

### Step 3: Select an integration method

There are two ways to add a gallery to your site:

#### JavaScript Widget

* Quick to deploy with a ready-made layout.

* Minimal coding required.

* Collects metrics such as views and click tracking automatically, displayed in Dash Social reports.

* Best for teams that want an easy setup without developer support.

#### API Integration

* Full flexibility to create a custom gallery that matches your brand.

* Avoids third-party JavaScript for stricter security and performance needs.

* Cache content server-side for faster load times.

* Integrate localized product data or other custom feeds.

* Can be used to power both websites and native mobile apps.

See more details here:

<CardGroup cols={1}>
  <Card title="Choosing Between API and Widget Integrations" href="https://developer.dashsocial.com/guides/social-commerce/shoppable-and-product-page-galleries/choosing-between-api-and-widget-integrations">
    API vs Widget: Which Integration to Use.
  </Card>
</CardGroup>

***

### Step 4: Implement your gallery

Follow the instructions for your selected gallery type and integration method.

#### Shoppable Gallery

<CardGroup cols={2}>
  <Card title="Shoppable Gallery Widget Setup" href="https://developer.dashsocial.com/guides/social-commerce/shoppable-and-product-page-galleries/shoppable-gallery/shoppable-gallery-widget-setup">
    Embed Shoppable Galleries on your site with a quick JavaScript widget and minimal setup.
  </Card>

  <Card title="Build Shoppable Galleries with the API" href="https://developer.dashsocial.com/guides/social-commerce/shoppable-and-product-page-galleries/shoppable-gallery/build-shoppable-galleries-with-the-api">
    Build custom Shoppable Galleries with Dash Social's API.
  </Card>
</CardGroup>

#### Product Page Gallery

<CardGroup cols={2}>
  <Card title="Product Page Galleries: API Integration Guide" href="https://developer.dashsocial.com/guides/social-commerce/shoppable-and-product-page-galleries/product-page-gallery/product-page-galleries-api-integration-guide">
    Build fully custom Product Page Galleries with Dash Social's API.
  </Card>

  <Card title="Product Page Gallery Widget Setup" href="https://developer.dashsocial.com/guides/social-commerce/shoppable-and-product-page-galleries/product-page-gallery/product-page-gallery-widget-setup">
    Embed product-linked media on PDPs using the Product Page Gallery widget.
  </Card>
</CardGroup>

#### LikeShop Gallery

<CardGroup cols={1}>
  <Card title="LikeShop Widget Setup" href="https://developer.dashsocial.com/guides/social-commerce/shoppable-and-product-page-galleries/likeshop-gallery/likeshop-widget-setup">
    Embed a LikeShop gallery or carousel on your site to showcase shoppable Instagram and TikTok posts.
  </Card>
</CardGroup>