# Updating the price on the default Shopify Price theme block when the variant is changed

The default Shopify 'Price' block is typically in a theme's product page, above where you would normally place the PRP Rental Widget.

This block doesn't listen for changes to the variant within the PRP Rental Widget, and so the price doesn't change when you select a different variant. The price doesn't update beyond what was initially loaded with the page.

To have this price update, you need to remove/hide the standard *Price* block in your rental product page template, and replace it with a *Custom Liquid* block.

Here is the code to put into the *Custom Liquid* block.

```html
<div id='prp__product-price'>
    <span class='price product-single__price' id='price'>{{ product.selected_or_first_available_variant.price | money }}</span>
</div>

<script>
    // Listen for the custom event to detect variant changes
    document.addEventListener('prp::variant::changed', function (event) {
        const variant = event.detail.variant;
        if (variant && variant.priceFormatted) {
            // Get the price element
            const priceElement = document.querySelector('#prp__product-price .price');

            if (priceElement) {
                // Update the price with the new value
                priceElement.innerHTML = variant.priceFormatted;
            }
        }
    });
</script>
```

If you don't like the style/appearance of it, you may need to apply some custom CSS. This can either be done as inline styles on the HTML elements, included in the Custom CSS field of the PRP Rental Widget, or added to one of you site stylesheets.

If you need any help implementing this, please [just reach out](https://tally.so/r/mVlWGy)! If you provide us with collaborator access we'll get it sorted for you.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.productrentalspro.com/user-guide/other/improving-the-cart-and-checkout-experience/updating-the-price-on-the-default-shopify-price-theme-block-when-the-variant-is-changed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.