Theme conflicts

Sometimes Clyro edits can conflict with theme code or Shopify apps. Here's how to identify and resolve these issues.

What Causes Theme Conflicts?

Conflicts can occur when:

• •Multiple CSS rules target the same element
• •A Shopify app overrides theme styles
• •Theme updates overwrite previous edits
• •JavaScript conflicts between Clyro code and existing scripts
• •Specificity issues where original theme CSS takes precedence

Identifying Conflicts

Signs of a Conflict

• •Edit appears in preview but not on live store
• •Style changes work on some pages but not others
• •Changes are partially applied (e.g., color changes but not size)
• •Elements flicker or change on page load
• •Edit works, then suddenly stops working

Using Browser Developer Tools

1. 1.Right-click the element you edited
2. 2.Select "Inspect" or "Inspect Element"
3. 3.Look at the Styles panel on the right
4. 4.Check for crossed-out (overridden) styles
5. 5.See which CSS file is taking precedence

Common Conflict Types

1. App Conflicts

Many Shopify apps inject their own CSS and JavaScript:

• •Review apps: May control product review sections
• •Popup/modal apps: Often have their own styling
• •Slider apps: May override carousel styles
• •Cart apps: Can affect cart drawer appearance

2. Theme Update Conflicts

When your theme updates, it can overwrite Clyro edits:

• •Clyro edits are saved in theme files
• •Theme updates may replace modified files
• •This is especially common with auto-updating themes

3. CSS Specificity Conflicts

CSS specificity determines which styles win when multiple rules apply:

• •More specific selectors override less specific ones
• •Inline styles override stylesheet rules
• •Later rules override earlier ones (if same specificity)

4. JavaScript Conflicts

Dynamic elements controlled by JavaScript can be tricky:

• •JavaScript might reset styles after page load
• •Interactive elements may have multiple states
• •AJAX-loaded content might not include Clyro styles

Resolving Conflicts

Method 1: Ask Clyro to Override

Use specific language in your prompt:

Method 2: Disable Conflicting App Temporarily

1. 1.Go to Shopify admin then Apps
2. 2.Disable the suspected conflicting app
3. 3.Check if your Clyro edit now works
4. 4.Re-enable the app
5. 5.If conflict confirmed, contact app developer or ask Clyro to work around it

Method 3: Use More Specific Selectors

Ask Clyro to target elements more specifically:

Method 4: Rollback and Retry

1. 1.Rollback to before the conflict appeared
2. 2.Apply edits in a different order
3. 3.Make smaller, more targeted changes

Preventing Future Conflicts

• •Create checkpoints before major changes
• •Test edits on multiple pages before applying
• •Review preview carefully, including scroll behavior and interactions
• •After theme updates, check your important customizations
• •Document significant changes so they can be re-applied if needed