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. 2 • Main accent/background color from your store theme
3. 3 • Used for buttons, headers, and accent elements
4. 4 • Creates visual consistency with your store
5. 5
6. 6Text Color:
7. 7 • Primary text color for titles and content
8. 8 • Ensures readability and brand alignment
9. 9 • Matches your store's typography style
10. 10
11. 11Logo:
12. 12 • Your store's brand logo from Shopify settings
13. 13 • Displayed at the top of the return portal
14. 14 • Reinforces brand recognition
15. 15
16. 16Return Policy URL:
17. 17 • Automatically linked from your Shopify store settings
18. 18 • Provides easy access to your return policy
19. 19 • Keeps 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. 3 • Check theme color on buttons and headers
4. 4 • Verify text color is readable
5. 5 • Confirm logo appears correctly
6. 6 • Check logo size and positioning
7. 7 • Ensure colors work well together
8. 8 • Test on different backgrounds
9. 9
10. 10Look for potential issues:
11. 11 • Logo too large or too small
12. 12 • Text color hard to read on background
13. 13 • Colors clashing or too similar
14. 14 • Missing elements
15. 15
16. 16If something doesn't look right:
17. 17 • Check your Shopify branding settings
18. 18 • Update branding in Shopify if needed
19. 19 • Re-sync after making Shopify changes
20. 20 • Contact 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. 9 • Open your return portal in a new tab
10. 10 • Check that branding appears correctly
11. 11 • Test on different devices (desktop, mobile)
12. 12 • Clear 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. 2 • Theme colors (primary, accent, background)
3. 3 • Logo image uploaded
4. 4 • Text/font colors configured
5. 5 • Return policy URL (optional but recommended)
6. 6
7. 7Check if branding is configured:
8. 8 • Log in to Shopify admin
9. 9 • Go to Settings > General
10. 10 • Scroll to "Brand" or "Store details" section
11. 11 • Verify logo and colors are set
12. 12
13. 13If branding is missing or incomplete:
14. 14 • Follow setup instructions below
15. 15 • Configure all branding elements
16. 16 • Return 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. 2 • Go to: https://admin.shopify.com/settings/general/branding
3. 3 • Or: Shopify admin > Settings > General > scroll to "Brand"
4. 4
5. 52. Upload Your Logo
6. 6 • Click "Add logo" or "Upload logo"
7. 7 • Select your logo image file
8. 8 • Recommended: Square logo, minimum 512x512 pixels
9. 9 • Format: PNG with transparent background preferred
10. 10 • Click "Save"
11. 11
12. 123. Set Brand Colors
13. 13 • Click "Edit" next to colors
14. 14 • Set primary color (main brand color)
15. 15 • Set accent color (buttons, highlights)
16. 16 • Set background color
17. 17 • Set text color
18. 18 • Save color settings
19. 19
20. 204. Configure Store Details
21. 21 • Enter store name
22. 22 • Add store description
23. 23 • Set contact email
24. 24 • Add return policy URL (if available)
25. 25
26. 265. Save All Changes
27. 27 • Review all branding elements
28. 28 • Click "Save" at the bottom
29. 29 • Return 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. 2 • Visit https://admin.shopify.com/settings/general/branding
3. 3 • Verify logo and colors are set
4. 4 • Ensure changes were saved
5. 5
6. 6Verify Shopify connection:
7. 7 • Ensure Returndotai app is connected to Shopify
8. 8 • Check app permissions are up to date
9. 9 • Reconnect app if needed
10. 10
11. 11Try again:
12. 12 • Refresh the page
13. 13 • Click "Sync with brand color" again
14. 14 • Wait a few moments for sync to complete
15. 15
16. 16Clear cache:
17. 17 • Clear your browser cache
18. 18 • Try in incognito/private mode
19. 19 • Use different browser
20. 20
21. 21Contact support if:
22. 22 • Issue persists after trying above steps
23. 23 • Error message appears
24. 24 • Partial 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. 2 • Auto-sync pulls from Shopify branding settings
3. 3 • NOT from your theme CSS
4. 4 • Shopify branding may differ from theme
5. 5
6. 6Update Shopify branding:
7. 7 • Go to Shopify Settings > General > Brand
8. 8 • Update colors to match your current theme
9. 9 • Use color picker or hex codes
10. 10 • Save changes in Shopify
11. 11
12. 12Re-sync in Returndotai:
13. 13 • Return to Returndotai settings
14. 14 • Click "Sync with brand color" again
15. 15 • Review updated preview
16. 16 • Save if correct
17. 17
18. 18Alternative: Manual customization:
19. 19 • If auto-sync doesn't work for your needs
20. 20 • Use manual color picker in Returndotai
21. 21 • Upload logo manually
22. 22 • Configure each element individually

Logo Not Appearing or Looks Wrong

Common logo display issues and how to resolve them.

1. 1Logo not appearing:
2. 2 • Check logo is uploaded in Shopify branding
3. 3 • Verify file format is supported (PNG, JPG, SVG)
4. 4 • Ensure file isn't corrupted
5. 5 • Re-upload logo in Shopify
6. 6 • Re-sync in Returndotai
7. 7
8. 8Logo too large or too small:
9. 9 • Adjust logo size in Returndotai settings
10. 10 • Upload different resolution in Shopify
11. 11 • Use manual logo upload for more control
12. 12
13. 13Logo has wrong background:
14. 14 • Re-upload with transparent background (PNG)
15. 15 • Remove white/colored background in image editor
16. 16 • Save as PNG format
17. 17
18. 18Logo pixelated or blurry:
19. 19 • Upload higher resolution image
20. 20 • Minimum 512x512 pixels recommended
21. 21 • Use vector format (SVG) if possible
22. 22 • Avoid 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. 2 • Your browser may be showing old version
3. 3 • Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
4. 4 • Clear all cached images and files
5. 5
6. 6Wait for propagation:
7. 7 • Changes may take 5-15 minutes to appear
8. 8 • CDN cache may need to clear
9. 9 • Try again after waiting
10. 10
11. 11Try different browser or device:
12. 12 • Use browser you haven't visited portal with
13. 13 • Try mobile device
14. 14 • Use incognito/private mode
15. 15
16. 16Verify save was successful:
17. 17 • Return to settings
18. 18 • Check that branding is saved
19. 19 • Re-save if necessary
20. 20
21. 21Contact support:
22. 22 • If issue persists after 30 minutes
23. 23 • Provide screenshots of preview vs. live
24. 24 • Include 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