Not all Shopify themes use standard price selectors. Some themes display prices using custom HTML structures, which can prevent automatic currency conversion from working correctly.

That’s where Custom Pricing Selectors come in.

By adding the correct price selector, you can tell Hoppy Currency Converter exactly where prices are located on your storefront so they can be converted properly across product pages, collections, cart drawers, and other custom sections. 💱

⚠️ Before You Begin

Before setting up a Custom Pricing Selector:

• Make sure the price is visible on your storefront
• Make sure you can inspect page elements using your browser
• Identify the specific price that is not converting correctly

If you're unsure which selector to use, our support team can help identify it for you.

🛠️ Step 1 — Open Hoppy Currency Converter

Open the Hoppy Currency Converter app from your Shopify Admin.

⚙️ Step 2 — Open Advanced Settings

From the left-side navigation menu:

→ Click Advanced

This section contains additional settings used for theme compatibility and advanced storefront configurations.

🎯 Step 3 — Locate Custom Price Selectors

Inside the Advanced section:

→ Find the Custom Price Selectors field

This is where you'll add the selector used to identify price elements on your storefront.

🌐 Step 4 — Open the Storefront Page

Navigate to the page where the price appears.

Examples include:

• Product Pages
• Collection Pages
• Featured Product Sections
• Cart Drawers
• Cart Pages

Open the exact page where prices are not converting correctly.

🔍 Step 5 — Inspect the Price Element

Locate the price on your storefront.

Then:

→ Right-click the price

→ Select Inspect

This opens your browser's Developer Tools and highlights the HTML element responsible for displaying that price.

📋 Step 6 — Identify the Correct Selector

Look for either a:

Class Selector

Example:

class="price-item"

Use:

.price-item

ID Selector

Example:

id="product-price"

Use:

\#product-price

⚠️ Important:

• Class selectors must start with a dot (.)
• ID selectors must start with a hash (\#)

Using the wrong format may prevent the converter from detecting prices correctly.

➕ Step 7 — Add the Selector

Return to:

→ Advanced → Custom Price Selectors

Paste your selector into the field.

Multiple Selectors

If prices appear in multiple locations, you can add more than one selector.

Separate each selector with a comma.

Example

.product__price, .price-item .money, \#product-price

This allows the app to detect prices across multiple storefront sections.

💾 Step 8 — Save Your Changes

Once the selector has been added:

→ Click Save

The Currency Converter will now begin monitoring the specified price elements.

🧪 Step 9 — Test the Conversion

After saving:

→ Refresh your storefront

For best results:

• Use an Incognito / Private browser window
• Clear browser cache if necessary
• Switch between currencies and verify that prices update correctly

Check all storefront areas where the selector was added.

🆘 Need Help Finding the Correct Selector?

Some Shopify themes use heavily customized structures that make selectors harder to identify.

If you're unsure which selector should be used:

→ Contact our support team

Include:

• Store URL
• Page URL where the issue occurs
• Screenshot of the price section

We'll be happy to help identify the correct selector for your theme. 🤝

🎉 Final Result

Once configured successfully:

✅ Prices convert correctly across your storefront

✅ Custom theme price elements become detectable

✅ Product, collection, and cart prices stay synchronized

✅ Currency conversion becomes more accurate and reliable

✅ Customers see consistent pricing across all supported currencies 💱

Updated on: 03/06/2026