Auto-sync with brand color

What is Auto-sync Brand Theme?

Auto-sync Brand Theme is a feature that automatically pulls your store's branding elements from Shopify and applies them to your return portal, eliminating the need for manual customization.

• Automatic synchronization: One-click branding update
• Consistent experience: Return portal matches your store
• No manual configuration: Pulls directly from Shopify settings
• Real-time preview: See changes before applying
• Easy updates: Re-sync whenever you update your store branding
• Professional appearance: Maintains brand consistency across all touchpoints

Elements Synchronized from Your Store

When you enable Auto-sync, the following branding elements are automatically synchronized from your Shopify store to your return portal:

1. 1Theme Color:
2. 2Main accent/background color from your store theme
3. 3Used for buttons, headers, and accent elements
4. 4Creates visual consistency with your store
5. 5
6. 6Text Color:
7. 7Primary text color for titles and content
8. 8Ensures readability and brand alignment
9. 9Matches your store's typography style
10. 10
11. 11Logo:
12. 12Your store's brand logo from Shopify settings
13. 13Displayed at the top of the return portal
14. 14Reinforces brand recognition
15. 15
16. 16Return Policy URL:
17. 17Automatically linked from your Shopify store settings
18. 18Provides easy access to your return policy
19. 19Keeps policy information up-to-date

Benefits of Auto-sync

Using Auto-sync provides several important advantages for your business and customers.

• Time Savings: No manual color picking or logo uploading required
• Brand Consistency: Return portal perfectly matches your store
• Professional Appearance: Cohesive brand experience across all pages
• Easy Updates: Rebrand your store, then re-sync with one click
• Error Prevention: No risk of mismatched colors or wrong logos
• Customer Trust: Familiar branding reassures customers
• Seamless Experience: Customers stay in your branded environment
• Reduced Setup Time: Get professional results in seconds

Step 1: Access Return Page Settings

Navigate to the return portal customization settings in your Returndotai admin.

1. 1Log in to your Returndotai admin dashboard
2. 2Go to Customization or Settings section
3. 3Find "Return Page" or "Return Portal" settings
4. 4Look for branding or theme customization options

Step 2: Click "Sync with Brand Color"

Initiate the automatic synchronization process with a single click.

1. 1Locate the "Sync with brand color" button
2. 2Click the button to start synchronization
3. 3System connects to your Shopify store
4. 4Branding elements are pulled from Shopify settings
5. 5Return portal preview updates automatically
6. 6Process typically takes just a few seconds

Step 3: Review the Preview

The Return Portal will update its preview using your store's branding. Review the preview to make sure everything looks correct.

1. 1Preview automatically displays after sync
2. 2Review the updated branding elements:
3. 3Check theme color on buttons and headers
4. 4Verify text color is readable
5. 5Confirm logo appears correctly
6. 6Check logo size and positioning
7. 7Ensure colors work well together
8. 8Test on different backgrounds
9. 9
10. 10Look for potential issues:
11. 11Logo too large or too small
12. 12Text color hard to read on background
13. 13Colors clashing or too similar
14. 14Missing elements
15. 15
16. 16If something doesn't look right:
17. 17Check your Shopify branding settings
18. 18Update branding in Shopify if needed
19. 19Re-sync after making Shopify changes
20. 20Contact support if issues persist

Step 4: Save Changes

Once you're satisfied with the preview, save the changes to apply the synchronized branding to your live return portal.

1. 1Review the preview one final time
2. 2Ensure all elements look correct
3. 3Click the "Save" button
4. 4Changes are applied to live return portal
5. 5Confirmation message appears
6. 6Branding is now active for all customers
7. 7
8. 8Verify on live portal:
9. 9Open your return portal in a new tab
10. 10Check that branding appears correctly
11. 11Test on different devices (desktop, mobile)
12. 12Clear cache if old branding still shows

Shopify Store Branding Must Be Configured

To use this feature, your Shopify store must have branding assets set up in your Shopify admin. Without configured branding, there will be no elements to sync.

1. 1Required Shopify branding elements:
2. 2Theme colors (primary, accent, background)
3. 3Logo image uploaded
4. 4Text/font colors configured
5. 5Return policy URL (optional but recommended)
6. 6
7. 7Check if branding is configured:
8. 8Log in to Shopify admin
9. 9Go to Settings > General
10. 10Scroll to "Brand" or "Store details" section
11. 11Verify logo and colors are set
12. 12
13. 13If branding is missing or incomplete:
14. 14Follow setup instructions below
15. 15Configure all branding elements
16. 16Return to Returndotai to sync

