> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/en/userguide/widget/designsettings.md).

# Design

{% hint style="info" %}
Customize the design to show your widget at its best.\
Fine-tune everything from PC and mobile responsiveness to size, position, and corner rounding.
{% endhint %}

### Multi-Shop Player widget

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2F2QxPa0xm2FxFr3SW0l2d%2Fdesignsettings-1-en.jpg?alt=media" alt=""><figcaption></figcaption></figure>

1. In **Display Template tab > PC layout**, choose List, Grid, or Slide. The layout you choose appears right away in the preview on the right.
2. Enter the widget height. You can set a height from 640px to 800px.
3. Turn the buttons shown in the Multi-Shop Player widget on or off. Buttons you turn off don't appear in the widget.

### Floating widget

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FQaPSrA3DEz1Vy35lfCCk%2Fdesignsettings-2-en.png?alt=media" alt=""><figcaption></figcaption></figure>

1. In **Size & Shape**, set the size the Floating widget has when it first appears on PC. Clicking the button switches between Minimum and Medium, and visitors can change the size themselves.
2. In **Corner Shape**, choose rounded or square corners for the Floating widget.
3. In **Position**, choose the side of the screen where the widget appears. Adjust the side and bottom margins to fine-tune its position.
4. In **Show Button**, turn the buttons shown on the Floating widget on or off.

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2Fuwp2TEntp8I7bBoiuT7I%2Fdesignsettings-3-en.png?alt=media" alt=""><figcaption></figcaption></figure>

5. On mobile, you can only set the side of the screen where the Floating widget appears. **The widget position can differ between PC and mobile.**

### Slide widget

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FLaFz6Ye3d5i7jb6bLZTH%2Fdesignsettings-4-en.png?alt=media" alt=""><figcaption></figcaption></figure>

1. In **Product Banner Settings > Position**, choose whether the product banner appears inside or outside the video or product image area.
2. In **Product Banner Settings > Banner Layout**, choose the Standard or Card Type product banner design. We recommend Card Type when you have three or more product banners.
3. In **Size & Shape > Player Corner Shape**, set how rounded the corners of the video or product image are, from square to several levels of rounding.
4. In **Size & Shape > Video Description Font Color**, set the color of the video description text shown in the widget.
5. In **Size & Shape > Max Width**, set the maximum total width of the Slide widget. Enter a value from 768px to 1440px.

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FCvZU3UlkyrrcRfXRRa83%2Fdesignsettings-5-en.png?alt=media" alt=""><figcaption></figcaption></figure>

6. Mobile settings for the Slide widget follow your PC settings automatically.\
   On mobile, however, the product banner always appears outside, whatever your PC setting.

### Spotlight widget

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FXW0hBQpUvJgNGbJ2Hfrj%2Fdesignsettings-6-en.png?alt=media" alt=""><figcaption></figcaption></figure>

1. In **Product Banner Settings > Layout**, choose the List or Slide product banner design.
2. In **Size & Shape > Corner Shape**, set how rounded the corners of the video or product image are, from square to several levels of rounding.
3. In **Size & Shape > Slide Button Position**, place the previous/next buttons on the sides or at the bottom.
   1. For the widget to display correctly, make sure the area where you insert it is at least 640px tall with side buttons, or 704px tall with bottom buttons.
4. In **Size & Shape > Max Width**, set the maximum total width of the widget. Enter a value from 768px to 2184px.
5. Select **Full Width** to make the widget expand to the screen width automatically, whatever the Max Width setting.

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FDXK9OoDmn4WW9RH4NY3n%2Fdesignsettings-7-en.png?alt=media" alt=""><figcaption></figcaption></figure>

6. Mobile settings for the widget follow your PC settings automatically.

### Hero Banner widget (main page top banner)

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2F2XteRhkyQ8gu5pBE6GyY%2Fdesignsettings-8-en.png?alt=media" alt=""><figcaption></figcaption></figure>

1. In **Size & Shape > PC height**, choose a banner aspect ratio of 21:9, 16:9, or full screen, or enter a height from 400px to 1080px.
2. In **Video display > PC vertical focus**, choose which part of the video to show when it's larger than the banner area: Top, Center, or Bottom.
3. In **Video display > Transition effect**, choose how the widget moves to the next banner when there are several: Slide or Fade. Slide moves the banners sideways.
4. In **Show Button > PC display**, choose when control buttons such as play/pause and sound appear: On hover or Always. On mobile, buttons are always visible.
5. In **Show Button > Play / Pause**, show or hide the button that pauses and resumes the video.
6. In **Show Button > Sound**, show or hide the mute/unmute button.
7. In **Show Button > Indicator**, show or hide the marker that tells visitors which banner they're on. When it's on, choose Dots or Numbers.
8. In **Show Button > Prev / Next buttons**, show or hide the arrow buttons for moving between banners manually. When they're on, place them at the Bottom center or on Both sides. Visitors can still swipe or drag between banners when the buttons are off.

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FAAMGhiqUxbVqLTDGrFSY%2Fdesignsettings-9-en.png?alt=media" alt=""><figcaption></figcaption></figure>

9. In **Display Template > Mobile View tab**, set separate mobile media and design settings that apply at screen widths of 1024px and below.
10. In **Size & Shape > Mobile height**, choose a banner aspect ratio of 4:3, 3:4, or full screen, or enter a custom height.
11. In **Video display > Mobile vertical focus**, choose which part of the video to show when it's larger than the banner area: Top, Center, or Bottom.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://support.charlla.io/en/userguide/widget/designsettings.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.