# Collection page This guide explains how to show the **final discounted price** on collection pages, featured products, or anywhere products are rendered as cards—instead of Shopify’s default price. {% embed url="" %} #### What this setup does By default, many themes show the **original product price**, even when discounts apply.\ This setup replaces that with the **actual final price the customer will pay**, including discounts created via Dollarlabs. The pricing is handled by **JavaScript**, so your theme does **not** need updating every time the app changes. *** ### Step 1: Add the Price Snippet Create a new file in the snippets folder of your Shopify theme. ``` snippets/dollarlabs-collection-price.liquid ``` Paste the provided snippet code into this file. This snippet: * Outputs a lightweight HTML container * Passes product & pricing data as `data-*` attributes * Leaves the actual price rendering to the Dollarlabs app embed (JavaScript) *** ### Step 2: Replace Your Theme’s Price Render Find where your theme renders prices (usually `price.liquid` or similar). Instead of rendering the theme’s default price markup, replace it with: ```liquid {% render 'dollarlabs-collection-price', product: product %} ``` That’s it. When this snippet is active: * The default Shopify price is skipped * Dollarlabs fills in the **final discounted price** dynamically *** ### Important Prerequisite Make sure the **Dollarlabs Collection Pricing app embed** is enabled in the theme editor. This embed: * Calculates discounts * Updates prices dynamically * Ensures prices stay correct without theme updates *** ### Configuration Options Explained These options control how prices are displayed. They are passed as `data-*` attributes in the snippet. #### `show_original_price` **What it does:**\ If enabled, and the product is discounted, the original price is shown as a **strike-through**. **Use this if:**\ You want customers to clearly see the discount applied. *** #### `show_compare_at_price_for_non_discounted` **What it does:**\ If enabled, shows the **compare-at price** as a strike-through even when the product is not discounted. **Use this if:**\ You want to show perceived savings or MSRP-style pricing. *** #### `data-show-currency-code` **What it does:**\ Displays the currency code (e.g. USD, INR, EUR) next to the price. **Use this if:**\ You sell internationally or want to avoid currency confusion. *** #### `data-currency-code-position` **What it does:**\ Controls where the currency code appears. **Values:** * `left` → `USD 700` * `right` → `700 USD` *** ### Why This Approach? * No theme re-deploys when pricing logic changes * Faster price updates using JavaScript * Centralized logic handled by the app embed * Safer for theme upgrades *** ### Need Help? This setup requires a basic understanding of Shopify themes.\ If you’re unsure where to place the snippet or how to replace your theme’s price rendering, reach out via chat or email — we’re happy to help. --- # 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://help.dollarlabs.io/dollarlabs-b2b-custom-pricing/show-final-prices-on/collection-page.md?ask= ``` 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.