The Developer Settings are designed to help store owners and developers map their theme’ selectors to the app. Since every Shopify theme structures its HTML differently, sometimes discounted prices, notes, or cart prices do not display correctly by default. By adding the right selectors from your theme in these settings, you can ensure the app’s offer prices appear seamlessly across the product page, cart, collection page, and checkout. Below is a detailed explanation of each option.
You can set selectors for the following:
1. Count line items selector
-> This option is used when discounted prices for products in the cart are not displaying correctly even after you have already set the line item total price selector and the line item single price selector. In such cases, you need to add the selector for the product’s full container div. By doing this, the app can properly identify the product structure in your theme and display the offer price correctly for that product in the cart.
2. Line item total price selector
-> The line item total price selector is required when the total price of a product (calculated as quantity multiplied by the unit price) is not showing in the cart after applying discounts. If the app fails to override or update the total, you can copy the theme’s selector for the total price element and paste it here. This ensures that the cart reflects the correct discounted total price for each product line item.
3. Line item single price selector
-> This selector controls the unit price displayed for each product in the cart. When the offer price per unit does not appear correctly, you need to add the selector for the single price element from your theme. Some themes split price into multiple span tags, and in such cases, you can combine them using a plus sign (+) so the app knows to apply the discount across all price parts. This guarantees the correct single (unit) offer price is visible to customers.
4. Subtotal selector
-> The subtotal selector ensures the cart subtotal updates correctly with discounted prices. If customers see the original subtotal instead of the discounted one, it means the app cannot locate your theme’s subtotal element. Adding the correct selector here allows the app to update the subtotal with the proper discounted value so the cart shows accurate totals before checkout.
5. Collection page price selector
-> On collection or category pages, some themes may not show the discounted or offer price automatically. If that happens, you can provide the selector for the product price element used on collection pages. Once added, the app will correctly display discounted prices alongside or in place of original prices for all products on collection pages.
6. Note on PDP selector
-> Sometimes, you may add special notes for B2B clients, such as bulk order instructions or custom messages, but they may not appear below the discount table on the product page. By entering the selector from your theme for where notes should appear, the app ensures these B2B notes are displayed properly on the product detail page, giving customers clear information about their offers or conditions.
7. Checkout button selector
-> If the discount price isn’t reflected during checkout, add the checkout button selector here.The checkout button selector is crucial when discounted prices are not being passed through to checkout. Since the app pushes pricing updates via the checkout button’s class or ID, adding the correct selector here ensures that the correct discounted prices are carried forward to Shopify’s checkout process.
8. Product page price selector
-> If the offer price is not showing on the product detail page, you can add the selector for the product price element used by your theme. This ensures that customers see the correct discounted pricing directly on the product page.
9. Product page quantity selector
-> When you select a discounted quantity from the offer table but that quantity does not automatically update in the theme’s quantity picker on the product page, this option is used. By adding the correct selector for the product page quantity input field, the app can sync the selected quantity from the discount table to the theme’s input box, ensuring the right quantity is carried through to cart and checkout.
10. Shopify discount tag selector
-> In some themes, customers can apply coupon codes in the cart. If Shopify’s native discounts are applied along with the app’s discounts, they may overlap or merge incorrectly at checkout. To prevent this, you can add the selector for the Shopify discount tag in this option.
11. Mini cart selector
-> Mini carts often use different structures compared to the main cart page, and sometimes discounted prices like line item price, total price, or subtotal may not display correctly even after setting the other selectors. In such cases, you can add the full container selector of the mini cart here. This tells the app to apply all offer prices within the mini cart, ensuring accurate display of discounts in both cart versions.
Advanced Settings
1. Custom CSS – This option allows you to fully customize the appearance of discounted prices or the offer table using your own CSS code. You can change font styles, colors, sizes, or apply any design adjustments that match your store’s branding. It is also useful if you want to style the offer table differently or add special emphasis on discounted elements for better visibility.
2. Custom JS – For advanced customization, you can add your own JavaScript code. This is helpful if you want to perform special actions when an offer is applied, modify the HTML structure, or create custom interactions beyond the default app behavior. Developers can use this to implement store-specific requirements or additional features for the discount display.