> ## 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. # Widget customization > Customize the appearance of Shoppable Gallery, Product Page Gallery, and LikeShop widgets using CSS. 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 `` 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: ```html theme={null} ``` Then add the following CSS to set your target ratio and ensure images fill the container: ```html theme={null} ``` * `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. ```javascript theme={null} ```

### Customize overlay color Change the background color of the hover overlay. ```javascript theme={null} ```

### Shadow on hover Add a hover effect with smooth animation. ```javascript theme={null} ```

```javascript theme={null} ``` ### Stylized hover behaviour You can add rounded corners, a gradient background, and smooth movement to create a more dynamic hover effect. ```html theme={null} ```

**For Shoppable Gallery and LikeShop Widgets** Add these adjustments to control spacing and columns: ```html theme={null} ``` * `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 theme={null} ```

## 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 theme={null}

Example

```

### Show product price Display product prices if available in your feed. ```javascript theme={null} ``` ### 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 \ ``` * `@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 \ in \: ```html theme={null} ``` 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. ```javascript theme={null} ``` * `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. ```html theme={null} ``` * `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. ```html theme={null} ``` * `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: ```css theme={null} .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. ```css theme={null} ``` * 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.

#Plants

Example