> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🎯 How to Set Up Custom Pricing Selector

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 💱

---