Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

Theme Selectors

The Theme Selectors section allows you to control how Cart Reserve detects and interacts with elements in your store's theme. This is especially useful if you are using a custom theme, a heavily modified theme, or a third-party cart implementation.

In most cases, the default selectors work out of the box and no changes are required. You should only modify these settings if reservations are not updating correctly or if your theme structure differs from standard Shopify themes.

Accessing Theme Selectors

Navigate to Settings → Theme Selectors → Configure Selectors.

Automatic Theme Detection

Cart Reserve includes built-in support for 30+ Shopify themes. The system automatically detects your theme and applies appropriate selectors.

Tip: Use your browser's developer tools (right-click → Inspect) to find the correct CSS selectors for your theme elements if needed.

Click View full documentation for detailed selector configuration guidance.

Selector Sections

Theme selectors are organized into collapsible sections. Each section shows a counter indicating customized selectors (e.g., "0/2 customized").

Storefront Templates

Quick link to customize the appearance of timers, warnings, and expired state displays.

Click Customize Templates to open the Storefront Templates editor.

Cart Item Changes

Selectors for detecting and handling cart quantity changes.

Configure these if Cart Reserve is not detecting when customers modify quantities in the cart.

Fields: 2 available selectors

Product Detail

Selectors for the product page form and add to cart functionality.

Configure these if reservations are not being created when customers add items to cart from product pages.

Fields: 6 available selectors

Timer Context

Settings for timer display and cart drawer detection.

Configure these if the timer is not appearing in the correct location or if your theme uses a non-standard cart drawer.

Fields: 3 available selectors

Universal Selectors

CSS selectors for quantity controls that work across cart drawer, cart page, and product page.

Use these for custom themes not covered by specific presets. These selectors work universally across different cart contexts.

Fields: 6 available selectors

Label Translations

Button and timer labels are configured in the theme editor and can be translated using Shopify's "Translate & Adapt" app.

Click Open Theme Editor to access label configuration.

Path: Online Store → Themes → Customize → App embeds → CartReserve

Expanding Sections

Click Expand on any section to view and edit individual selectors.

Each selector field accepts standard CSS selector syntax (e.g., .cart-item, #product-form, [data-cart-drawer]).

Troubleshooting

If Cart Reserve is not working correctly with your theme:

  1. Check automatic detection — the system should handle most themes automatically
  2. Inspect elements — use browser developer tools to identify correct selectors
  3. Test incrementally — modify one selector at a time and test
  4. Save and refresh — changes require a page refresh to take effect

When to Customize Selectors

Only customize selectors if you experience:

  • Reservations not updating when cart quantities change
  • Timer not appearing in cart drawer or cart page
  • Add to cart not triggering reservations
  • Quantity controls not being detected

For standard Shopify themes, the defaults should work without modification.