Shopify App Documentation

Everything you need to set up and customize currency conversion on your Shopify store

1 Installation

Install from Shopify App Store

Visit the Currency.Wiki app page on the Shopify App Store
Click 'Add app' and authorize the installation
The app will open and guide you through the setup wizard
Complete the setup wizard to start converting prices

Tip: The setup wizard takes about 2 minutes and guides you through each step.

2 Setup Wizard

The setup wizard helps you configure the app correctly. It guides you through updating your currency format and enabling the app embed.

Step 1: Welcome

Review what the setup process involves and click 'Let's Get Started'.

Step 2: Update Currency Format

Go to Shopify Admin → Settings → General → Store defaults. Find your currency and click the three dots menu → 'Change currency formatting'. Update the HTML fields with our wrapper class:

HTML with currency:

<span class="cwiki">${{amount}} USD</span>

HTML without currency:

<span class="cwiki">${{amount}}</span>

Important: The cwiki wrapper class is essential. It tells our app which elements on your page are prices, so we only convert actual prices and not phone numbers or order IDs.

Step 3: Enable App Embed

Enable the app in your theme's app embeds section:

Go to Online Store → Themes → Customize
Look for 'App embeds' in the left sidebar
Find 'Currency.Wiki App' and toggle it ON
Click Save in the theme editor

Step 4: Verify Setup

Click 'Scan My Store' to verify the setup is complete. The wizard will check for the cwiki wrapper class and app embed. If successful, you're ready to go!

3 Widget Styles

Choose from 6 widget styles to match your store design. Each style can be customized with your brand colors.

Minimal Dropdown

Compact header integration with a simple dropdown list. Best for top-right header placement.

Floating Pill

Mobile-friendly floating button with expandable panel. Great for mobile-first stores. Positions in corners.

Sidebar Drawer

Full-height slide-out panel with search functionality. Ideal for stores offering many currencies.

Modal Popup

Centered overlay with grid layout. Makes currency selection a focused experience.

Inline Tab Switcher

Horizontal tabs for popular currencies. Quick switching without opening menus.

Corner Badge

Minimalist corner icon that expands on click. Least intrusive for clean designs.

Tip: Use the Widget Settings page in your app admin to preview all styles with your store's colors.

4 Admin Dashboard

The admin dashboard gives you full control over how currency conversion works on your store.

Dashboard Home

Toggle the widget on/off, view conversion stats, and see a live preview of your widget.

Widget Settings

Choose your widget style, position, colors, size, border radius, and flag display options.

Currency Management

Enable/disable currencies, reorder the list, configure auto-detection behavior, and set exchange rate preferences.

Analytics

View conversion charts, see top currencies used, and understand your international customer distribution.

Theme & Appearance

Choose theme mode (auto, light, dark, custom), set colors, enable glassmorphism effects, and configure dark mode behavior.

Checkout Message

Enable a message on cart/checkout pages to inform customers about the checkout currency.

5 Advanced Settings

Advanced settings give Pro users more control over price formatting and conversion behavior.

Price Formatting (Pro)

Decimal Places - Control how many decimal places to show (0-6).
Number Format - Choose format style (Auto, US, EU, Indian, Space•Dot, Space•Comma).
Symbol Position - Place currency symbol before or after the amount, or auto per currency.
Rounding - Standard, always up, always down, or no rounding. Option to round to nearest .99.

Theme Integration (Pro)

Manually embed the widget or cart notice anywhere in your theme using these HTML snippets:

Widget embed (add to header.liquid or any section):

<div class="cwiki-widget"></div>

Cart notice embed (add to cart.liquid):

<div class="cwiki-banner"></div>

Developer Options (Pro)

Style Overrides - Inject custom CSS to tweak widget styling.
Click Listeners - Re-convert prices when specific elements are clicked (e.g., size pickers, product options).
Extra Price Elements - Target additional price elements beyond the default .cwiki wrapper.
URL Patterns - Re-scan for prices when the URL contains specific strings (for AJAX content, endless scroll).
Conversion Delay - Wait before converting prices (for content that loads after page ready).

Heads up: These options are for advanced users. Test on a preview theme before publishing.

6 Troubleshooting

Prices not converting?

Make sure the cwiki wrapper class is in your currency format settings. Go to Settings → General → Store defaults and check the HTML formatting. Also verify the app embed is enabled in your theme customizer.

Widget not showing?

Check that the app embed is enabled in your theme's App Embeds section. Try opening your theme customizer, find App Embeds, and make sure Currency.Wiki is toggled ON. Save and refresh your store.

Prices flickering on load?

Our app is designed for zero-flicker loading. If you see flicker, check if you have caching plugins that might be interfering. Also ensure the app embed is loading in the head section of your theme.

Wrong currency being detected?

Geo-detection is based on the visitor's IP address. VPNs or corporate networks can affect detection. Visitors can always manually select their preferred currency. You can also set a default fallback currency in settings.

Widget doesn't match my theme?

Use Theme & Appearance settings to customize colors, or enable Auto mode to detect your theme colors automatically. You can also use Custom CSS in Advanced Settings for fine-tuned styling.

Need Help?

Our support team is ready to help with any questions about setup or configuration.

Contact Support Back to App