How to Set Up Shopify Branding

If you haven't configured branding yet, follow these steps to add your store's branding in Shopify.

1. 11. Access Shopify Branding Settings
2. 2Go to: https://admin.shopify.com/settings/general/branding
3. 3Or: Shopify admin > Settings > General > scroll to "Brand"
4. 4
5. 52. Upload Your Logo
6. 6Click "Add logo" or "Upload logo"
7. 7Select your logo image file
8. 8Recommended: Square logo, minimum 512x512 pixels
9. 9Format: PNG with transparent background preferred
10. 10Click "Save"
11. 11
12. 123. Set Brand Colors
13. 13Click "Edit" next to colors
14. 14Set primary color (main brand color)
15. 15Set accent color (buttons, highlights)
16. 16Set background color
17. 17Set text color
18. 18Save color settings
19. 19
20. 204. Configure Store Details
21. 21Enter store name
22. 22Add store description
23. 23Set contact email
24. 24Add return policy URL (if available)
25. 25
26. 265. Save All Changes
27. 27Review all branding elements
28. 28Click "Save" at the bottom
29. 29Return to Returndotai to sync

Quick Link to Shopify Branding

For your convenience, you can access Shopify branding settings directly using this link:

• Direct link: https://admin.shopify.com/settings/general/branding
• This link will take you directly to the branding section where you can:
• Upload your logo
• Set your brand colors
• Configure store details
• Add return policy URL
• After configuring branding in Shopify, return to Returndotai and click "Sync with brand color" to apply the branding to your return portal.

Choosing Effective Brand Colors

Select colors that work well across different contexts and ensure good user experience.

• Primary Color (Theme Color):
• Should represent your brand identity
• Used for buttons, headers, accents
• Choose a color that stands out but isn't overwhelming
• Test on both light and dark backgrounds
• Text Color:
• Must be readable against backgrounds
• High contrast is essential
• Dark gray often better than pure black
• Test with your theme color
• Color Combinations to Avoid:
• Red text on green background (accessibility issue)
• Low contrast combinations (hard to read)
• Too many bright colors (overwhelming)
• Similar shades that don't differentiate
• Accessibility Considerations:
• WCAG AA standard: 4.5:1 contrast ratio for text
• WCAG AAA standard: 7:1 contrast ratio
• Test with color blindness simulators
• Ensure buttons are identifiable without color alone

Logo Upload Guidelines

Follow these best practices for logo uploads to ensure optimal display.

• Recommended Logo Specifications:
• Format: PNG (preferred for transparency)
• Size: Minimum 512x512 pixels
• Aspect ratio: Square (1:1) or horizontal (2:1 or 3:1)
• Background: Transparent preferred
• File size: Under 500KB
• Logo Types:
• Full logo: Company name + icon
• Logo mark: Icon only (for small spaces)
• Wordmark: Text-based logo
• Best Practices:
• Use high-resolution images
• Ensure logo is clearly visible when small
• Test on both light and dark backgrounds
• Use vector format if possible (convert to PNG)
• Keep logo simple and recognizable

Maintaining Brand Consistency

Use exact same colors across all platforms

