Home

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:


_10
element-name:action:classes-to-modify

You can combine multiple instructions by separating them with semicolons:


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

Available Actions

add

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


_10
memberr-button:add:button button--primary

replace

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


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

remove

Remove specific styles that might conflict with your theme.


_10
memberr-section:remove:memberr-section

Common Examples

Matching Theme Buttons


_10
// Match primary button style
_10
memberr-button:replace:default-button>button button--primary
_10
_10
// Match secondary button style
_10
memberr-cancel-button:add:button button--secondary

Matching Theme Layout


_10
// Use theme's standard section width
_10
memberr-section:add:page-width
_10
_10
// Match theme's section spacing
_10
memberr-wrapper:add:section-spacing section-padding

Matching Theme Typography


_10
// Match heading styles
_10
memberr-title:replace:default-title>heading heading--large
_10
_10
// Match text styles
_10
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.