> ## 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. # Shoppable gallery widget setup > Embed a shoppable gallery on your site with a JavaScript widget and minimal setup. ## Overview Use the Shoppable Gallery widget to embed your gallery on any page of your site without coding. It pulls in the media you've added to the gallery and displays it in either a grid or carousel layout. ## Before you start Make sure you have the following: * **Code access** to the page where you want to embed the script * **Gallery ID**: Retrieved from the URL in the Dash Social platform. * Once your gallery is created in Dash Social, you can find its ID in the URL. Example URL: * ```text theme={null} https://app.dashsocial.com/{brand_name}/library/galleries?sort=CREATED&sort_order=DESC&tags_filter_type=OR&graph_start_date=2025-05-29&graph_end_date=2025-06-04&graph_scale=DAILY&graph_reporting_period_mode=LAST_7_DAYS&d=boardDetail%7CboardId%3A5448990%26galleryType%3ALIBRARY%26isCompetitors%3Afalse ``` * `%3A` is a URL-encoded colon (`:`) * Look for the number after `boardId:` * In this case, the **Gallery ID** is `5448990` ## Embed the widget Choose between **Gallery Layout** and **Carousel Layout** based on your design preferences. * Use **Gallery Layout** to show rows of media * Use **Carousel Layout** for a scrollable horizontal strip ### Gallery layout Place the following code inside an element on the page you would like it to appear on, replace `` in line 5 with your Gallery ID: ```javascript theme={null} ``` ### Carousel layout Place the following code inside an element on the page you would like it to appear on, replace `` in line 5 with your Gallery ID: ```javascript theme={null} ``` ## Widget parameters These parameters control the behavior and appearance of the Shoppable Gallery widget. If you are interested in more advanced styling and customization, refer to the Widget Customization Guide: Customize Dash Social widgets with CSS for fonts, colors, and layout tweaks. | Parameter | Required | Applies To | Description | | :----------------------------- | :------: | :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `data-gallery-id` | Yes | Gallery / Carousel | Gallery ID to load. | | `data-row-size` | No | Gallery / Carousel | Number of images per row. Default: `3`. | | `data-row-limit` | No | Gallery | Limits the number of rows displayed. No limit by default. | | `data-gap-size` | No | Gallery / Carousel | Spacing between images (pixels). Default: `2`. | | `data-mobile-row-size` | No | Gallery / Carousel | Images per row on mobile. Defaults to `data-row-size`. | | `data-mobile-gap-size` | No | Gallery / Carousel | Spacing between images on mobile. Defaults to `data-gap-size`. | | `data-call-to-action` | No | Gallery / Carousel | Adds a hover CTA. Options: `learn_more`, `shop_now`, `book_now`. | | `data-lazy` | No | Gallery / Carousel | Loads images with `loading="lazy"` for performance. | | `data-links-disabled` | No | Gallery / Carousel | Disables the media popup when clicking an image. | | `data-hide-popup-footer` | No | Gallery / Carousel | Removes the Dash Social footer from the popup. | | `data-high-res` | No | Gallery / Carousel | Controls image resolution. `1` = high-res (default), `0` = low-res. | | `data-media-format` | No | Gallery / Carousel | Controls image resolution and format. Options: `optimized` (recommended for crisp images with smaller file size), `original` (raw source files, can be 10MB+), `ratio` (smaller aspect-preserving images for page speed). Overrides `data-high-res`. | | `data-disable-product-new-tab` | No | Gallery / Carousel | Default `false`. Set `true` to open product links in the same tab. | | `data-scroll-disabled` | No | Carousel | Hides scroll buttons. | | `data-autoplay` | No | Carousel | Auto-scrolls the carousel. `true` / `false` (default). | | `data-infinite` | No | Carousel | Wraps carousel to start/end. `true` / `false` (default). | | `data-carousel-dots` | No | Carousel | Shows navigation dots. `true` / `false` (default). | | `data-show-price` | No | Gallery / Carousel | Shows tagged product prices in the popup. Requires `price` + `currency_code` in your product feed. | | `data-override` | No | Gallery / Carousel | Required for localized product feeds. Matches the `override` value in your feed. | ## Content Security Policy If your site uses a Content Security Policy (CSP), you'll need to allow the domains and MIME types used by the Shoppable Gallery Widget. This ensures scripts, images, and network calls load correctly. ### Why this matters * Ensures the widget script can load safely. * Allows image and video assets from approved Dash Social domains. * Prevents CSP errors that block network calls or media loading. ### Required CSP directives ```html theme={null} script-src https://cdn.dashsocial.com; connect-src https://likeshop.me; img-src 'self' data: https://cdn.dashsocial.com https://likeshop.me https://dashsocial-static.s3.amazonaws.com https://d1cka1o15bmsqv.cloudfront.net https://dashsocial.com https://www.dashsocial.com ``` ### Approved domains and MIME types * **[https://cdn.dashsocial.com](https://cdn.dashsocial.com)** * `application/javascript` * `image/jpeg` * `video/mp4` * **[https://likeshop.me](https://likeshop.me)** * `text/html` * `image/png` * `image/gif` * `application/json` * **data:** * `application/font-woff` * `image/png` * **[https://dashsocial-static.s3.amazonaws.com](https://dashsocial-static.s3.amazonaws.com)** * `image/jpeg` * `video/mp4` * **[https://d1cka1o15bmsqv.cloudfront.net](https://d1cka1o15bmsqv.cloudfront.net)** * `image/jpeg` * `video/mp4` * **[https://dashsocial.com](https://dashsocial.com)** * `text/html` * **[https://www.dashsocial.com](https://www.dashsocial.com)** * `text/plain`