• Keep logo consistent (don't use different versions)
• Match fonts if possible (may require custom CSS)
• Align button styles with your store
• Use same imagery and photography style
• Maintain consistent tone in copy
• Re-sync whenever you update store branding
• Test return portal alongside main store
• Get feedback from team on consistency

Sync Button Not Working or No Changes Appear

If clicking "Sync with brand color" doesn't update the return portal preview, try these solutions.

1. 1Check Shopify branding is configured:
2. 2Visit https://admin.shopify.com/settings/general/branding
3. 3Verify logo and colors are set
4. 4Ensure changes were saved
5. 5
6. 6Verify Shopify connection:
7. 7Ensure Returndotai app is connected to Shopify
8. 8Check app permissions are up to date
9. 9Reconnect app if needed
10. 10
11. 11Try again:
12. 12Refresh the page
13. 13Click "Sync with brand color" again
14. 14Wait a few moments for sync to complete
15. 15
16. 16Clear cache:
17. 17Clear your browser cache
18. 18Try in incognito/private mode
19. 19Use different browser
20. 20
21. 21Contact support if:
22. 22Issue persists after trying above steps
23. 23Error message appears
24. 24Partial sync (some elements missing)

Colors Don't Match My Store

If the synced colors don't match your store's appearance, the issue is likely with Shopify branding settings.

1. 1Understand the source:
2. 2Auto-sync pulls from Shopify branding settings
3. 3NOT from your theme CSS
4. 4Shopify branding may differ from theme
5. 5
6. 6Update Shopify branding:
7. 7Go to Shopify Settings > General > Brand
8. 8Update colors to match your current theme
9. 9Use color picker or hex codes
10. 10Save changes in Shopify
11. 11
12. 12Re-sync in Returndotai:
13. 13Return to Returndotai settings
14. 14Click "Sync with brand color" again
15. 15Review updated preview
16. 16Save if correct
17. 17
18. 18Alternative: Manual customization:
19. 19If auto-sync doesn't work for your needs
20. 20Use manual color picker in Returndotai
21. 21Upload logo manually
22. 22Configure each element individually

Logo Not Appearing or Looks Wrong

Common logo display issues and how to resolve them.

1. 1Logo not appearing:
2. 2Check logo is uploaded in Shopify branding
3. 3Verify file format is supported (PNG, JPG, SVG)
4. 4Ensure file isn't corrupted
5. 5Re-upload logo in Shopify
6. 6Re-sync in Returndotai
7. 7
8. 8Logo too large or too small:
9. 9Adjust logo size in Returndotai settings
10. 10Upload different resolution in Shopify
11. 11Use manual logo upload for more control
12. 12
13. 13Logo has wrong background:
14. 14Re-upload with transparent background (PNG)
15. 15Remove white/colored background in image editor
16. 16Save as PNG format
17. 17
18. 18Logo pixelated or blurry:
19. 19Upload higher resolution image
20. 20Minimum 512x512 pixels recommended
21. 21Use vector format (SVG) if possible
22. 22Avoid upscaling small logos

Preview Looks Good But Live Portal Doesn't Match

If the preview shows correct branding but the live portal doesn't, caching may be the issue.

1. 1Clear browser cache:
2. 2Your browser may be showing old version
3. 3Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
4. 4Clear all cached images and files
5. 5
6. 6Wait for propagation:
7. 7Changes may take 5-15 minutes to appear
8. 8CDN cache may need to clear
9. 9Try again after waiting
10. 10
11. 11Try different browser or device:
12. 12Use browser you haven't visited portal with
13. 13Try mobile device
14. 14Use incognito/private mode
15. 15
16. 16Verify save was successful:
17. 17Return to settings
18. 18Check that branding is saved
19. 19Re-save if necessary
20. 20
21. 21Contact support:
22. 22If issue persists after 30 minutes
23. 23Provide screenshots of preview vs. live
24. 24Include your store URL

Re-sync After Rebranding

Update Shopify branding first, then re-sync Returndotai

• Don't forget to sync return portal when you rebrand
• Test return portal after any store theme changes
• Keep branding consistent across all customer touchpoints
• Schedule periodic reviews of branding consistency

Test Across Devices and Browsers

Test on desktop browsers (Chrome, Firefox, Safari, Edge)

• Test on mobile devices (iOS and Android)
• Test on tablets
• Check both light and dark mode (if applicable)
• Verify readability at different screen sizes
• Ensure buttons and links are clearly visible
• Test with different backgrounds

Gather Customer Feedback

Ask customers if return portal feels "on-brand"

• Monitor for confusion or trust issues
• Check if customers can easily identify it's your store
• Adjust branding if customers report issues
• A/B test different color combinations if possible
• Use analytics to track completion rates
• Professional branding should increase trust and conversions

When to Use Manual Customization Instead

While auto-sync provides quick setup, there are scenarios where manual customization may be more appropriate:

• Consider manual customization if:
• Auto-sync doesn't match your exact needs
• You want different branding for return portal
• Shopify branding is outdated or incomplete
• You need more granular control
• Special seasonal or promotional branding needed
• You can always:
• Start with auto-sync for quick setup
• Then manually adjust specific elements
• Override auto-sync with manual colors
• Upload custom logo separately