Theme Variable Integration – SearchGro Help Guide

Overview:

SearchGro seamlessly integrates with your Shopify theme by automatically fetching your theme's styling variables. This ensures that our search widget perfectly matches the look and feel of your store—no additional customization required.

How It Works

When you install the SearchGro app, we automatically:

1. Detect your theme’s design variables, such as:

• Colors (primary, secondary, background, text, etc.)
• Fonts (font family, size, weight)
• Border radius and spacing
• Button styles

2. Map these theme variables to our widget styling system.

3. Apply them to the SearchGro widget, making it look native to your store without manual configuration.

Benefits

• ✅ Consistent branding – Your search widget looks like it was built into your theme.
• 🕒 Time-saving – No need to manually style or adjust the widget.
• 🧩 Automatic updates – If you change your theme, we’ll re-sync the variables.

Advanced Customization (Optional)

If you want to further customize the widget’s appearance beyond your theme's variables, you can do so easily from the SearchGro app settings:

1. Go to SearchGro Dashboard > Search > Search widget/Search result page.
2. Override specific variables like colors, or layout styles.
3. Save the changes.

FAQs

Q: What if my theme uses custom naming for variables?

A: SearchGro is designed to intelligently detect standard Shopify theme variable structures. If something isn't syncing correctly, contact our support and we’ll help map it manually.

Q: Can I reset the widget styling to match my theme again after custom edits?

A: Yes. There’s a "Reset to Theme" button in the design settings to reapply the original theme variables.

Need Help?

If your SearchGro widget doesn’t reflect your theme correctly, or if you need assistance customizing styles, our support team is here to help. You can reach out anytime at support@simprosys.com