--- updatedAt: 2025-11-13T14:10:20.000Z agentTools: siteIndex: https://docs.affirm.com/llms.txt projectIndex: https://docs.affirm.com/platforms/llms.txt --- # BigCommerce FAQs Get answers to common questions about your BigCommerce integration. ## :fa-question-circle: If I am using a custom theme, where can I find the Selector ID for the product and cart page promotional messaging? For custom themes, we require a *Selector ID* value so that Affirm promotional messaging can be easily added to the product and cart pages. You can use an existing *Selector ID* or a class name available in your theme files. To find the *Selector ID*, right-click on the price in a chrome browser and select **Inspect**. Right-click on the price and select **Inspect** again so that the inspector focuses on the `price` element. You will see something similar to the example below. {475} In this example, you would copy over `price price--withoutTax` into the **Selector ID** field. It is important to note, if there are any spaces in the class name, such as `price price` replace any spaces with “.” so the final text in the *Selector ID* field should read: `price.price--withoutTax`. Alternatively, you can go to **Storefront > My Themes** and under **Advanced Options**, click **Edit HTML/CSS**, and search for product and cart related templates. Usually, the naming format for these files are `product-view.html`, `product.html`, `cart.html`, `cart-view.html`, etc. Use any existing class name or ID after which you want to add the promotional messaging. For the example below, *productView-price* is what should be used as the Selector ID: ```html *
\     ......\     .....\
* ``` If none of the existing classes or IDs from the product/cart templates are working, you can also add another `div` in your template right under the `product `or `cart-price` and use this ID, `customAffirmPromoContainer`, as the *Selector ID*. Ex: `
` *** ### Product page price If selecting a product’s variant changes the total product price and the Affirm marketing messaging does not update accordingly, you will need to use the **Product Page Price** and **Product Page Options** settings. Both options can be found by right-clicking and inspecting the respective elements on the product page. To find the **Product Page Price ID** field, right-click the total price of the item on the product page and click **Inspect** similar to finding the Selector ID. Right click the total price of the item and click **Inspect** again to center it. ![](https://files.readme.io/35e7506-Screen_Shot_2020-05-20_at_3.33.57_PM.png "Screen Shot 2020-05-20 at 3.33.57 PM.png") The text in the following image is the code responsible for changing the price, in this case, the class we want copy over is the same as the Selector ID (`price price--withoutTax”` as this is the “class” the `Price` element is located in. Copy the class name and paste into the **Product Page Price ID** field. Similar to the Selector ID, replace any spaces with “.” - the final text in the **Product Page Price ID** field should read: `price.price--withoutTax`. ![](https://files.readme.io/1da3a47-Screen_Shot_2020-05-20_at_3.36.00_PM.png "Screen Shot 2020-05-20 at 3.36.00 PM.png") *** ### Product Page Options To find the **Product Page Options ID**, we will follow the same process of inspecting the page element. Right-click and inspect one of your options that will change the price. In the example below, because the options are selected from a dropdown menu, we are inspecting the menu that says **Choose Options**. ![](https://files.readme.io/158ca9f-Screen_Shot_2020-05-20_at_3.38.09_PM.png "Screen Shot 2020-05-20 at 3.38.09 PM.png") Right-click the dropdown menu and click **Inspect** again to center it. In this example, you can see that there are multiple options that will change the price such as *Add Filter Wrap/Pre-Filter* or *Add Replacement Air Filter*. {664} In this example, we will select `form-field` because the price is followed by the `` element which means that you would want to use the class that is followed by `
`. Copy the class name and paste into the **Product Page Options ID** field, so it will read `form-field`. The filled-out sections should look like the following: ![](https://files.readme.io/0dba639-Screen_Shot_2020-05-20_at_3.41.44_PM.png "Screen Shot 2020-05-20 at 3.41.44 PM.png") # Sibling pages * [Configure Affirm in BigCommerce](https://docs.affirm.com/platforms/docs/bigcommerce-integration.md) * [Add Promotional Messaging to BigCommerce](https://docs.affirm.com/platforms/docs/add-promotional-messaging-to-bigcommerce.md) * [Go-live checklist](https://docs.affirm.com/platforms/docs/bigcommerce-go-live.md)