Customizing Theme Extension Styles

The Custom Classes feature allows you to align the styling of theme extensions with your store's theme. You can ensure buttons, text, and layouts match your theme's design by adding, replacing, or removing style classes.

Using Custom Classes

In the theme editor, you'll find a "Custom CSS Classes" setting for customizable elements. This setting lets you modify the styling of specific elements to match your theme's appearance.

Syntax Guide

Each instruction follows this format:

element-name:action:classes-to-modify

You can combine multiple instructions by separating them with semicolons:

element-name:action:classes;another-element:action:classes

Available Actions

add

Add your theme's classes to an element while keeping its basic functionality.

memberr-button:add:button button--primary

replace

Replace an extension's default style with your theme's equivalent style.

memberr-button:replace:default-button>button--secondary

remove

Remove specific styles that might conflict with your theme.

memberr-section:remove:memberr-section

Common Examples

Matching Theme Buttons

// Match primary button style
memberr-button:replace:default-button>button button--primary

// Match secondary button style
memberr-cancel-button:add:button button--secondary

Matching Theme Layout

// Use theme's standard section width
memberr-section:add:page-width

// Match theme's section spacing
memberr-wrapper:add:section-spacing section-padding

Matching Theme Typography

// Match heading styles
memberr-title:replace:default-title>heading heading--large

// Match text styles
memberr-description:add:rte rte--large

Best Practices

1. Start with Theme Defaults

   • Look for existing theme classes in your theme's style guide
   • Use your theme's standard button and text classes
   • Match your theme's spacing and layout patterns

2. Keep It Consistent

   • Use the same classes your theme uses for similar elements
   • Maintain consistent spacing and alignment
   • Follow your theme's responsive design patterns

3. Test Thoroughly

   • Preview changes across different pages
   • Check alignment with surrounding elements
   • Verify changes match your theme's responsive behavior

Troubleshooting

If your custom classes aren't working as expected:

1. Check Your Theme Classes

   • Verify the class names exist in your theme
   • Ensure you're using the correct theme class names
   • Check if the theme class does what you expect

2. Common Issues

   • Styles not matching: Make sure you're using the right theme class
   • Layout issues: Check your theme's layout classes
   • Spacing problems: Use your theme's spacing classes

Available Elements

Each theme extension's documentation includes a list of customizable elements and their default styles. Refer to the specific extension's documentation to see which elements you can customize to match your theme.