If Product Options doesn’t look right on your store—wrong colors, sizes, or layout—there are usually theme CSS conflicts or configuration issues causing the problem.

Theme CSS Conflicts

Your theme’s CSS may override the app’s default styling:

Inspect the element - Right-click on the option and select “Inspect” to see which styles apply.
Identify conflicting rules - Look for theme styles that override the app’s styles.
Add custom CSS - Use the app’s Custom CSS feature to override theme conflicts with more specific selectors.

Example fix for input styling:

.product-form .product-options-select {
  border: 1px solid #cccccc;
  background-color: #ffffff;
}

Option Sizing Issues

If options appear too large or small:

Check container width - The app inherits the parent container’s width. Ensure the product form section has appropriate sizing.

Adjust with CSS - Set explicit widths if needed:

.product-options-container {
  max-width: 400px;
}

Swatch Appearance

If swatches don’t display correctly:

Image size - Upload square images (100x100px recommended) for consistent display.
Color swatches - Ensure color values are valid hex codes (#FF0000) or color names.

Selected state - Add CSS for clearer selection indication:

.product-options-swatch.selected {
  border: 2px solid #000000;
  transform: scale(1.1);
}

Mobile Display

If options look wrong on mobile:

Test responsive behavior - Use browser dev tools to test different screen sizes.

Add mobile-specific CSS:

@media (max-width: 768px) {
  .product-options-container {
 width: 100%;
  }
  .product-options-swatch {
 width: 32px;
 height: 32px;
  }
}

Form Layout Issues

If options don’t align with other form elements:

Check block position - In theme editor, drag the Product Options block to align with other elements.

Match theme spacing - Add margin/padding to match your theme:

.product-options-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

Font Styling

If fonts don’t match your theme:

.product-options-label,
.product-options-select,
.product-options-input {
  font-family: inherit;
  font-size: 14px;
}

Using inherit picks up your theme’s font settings automatically.

Getting Started: Quick Setup Guide

Custom CSS

Display & Styling Problems

Custom Css