Widget customization

This guide shows how to apply custom styles to Dash Social embeddable widgets, including Shoppable Galleries, Product Page Galleries. and Likeshop Galleries. Use these techniques to match widgets with your brand’s style and voice. You can:

Adjust layout and aspect ratios
Customize hover effects and overlays
Modify product pop-up designs
Add dynamic headers above widgets

All examples work for both carousel and grid layouts.

Before you start

Make sure the widget script is embedded and functioning on your site.
Add custom styles inside <style></style> tags in your CSS or HTML file.
Most changes target widget classes using CSS overrides.

Gallery customizations

Change aspect ratio

By default, the widget crops all images into a square (1:1) format so the gallery layout stays even. To use a different aspect ratio, add data-media-format="original" to the script tag and update the CSS to control how images fill each cell. Add data-media-format="original" to your script tag:

<script
  src="https://cdn.dashsocial.com/web/js/board-embed.js"
  type="text/javascript"
  data-name="dhboard"
  data-gallery-id="YOUR_GALLERY_ID"
  data-media-format="original"
></script>

Then add the following CSS to set your target ratio and ensure images fill the container:

<style>
  .dh-widget-container .ls-photo-wrapper .aspect-ratio-box {
    padding-top: 133.33% !important; /* 2:3 aspect ratio */
  }
  .dh-widget-container .ls-photo-wrapper .aspect-ratio-box figure {
    object-fit: cover !important;
    height: 100% !important;
  }
</style>

padding-top: Controls the aspect ratio. Values greater than 100% produce a portrait crop; values less than 100% produce a landscape crop. For example, 125% gives a 4:5 ratio and 133.33% gives a 2:3 ratio.
data-media-format="original": Required when using a custom aspect ratio. Without it, the widget overrides your CSS and forces a square crop. Note that images with very different native ratios may still appear uneven without additional custom styling.

Add hover behavior

Enable a hover overlay with a custom call-to-action.

<script
  src="https://cdn.dashsocial.com/web/js/board-carousel-embed.js"
  type="text/javascript"
  data-name="dhboard-carousel"
  data-gallery-id="2302238"
  data-call-to-action="Buy Now"
></script>

Customize overlay color

Change the background color of the hover overlay.

<style>
  .dh-widget-container .ls-photo-wrapper .aspect-ratio-box * > .overlay {
    background: rgba(11, 143, 15, 0.3);
  }
</style>

Shadow on hover

Add a hover effect with smooth animation.

<style>
  .dh-widget-container .ls-photo-wrapper .aspect-ratio-box {
    transition: all 0.3s;
  }
  .dh-widget-container .ls-photo-wrapper .aspect-ratio-box:hover {
    transform: translateY(-3px);
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.3);
  }
</style>

<style>
  /* Existing Styles */
  /* ... */

	.dh-widget-container .ls-photo-wrapper .aspect-ratio-box * > .overlay {
    /* Replace what is inside the parenthesis with either the data for the image or a url to an image */
    background-image: url('https://cdn-icons-png.flaticon.com/512/2478/2478393.png');
    background-size: 100px 100px;
    background-repeat: no-repeat;
    background-position: center;

    /* Hide the text. */
    color: transparent;
  }
</style>

Stylized hover behaviour

You can add rounded corners, a gradient background, and smooth movement to create a more dynamic hover effect.

