VizupCommerce

Customize Banner Video Content with CSS

How to customize the title, caption, and CTA button appearance in your banner video widget using custom CSS.

Available CSS Classes

The banner video widget provides specific CSS classes that you can target for customization:

Container Classes

  • .vizup-banner-content-overlay - The main overlay container that holds all custom content

Content Element Classes

  • .vizup-banner-custom-title - The custom title heading element
  • .vizup-banner-custom-caption - The custom caption paragraph element
  • .vizup-banner-cta-button - The call-to-action button/link element

CSS Customization Examples

Customizing the Title

/* Make title larger and centered */
.vizup-banner-custom-title {
    font-size: 24px !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}

/* Add a background to the title */
.vizup-banner-custom-title {
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

Customizing the Caption

/* Style the caption text */
.vizup-banner-custom-caption {
    font-style: italic;
    opacity: 0.9;
    font-size: 14px !important;
    line-height: 1.4;
    text-align: center;
}

Customizing the CTA Button

/* Enhanced CTA button styling */
.vizup-banner-cta-button {
    border: 2px solid white !important;
    border-radius: 25px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

Customizing the Overlay Container

/* Adjust the overall positioning and spacing */
.vizup-banner-content-overlay {
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    padding: 20px !important;
}

How to Apply Custom CSS

For detailed instructions on where and how to add custom CSS, please refer to our How to add custom CSS guide.

Quick Summary:

  1. Using Vizup App (Recommended): Add the CSS in the Advanced Settings page within the Vizup app - Open Advanced Settings
  2. In Shopify Theme Editor: Go to your theme customization and add the CSS to your theme’s custom CSS section
  3. Via Theme Files: Add the CSS to your assets/application.css or similar stylesheet file

Important Notes

  • Always use !important when necessary to override default styles
  • Test your customizations on different devices and screen sizes
  • The brand colors from your settings (brand_primary_color and brand_secondary_color) will still apply to the CTA button background and text color respectively
  • Custom CSS will take precedence over the default styling while maintaining the dynamic brand colors

Need Help?

If you need assistance with custom CSS or have specific design requirements, please contact our support team.

← Back to All Tutorials