How to Add Custom CSS to Oh! Product Video Float Banner

This guide shows how to add your own custom CSS to the Oh! Product Video Float Banner app. You can adjust the video size, position, colors, borders, and other styles to better match your store’s design. Follow the steps to apply CSS directly in the app settings—no need to edit your theme code.

• Step 1: Log in to your Shopify admin

• Step 2: In the left-hand sidebar, click Online Store, then select Themes.

• Step 3: Find the theme you’re using and click the “Customize” button.

• Step 4: In the left sidebar, click Theme Settings, then locate the Custom CSS section.
  
• Step 5: Find the app elements using your Browser Developer Tools
  On your browser, open your store and right-click on the element you want to style and click “Inspect” (or press Ctrl+Shift+I / Cmd+Option+I on your keyboard). This will open your browser’s developer tools and highlight the element in the code. Copy the class, ID, or HTML structure you want to target with CSS.

• Step 6: Return to the theme editor tab, paste the selector you found, and write your custom CSS rules.
  
  

For example, if you want the Video Banner to be bigger or smaller on Desktop view.

• Step 7: Click Save, then refresh your storefront to see your custom styles applied.

Troubleshooting Tips

• App Widget Not Showing?
  Double-check that the toggle is set to "On" and that you’ve saved your changes. If it’s still not appearing, ensure your theme supports app embeds (most modern Shopify themes do!).
  
  
• Need Additional Help?
  If you have inquiries, please do not hesitate to reach out to us via our email at [email protected] or via chat.