Advanced: Custom Section Templates

Every Eevy AI section is styled using CSS custom properties (variables). This means you can override any visual aspect without touching the section's internal code. The variable naming convention follows a predictable pattern: --eevy-[section]-[property]. For example: --eevy-review-card-bg, --eevy-review-card-border-radius, --eevy-review-star-color. You can view all available variables for a section by inspecting it in your browser's developer tools — they are all declared on the section's root element.

The simplest way to customize sections is through the Eevy AI settings in the Shopify theme editor. Navigate to your theme > Customize > App Embeds > Eevy AI, and you will see customization options: card background color, text colors, star rating color, border radius, font size adjustments, spacing between cards, and arrow/navigation styles. These settings map directly to CSS variables and apply across all sections of the same type. Changes preview in real-time.

For customizations beyond what the theme editor offers, you can add custom CSS in your theme's stylesheet or in a dedicated custom CSS block. Target Eevy AI sections using their root IDs: #eevy-review-slider, #eevy-review-carousel, #eevy-review-grid, etc. Example: to add a subtle shadow to review cards in the slider, use #eevy-review-slider .eevy-review-card { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }. Always scope your CSS to the specific section ID to avoid affecting other sections on the same page.

Eevy AI sections inherit the font-family from your theme by default. If your theme uses a custom font that is not inherited (for example, loaded via JavaScript), you may need to explicitly set the font in your CSS overrides: #eevy-review-slider { font-family: "Your Custom Font", sans-serif; }. Font sizes, weights, and line heights can be adjusted via CSS variables: --eevy-review-body-font-size, --eevy-review-body-font-weight, --eevy-review-heading-font-size.

Eevy AI sections are responsive by default, but you can fine-tune breakpoints with media queries. For example, to show 4 columns on large screens and 2 on tablets for a review grid: @media (min-width: 1024px) { #eevy-review-grid { --eevy-grid-columns: 4; } } @media (max-width: 1023px) { #eevy-review-grid { --eevy-grid-columns: 2; } }. Test responsive customizations on real devices — browser emulators do not always match actual mobile rendering.

Keep in mind that heavy CSS overrides can interfere with the genetic algorithm's variant testing. If you override a property that the algorithm also varies (for example, fixing the number of visible cards), the algorithm cannot test that dimension. The best practice is to use CSS overrides for brand-level styling (colors, fonts, borders) and let the algorithm control layout-level parameters (card count, spacing, sort order). If you need to fix a specific layout parameter, you can lock it in the section settings rather than via CSS.