UX Customization

Web Ad Tag offers ample opportunities for UX customization.

You can customize Shopable Video ad unit style using the following CSS classes (DOM elements):

dio-ad-container | dio-video    | dio-product-card
dio-image        | dio-content  | dio-title
dio-product-name | dio-rating   | dio-reviews
dio-price        | dio-info     | dio-button

via !important in your web site style table
OR
you can sustomize Shopable Video ad unit layout and style using the following code structure:

{'class-name': {
   children: [ DOM element1, DOM element2 ], 
   style: ‘string of styles’, 
   className: ‘string of additional class names}} 

, where children, style, className are optional properties.

As an example, the default Shopable Video layout on the picture above can be presented by the following objects:

{'dio-ad-container': {
    children: [
        {'dio-video-wrapper': {
            children: [
                {'video': {}}
            ]
        }},
        {'dio-product-card': {
            children: [
                {'dio-image-wrapper': {
                    children: [
                        {'dio-image': {}}
                    ]
                }},
                {'dio-content': {
                    children: [
                        {'dio-title': {}},
                        {'dio-product-name': {}},
                        {'dio-rating-reviews-wrapper': {
                            children: [
                                {'dio-rating': {}},
                                {'dio-reviews': {}}
                            ]
                        }},
                        {'dio-price': {}},
                        {'dio-info': {}},
                        {'dio-button': {}}
                    ]
                }}
            ]
        }}
    ]
}}

To define if the ad tag is availbale on desktop as well as on mobile – define desktopAvailable parameter within the Config Script as TRUE (default FALSE).

Additionally you can choose between full width and non-fullwidth UX by setting up fullWidth parameter within the Config Script (boolean, default FALSE).

Still have Questions?

Contact Us