Common Issues and Solutions

Solutions to frequently encountered problems with the Elle theme.

Images

Images Look Blurry

Cause: Image resolution is too low for the display size.

Solution:

1. Upload higher resolution images (minimum 1000px width)
2. For hero images, use 2400px width
3. Product images should be at least 1000x1000px

Images Are Cropped Incorrectly

Cause: Image aspect ratio doesn't match the section's ratio setting.

Solution:

1. Check the section's image ratio setting
2. Upload images that match the expected ratio
3. Or change the section to "Adapt" ratio to use original proportions

Product Images Not Showing Hover Effect

Cause: Secondary image on hover is disabled or product lacks second image.

Solution:

1. Go to Theme settings > Products
2. Enable Secondary image
3. Ensure products have at least 2 images uploaded

Layout

Sections Look Different Than Expected

Cause: Color scheme or settings may have changed.

Solution:

1. Click the section in the editor
2. Review all settings, especially Color scheme
3. Check Theme settings for global changes

Content Is Too Wide or Too Narrow

Cause: Page width settings need adjustment.

Solution:

1. Go to Theme settings > Layout
2. Adjust Max page width
3. Consider adjusting Page margins

Mobile Layout Issues

Cause: Desktop settings don't always translate to mobile.

Solution:

1. Preview on mobile in the editor
2. Check mobile-specific settings (mobile columns, mobile image position)
3. Test on actual mobile device

Typography

Fonts Not Loading

Cause: Font files may not be loading properly.

Solution:

1. Go to Theme settings > Typography
2. Re-select your fonts
3. Save and refresh the page
4. Clear browser cache

Text Is Too Small or Large

Cause: Base font size setting.

Solution:

1. Go to Theme settings > Typography
2. Adjust Base size (14-18px range)
3. All text scales proportionally

Navigation

Menu Items Not Showing

Cause: Menu may not be selected or may be empty.

Solution:

1. Go to Online Store > Navigation
2. Verify your menu exists and has items
3. In the header settings, ensure the correct menu is selected

Dropdown Menu Not Working

Cause: Menu structure or JavaScript issue.

Solution:

1. Check menu has nested items (submenu)
2. Clear browser cache
3. Disable browser extensions and test
4. Check for JavaScript errors in browser console

Mobile Menu Won't Open

Cause: JavaScript not loading or conflict.

Solution:

1. Clear browser cache
2. Try incognito/private browsing mode
3. Check for theme app conflicts

Cart

Cart Drawer Not Opening

Cause: Cart type setting or JavaScript issue.

Solution:

1. Go to Theme settings > Cart
2. Verify Cart type is set to "Drawer"
3. Clear browser cache

Products Not Adding to Cart

Cause: JavaScript error or inventory issue.

Solution:

1. Check product has inventory (if tracking is enabled)
2. Verify product is not archived or draft
3. Clear browser cache
4. Check browser console for errors

Search

Search Not Showing Results

Cause: Predictive search may be disabled.

Solution:

1. Go to Theme settings > Search
2. Enable Predictive search
3. Ensure Show products is enabled

Search Results Missing Products

Cause: Product may not match search terms.

Solution:

1. Verify product title, description, and tags include searchable terms
2. Products must be active and in Online Store sales channel
3. Check search settings for product limit

Colors

Colors Not Changing

Cause: Wrong color scheme selected or caching.

Solution:

1. Check which color scheme is applied to the section
2. Verify color changes in Theme settings > Colors
3. Clear browser cache and refresh

Text Hard to Read

Cause: Insufficient contrast between text and background.

Solution:

1. Go to Theme settings > Colors
2. Increase contrast between text and background colors
3. Aim for WCAG AA compliance (4.5:1 ratio)

Animations

Animations Not Playing

Cause: Animations may be disabled or system prefers reduced motion.

Solution:

1. Go to Theme settings > Animations
2. Ensure Enable animations is checked
3. User's system may have reduced motion preference

Animations Feel Slow or Fast

Cause: Animation style setting.

Solution:

1. Go to Theme settings > Animations
2. Try different animation styles (Subtle, Elegant, Dramatic)

Performance

Pages Loading Slowly

Cause: Large images or many sections.

Solution:

1. Optimize images before uploading (compress, resize)
2. Reduce number of products displayed per section
3. Remove unused sections
4. Use lazy loading (enabled by default)

Shopify Speed Score Low

Cause: Multiple factors affect speed score.

Solution:

1. Optimize all images
2. Limit number of apps installed
3. Remove unused sections and code
4. Use fewer video backgrounds

Getting Help

If you can't resolve an issue:

1. Take a screenshot of the problem
2. Note the steps to reproduce it
3. Check your browser console for errors
4. Contact support with these details