<style>
  .dh-widget-container .ls-photo-wrapper {
    background: linear-gradient(to right, #05c50b , #c3ff00);
    border-radius: 1rem;
    border: 1px solid black;
  }

  .dh-widget-container .ls-photo-wrapper .aspect-ratio-box * > img {
    border-radius: 1rem;
    border: 1px solid black;
  }
  .dh-widget-container .ls-photo-wrapper .aspect-ratio-box {
    transition: all 0.3s !important;
    transform: translate(-8px, -8px) !important;
  }
  .dh-widget-container .ls-photo-wrapper .aspect-ratio-box:hover {
    transition: all 0.3s !important;
    transform: translate(0px, 0px) !important;
  }
</style>

For Shoppable Gallery and LikeShop Widgets Add these adjustments to control spacing and columns:

<style>
  .dh-widget-container .ls-photo-wrapper {
    /* Existing Styles */
 	  /* ... */

    padding: 0 !important;
    margin: 20px;
    width: calc(100% / 4) !important;
  }
</style>

margin: Controls spacing between items. Adjust as needed.
width: (100% / 4) !important;: Sets the grid to 3 columns. Use 100% / (columns + 1) (e.g., 100% / 6 for 5 columns).

Custom header above widget

Many brands add a custom header above their Shoppable or Product Page Galleries. A common pattern is hiding the header if no media is available for that page. You can achieve this with a small JavaScript snippet that checks the widget’s content.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .dh-widget {
        font-family: "Mark", helvetica neue, helvetica, arial, sans-serif;
        font-size: 2rem;
        text-align: center;
        color: rgb(80, 145, 39);
      }
    </style>
  </head>
  <body>
    <div id="dashhudson-widget" class="dh-widget">
      <h2>#Plants</h2>
      <script
        src="https://cdn.dashsocial.com/web/js/product-carousel-embed.js"
        type="text/javascript"
        data-name="dhproduct-carousel"
        data-id="144"
        data-id-type="brand_id"
        data-product-id="atonel39ct"
      ></script>
    </div>

    <script>
      const widgetElement = document.getElementById('dashhudson-widget');

      const observer = new MutationObserver(() => {
        const emptyWrapper = widgetElement.getElementsByClassName('empty');
        widgetElement.style.visibility = emptyWrapper.length > 0 ? 'hidden' : 'visible';
      });

      observer.observe(widgetElement, {
        childList: true,
        subtree: true
      });
    </script>
  </body>
</html>

Product pop-up customizations

When a user clicks on a post in a Shoppable Gallery or Product Page Gallery, a product pop-up opens. This pop-up displays: The media the user clicked on A list of all products tagged in that post Links that take the user to the product pages You can customize the appearance of this pop-up to better match your brand style using CSS. Below is a basic widget example that includes the pop-up. The following sections will show how to adjust colors, fonts, and layout.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  </head>
  <style>
      h2 {
          color: #535353;
          margin-top: 5rem;
      }
  </style>
  <div>
        <h2>Example</h2>
         <script
            src="https://cdn.dashsocial.com/web/js/board-carousel-embed.js"
            type="text/javascript"
            data-name="dhboard-carousel"
            data-gallery-id="2302238"
            data-gap-size="5"
            data-call-to-action="Shop Now"
        ></script>
    </div>
</html>

Show product price

Display product prices if available in your feed.

<script
  src="https://cdn.dashsocial.com/web/js/board-carousel-embed.js"
  data-show-price="true"
></script>

Custom font

You can change the font used in the pop-up by overriding the font-family CSS property. To use a custom font, import it in your <style> block or include it in the <head> of your page. Example with Google Fonts:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');

  /* Apply to LikeShop or Shoppable pop-up */
  .ls-detail .ls-detail-container {
    font-family: 'Roboto Mono', monospace;
  }
</style>

@import url(...) – Loads the custom font. Replace the URL with your own font file or provider.
font-family – Sets the pop-up font. Replace “Roboto Mono” with your custom or built-in font.

Example with <link> in <head>:

<html>
  <head>
    <link href="https://yourwebsite.com/path/to/font.css" rel="stylesheet">
  </head>
  <body>
    <!-- Your widget HTML -->
  </body>
</html>

This approach is useful if you’re already managing fonts through external stylesheets.

Custom background

You can override the default white background of the pop-up by targeting its container elements.

<style>
  /* Existing Styles */
  /* ... */

  .ls-detail .ls-detail-image-content,
  .ls-detail .ls-detail-header,
  .ls-detail .ls-detail-footer {
    background: rgb(36, 36, 36) !important;
  }


  .ls-detail .ls-detail-link-box > a p {
    color: white !important;
  }
</style>

background – Sets a custom color for the header, footer, and main content area.
color – Adjust text color to ensure readability against your background.

To style the header and footer differently, split the selectors and assign unique colors.

Custom product backgrounds

You can also style individual product items inside the pop-up. The example below alternates colors for even and odd items.

<style>
  .ls-detail .ls-detail-link-box {
    padding: 0 !important;
  }

  .ls-detail .ls-detail-link-box > a {
    padding: 8px !important;
  }

  .ls-detail .ls-detail-link-box > a:nth-child(even) {
    background: rgb(56, 56, 56) !important;
  }

  .ls-detail .ls-detail-link-box > a:nth-child(odd) {
    background: rgb(24, 24, 24) !important;
  }
</style>

padding: 0 – Removes extra space from the container so the background color fills the area.
padding: 8px – Adds spacing around each product item for better readability.
:nth-child(even/odd) – Alternates background colors for visual separation.

Custom buttons

You can replace the default close, previous, and next buttons in the pop-up with your own icons by overriding their background images.

<style>
  .ls-detail-header .ls-btn-close,
  .ls-detail-header .ls-btn-close:hover {
    background: url('https://cdn-icons-png.flaticon.com/512/2478/2478393.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
  }
</style>

background – Sets the image for the button.
background-size – Controls the icon size inside the button.
background-position – Centers the icon.

Applying to next/previous buttons

You can target .ls-btn-next and .ls-btn-prev the same way to style navigation buttons:

.ls-detail .ls-btn-next,
.ls-detail .ls-btn-prev {
  background: url('/path/to/icon.png') no-repeat center;
}

Reverse product layout

By default, the pop-up layout places the media on the left and products on the right. You can flip this order using a simple CSS override.

<style>
  /* Rest of Styles */
  /* ... */

  .ls-detail .ls-detail-container {
    flex-direction: column-reverse !important;
  }

  @media (min-width: 850px) {
    .ls-detail .ls-detail-container {
      flex-direction: row-reverse !important;
    }
  }
</style>

flex-direction: column-reverse – Stacks products above the media on mobile.
flex-direction: row-reverse – Flips positions side-by-side on desktop.

You can adjust the breakpoint (850px) to match your site’s responsive layout.

Get Started

Reporting

Campaigns

Scheduler

Social Commerce

Social Listening

Community

Integration

MCP Server

Before you start

Gallery customizations

Change aspect ratio

Add hover behavior

Customize overlay color

Shadow on hover

Stylized hover behaviour

Custom header above widget

Product pop-up customizations

Show product price

Custom font

Custom background

Custom product backgrounds

Custom buttons

Applying to next/previous buttons

Reverse product layout

​Before you start

​Gallery customizations

​Change aspect ratio

​Add hover behavior

​Customize overlay color

​Shadow on hover

​Stylized hover behaviour

​Custom header above widget

​Product pop-up customizations

​Show product price

​Custom font

​Custom background

​Custom product backgrounds

​Custom buttons

​Applying to next/previous buttons

​Reverse product layout

Before you start

Gallery customizations

Change aspect ratio

Add hover behavior

Customize overlay color

Shadow on hover

Stylized hover behaviour

Custom header above widget

Product pop-up customizations

Show product price

Custom font

Custom background

Custom product backgrounds

Custom buttons

Applying to next/previous buttons

Reverse product layout