# Rebuy Developer Documentation - Complete Documentation (963.3KB)

> Developer documentation for Rebuy - personalization and merchandising for Shopify

This file contains the complete documentation for LLM context loading.

---

# Home (6.1KB)

Source: https://developers.rebuyengine.com/index.md

<div class="hero" markdown>

# The Rebuy Developer Hub

Welcome to the Rebuy developer hub. You'll find comprehensive guides and documentation to help you start working with Rebuy as quickly as possible, as well as support if you get stuck. Let's jump right in!

<a href="reference/recommended/" class="hero-button">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
  API Reference
</a>

</div>

<div class="link-grid" markdown>

<div class="link-section" markdown>

### [Platform Data Sources](reference/recommended.md)

-   [Recommended](reference/recommended.md) <span class="nav-method-badge nav-method-badge--get">GET</span>
-   [Top Sellers](reference/top-sellers.md) <span class="nav-method-badge nav-method-badge--get">GET</span>
-   [Trending Products](reference/trending-products.md) <span class="nav-method-badge nav-method-badge--get">GET</span>
-   [View More...](reference/recommended.md){.view-more}

</div>

<div class="link-section" markdown>

### [Data Sources : Widgets](reference/api-custom-endpoints.md)

-   [Custom Endpoints](reference/api-custom-endpoints.md) <span class="nav-method-badge nav-method-badge--get">GET</span>
-   [All Sources](reference/sources.md)
-   [Widget Settings](reference/widget-settings-url.md) <span class="nav-method-badge nav-method-badge--get">GET</span>

</div>

<div class="link-section" markdown>

### [Rebuy Analytics](reference/analytics-event.md)

-   [Event](reference/analytics-event.md) <span class="nav-method-badge nav-method-badge--post">POST</span>
-   [Rebuy Analytic 2.0 Endpoints](reference/rebuy-analytic-v2-endpoints.md)

</div>

<div class="link-section" markdown>

### [JavaScript](reference/rebuy-js-overview.md)

-   [Overview](reference/rebuy-js-overview.md)
-   [Cart](reference/cart.md)
-   [Smart Cart](reference/smart-cart.md)
-   [View More...](reference/rebuy-js-overview.md){.view-more}

</div>

<div class="link-section" markdown>

### [Smart Cart](reference/smart-cart.md)

-   [Overview](reference/smart-cart.md)
-   [Settings](reference/smart-cart-settings.md)
-   [Methods - Legacy](reference/smart-cart-methods-legacy.md)
-   [View More...](reference/smart-cart.md){.view-more}

</div>

<div class="link-section" markdown>

### [Smart Flows](reference/smart-flows-methods.md)

-   [Methods](reference/smart-flows-methods.md)
-   [Session](reference/smart-flows-methods-session.md)

</div>

<div class="link-section" markdown>

### [Headless SDKs](reference/headless-sdk-overview.md)

-   [Overview](reference/headless-sdk-overview.md)
-   [@rebuy/core-sdk](reference/core-sdk-getting-started.md)
-   [@rebuy/hydrogen-sdk](reference/hydrogen-sdk-getting-started.md)

</div>

<div class="link-section" markdown>

### [Experiments JS](reference/experiments-overview.md)

-   [Overview](reference/experiments-overview.md)
-   [Methods](reference/experiments-methods.md)
-   [Examples](reference/experiments-examples.md)

</div>

<div class="link-section" markdown>

### [Storefront Helper](reference/shopifystorefront-helper-overview.md)

-   [Overview](reference/shopifystorefront-helper-overview.md)
-   [Methods](reference/shopifystorefront-helper-methods.md)
-   [Examples](reference/shopifystorefront-helper-examples.md)

</div>

<div class="link-section" markdown>

### [Shopify Permalinks](reference/shopify-permalinks-introduction.md)

-   [Overview](reference/shopify-permalinks-introduction.md)
-   [Methods](reference/shopify-permalinks-methods.md)
-   [Examples](reference/shopify-permalinks-examples.md)

</div>

<div class="link-section" markdown>

### [Rebuy + Hydrogen 1.0](reference/shopify-hydrogen.md)

-   [Overview](reference/shopify-hydrogen.md)
-   [Getting Started](reference/shopify-hydrogen-getting-started.md)
-   [Installation](reference/shopify-hydrogen-installation.md)
-   [View More...](reference/shopify-hydrogen.md){.view-more}

</div>

<div class="link-section" markdown>

### [Meta Shops](reference/meta-shops-recommended.md)

-   [Recommended](reference/meta-shops-recommended.md) <span class="nav-method-badge nav-method-badge--post">POST</span>
-   [Storefront Trending](reference/meta-storefront-trending.md) <span class="nav-method-badge nav-method-badge--post">POST</span>
-   [Collection Trending](reference/meta-collection-trending.md) <span class="nav-method-badge nav-method-badge--post">POST</span>

</div>

<div class="link-section" markdown>

### [Rebuy + Tapcart](reference/tapcart-custom-screen.md)

-   [Tapcart Custom Screen](reference/tapcart-custom-screen.md)

</div>

<div class="link-section" markdown>

### [Rebuy Smart Search](reference/smart-search.md)

-   [Search](reference/smart-search.md) <span class="nav-method-badge nav-method-badge--post">POST</span>
-   [QuickView Search](reference/quickview-search.md) <span class="nav-method-badge nav-method-badge--post">POST</span>

</div>

<div class="link-section" markdown>

### [Rebuy Smart Collections](reference/smart-collections-active-setting.md)

-   [Active Settings](reference/smart-collections-active-setting.md) <span class="nav-method-badge nav-method-badge--get">GET</span>
-   [Product List](reference/smart-collections-product-list.md) <span class="nav-method-badge nav-method-badge--post">POST</span>

</div>

</div>

---

## Getting Started

To access the REST API and all the power it offers, get started by creating a development store.

To use our demo store, use this key:

```text
0f46a05ff487a8a8856148bc6d436efd47e46abe
```

!!! note "Demo Key Limitations"
    Some endpoints require specific parameters (relating to a storefront, customer, etc.) that will only be accessible with your own Rebuy account and development store.

## Need Help?

-   **Support**: Open a chat with us using the Intercom widget in the bottom-right corner. See [Contacting Rebuy Support](https://help.rebuyengine.com/en/articles/7914694-contacting-rebuy-support) for all support options.
-   **Status**: Check [status.rebuyengine.com](https://status.rebuyengine.com)

---

# Getting Started with Rebuy (2.5KB)

Source: https://developers.rebuyengine.com/guides/getting-started.md

## Welcome to the Rebuy Engine Developer Hub

In this developer portal, you will find helpful documentation covering the **REST API**, the **JavaScript Guide**, and more.

### Getting Started

To access the REST API and all the power it offers you, please get started by creating a development store.

To use our demo store, please use this key:

```text
0f46a05ff487a8a8856148bc6d436efd47e46abe
```

!!! note "Demo Key Limitations"
    Some endpoints will require specific parameters (relating to a storefront, customer, etc.) that will only be accessible with your own Rebuy account and development store.

#### Quick Example

Try fetching product recommendations with curl:

```bash
curl "https://rebuyengine.com/api/v1/products/recommended?key=0f46a05ff487a8a8856148bc6d436efd47e46abe&limit=2"
```

Or with JavaScript:

```javascript
const API_KEY = '0f46a05ff487a8a8856148bc6d436efd47e46abe';

fetch(`https://rebuyengine.com/api/v1/products/recommended?key=${API_KEY}&limit=2`)
  .then(response => response.json())
  .then(data => {
    console.log('Recommended products:', data.data);
  });
```

The REST API offers a number of endpoints, and we'd like to highlight the Platform endpoints vs. our Custom endpoints.

### Platform Endpoints

Platform endpoints include all of Rebuy's standard endpoints that return products. These will cover many use cases for your storefront or application.

[See the Platform Endpoint docs here.](../reference/recommended.md)

### Custom Endpoints

Custom Endpoints, also known as Data Sources, or sometimes Rulesets are one of Rebuy's most powerful features.

[See the Custom Endpoints docs here.](../reference/api-custom-endpoints.md)

### Rebuy Connector

The Rebuy Connector is a Shopify App Embed that enables advanced features like optimized script loading and customer tag targeting. If you're using Smart Flows or want faster load times, you'll want to enable it.

[Learn about the Rebuy Connector](rebuy-connector.md)

#### More Reading

* [How to configure and apply Custom Endpoints](https://help.rebuyengine.com/en/articles/6117555-how-to-configure-and-apply-endpoints)
* [Read more on Data Sources](https://help.rebuyengine.com/en/collections/3401117-data-sources)
* [Read more on Widgets](https://help.rebuyengine.com/en/?q=widgets)

---

# Rebuy Connector (4.8KB)

Source: https://developers.rebuyengine.com/guides/rebuy-connector.md

# Rebuy Connector

The Rebuy Connector is a Shopify App Embed that enables advanced Rebuy features by outputting Liquid directly within your theme. It serves as the bridge between Shopify's server-side capabilities and Rebuy's client-side functionality.

## Overview

The Rebuy Connector is a Global App Embed block that must be enabled in your Shopify theme settings. Once enabled, it provides access to features that require server-side Liquid rendering, such as optimized script loading and real-time customer data.

## Enabling the Rebuy Connector

1. In your Shopify admin, navigate to **Online Store > Themes**
2. Click **Customize** on your active theme
3. In the theme editor, click **App embeds** in the left sidebar
4. Toggle **Rebuy Connector** to enabled
5. Click **Save**

Alternatively, you can access the App Embeds directly via:
`https://[your-store].myshopify.com/admin/themes/current/editor?context=apps`

!!! warning "Per-Theme Setting"
    The Rebuy Connector must be enabled on **each theme** where you want Rebuy features to work. If you have multiple themes (e.g., a staging theme), remember to enable the Connector on each one.

## Features

### Script Tag Installation

The Rebuy Connector enables optimized script loading by injecting the Rebuy script tag directly into your theme via Liquid. This allows Rebuy to load earlier in the page lifecycle, reducing delays for features like Smart Cart, Widgets, and Smart Search.

When enabled in combination with the "Install Rebuy Script Tag and Disable Rebuy JS" setting in Rebuy Admin, the Connector outputs:

```liquid
<script async src="https://cdn.rebuyengine.com/onsite/js/rebuy.js?shop={{ shop.permanent_domain }}"></script>
```

**To configure:**

1. Ensure the Rebuy Connector is enabled in your theme's App Embeds
2. In Rebuy Admin, navigate to **Settings > App Settings**
3. Enable **Install Rebuy Script Tag and Disable Rebuy JS**

!!! danger "Important"
    Do not disable Rebuy JS in the admin before confirming the Rebuy Connector is active on your theme, or Rebuy features will not load.

For more details on optimizing load times, see the [Load Rebuy Faster](https://help.rebuyengine.com/en/articles/6656777-load-rebuy-faster) help article.

### Customer Tags

The Rebuy Connector can expose Shopify customer tags to Rebuy, enabling real-time personalization in Smart Flows based on customer segmentation.

When enabled, the Connector makes the logged-in customer's tags available to Rebuy's client-side library, allowing you to create targeted experiences using Smart Flows conditions.

**To configure:**

1. Ensure the Rebuy Connector is enabled in your theme's App Embeds
2. In Rebuy Admin, navigate to **Settings > App Settings**
3. Enable **Expose Customer Tags**

Once enabled, you can use customer tags as conditions in Smart Flows to target specific customer segments.

#### Use Cases

- Show VIP-exclusive offers to customers tagged as "VIP"
- Display loyalty rewards to customers tagged with membership tiers
- Target wholesale customers with B2B-specific messaging
- Personalize upsells based on customer purchase history tags

## Technical Details

The Rebuy Connector works by rendering a small Liquid snippet within the `<head>` or `<body>` of your theme (depending on configuration). This snippet:

- Reads from Rebuy app metafields to determine which features are enabled
- Outputs the appropriate Liquid/JavaScript based on your settings
- Makes server-side Shopify data (like customer tags) available to client-side Rebuy features

Because the Connector uses Shopify's native App Embed system, it automatically loads on all pages where app embeds are supported and requires no manual theme code modifications.

## Troubleshooting

**Rebuy features not loading after enabling Script Tag installation:**
:   Verify the Rebuy Connector is toggled on in your theme's App Embeds. The setting in Rebuy Admin only works when the Connector is active.

**Customer tags not appearing in Smart Flows:**
:   Ensure the customer is logged in. Customer tags are only available for authenticated customers. Also verify the "Expose Customer Tags" setting is enabled in Rebuy Admin.

**Connector not visible in App Embeds:**
:   Try refreshing the page or re-opening the theme editor. If the issue persists, reinstall the Rebuy app or contact support.

## Related Resources

- [Load Rebuy Faster](https://help.rebuyengine.com/en/articles/6656777-load-rebuy-faster) - Detailed guide on optimizing Rebuy load times
- [Manual Installation](../reference/manual-installation.md) - Alternative method for adding Rebuy script to your theme
- [Smart Flows Methods](../reference/smart-flows-methods.md) - JavaScript methods for Smart Flows

---

# AI Integration Guide (6.6KB)

Source: https://developers.rebuyengine.com/guides/ai-integration.md

## AI-Friendly Documentation

Rebuy provides machine-readable documentation indexes designed for AI assistants and LLM-powered development tools.

### llms.txt Files

| File | Size | URL | Purpose |
|------|------|-----|---------|
| **Index** | {{LLMS_TXT_SIZE}} | [llms.txt](https://developers.rebuyengine.com/llms.txt) | Compact index with page descriptions |
| **Full Content** | {{LLMS_FULL_SIZE}} | [llms-full.txt](https://developers.rebuyengine.com/llms-full.txt) | Complete documentation dump |

Use the index for quick lookups. Use full content when you need deep context.

## On-Page AI Menu

Every documentation page includes an **Ask AI** dropdown below the title with these options:

| Option | Action |
|--------|--------|
| **Ask Claude** | Opens Claude.ai with the page pre-loaded for Q&A |
| **Ask ChatGPT** | Opens ChatGPT with the page pre-loaded for Q&A |
| **Copy MD** | Copies the page's raw markdown to your clipboard |
| **View MD** | Opens the raw markdown file in a new tab |

The **View MD** option is useful when you want to share a direct link to the markdown source, or when using tools that prefer raw markdown URLs.

## Using with AI Tools

### Claude Code

**Option 1:** Fetch llms.txt for context:

```bash
curl -s https://developers.rebuyengine.com/llms.txt
```

**Option 2:** Install the skill for guided workflows:

```bash
mkdir -p .claude/skills/building-rebuy-features
curl -o .claude/skills/building-rebuy-features/SKILL.md \
  https://developers.rebuyengine.com/assets/skills/building-rebuy-features.md
```

### ChatGPT / Other LLMs

Start your conversation with:

> Read https://developers.rebuyengine.com/llms.txt and use it as context for my questions.

Then ask your Rebuy integration question.

### Claude.ai Projects

1. Create a new project
2. Add `https://developers.rebuyengine.com/llms.txt` as a web source
3. Or upload the skill file as a project knowledge file

## Claude Code Skill

The skill provides guided workflows for building Rebuy integrations. [Download the skill directly](https://developers.rebuyengine.com/assets/skills/building-rebuy-features.md) or copy the content below to `.claude/skills/building-rebuy-features/SKILL.md`:

```markdown
---
name: building-rebuy-features
description: >-
  Builds custom Rebuy integrations including widget templates, event listeners,
  REST API calls, Smart Cart apps, and headless/Hydrogen setups. Use when
  customizing Rebuy widgets, listening to cart events, calling the Rebuy API,
  or integrating with Shopify Hydrogen.
---

## Quick Start

1. **Fetch the documentation index:**
   ```
   https://developers.rebuyengine.com/llms.txt
   ```

2. **For complete context:**
   ```
   https://developers.rebuyengine.com/llms-full.txt
   ```

3. **Identify the feature type** below and find relevant docs in the index.

> **Note:** Documentation filenames below (e.g., `widget-custom-templates.md`) correspond to entries in llms.txt. Fetch the index to get full URLs.

## Feature Types

### Custom Widget Templates

Customize HTML/Vue.js templates for product recommendation widgets.

**Docs:** `widget-custom-templates.md`, `bundle-builder-custom-template.md`, `modal-custom-templates.md`

**Pattern:**
```html
<script type="text/template" data-rebuy-id="rebuy-recommended-template">
  <div v-if="products.length > 0" class="rebuy-widget">
    <!-- Vue.js template with Rebuy data bindings -->
  </div>
</script>
```

**Available data:** `products`, `settings`, `addToCart(product)`, `formatMoney(cents)`

### Smart Cart Customization

Customize the slide-out cart drawer.

**Docs:** `smart-cart.md`, `smart-cart-custom-template.md`, `smart-cart-methods.md`, `smart-cart-event-listeners.md`

**Note:** V2 Smart Cart templates are managed in the Rebuy admin UI, not code.

### Event Listeners

React to Rebuy lifecycle events for custom integrations.

**Docs:** `event-listeners.md`, `cart-event-listeners.md`, `smart-cart-event-listeners.md`, `widget-event-listeners.md`

**Pattern:**
```javascript
document.addEventListener('rebuy:cart.add', function(event) {
  const { cart, item } = event.detail;
  // Your custom logic
});
```

**Common events:** `rebuy:cart.ready`, `rebuy:cart.add`, `rebuy:smartcart.show`, `rebuy:widget.ready`

### API Integrations

Call Rebuy REST APIs for headless or server-side integrations.

**Docs:** `recommended.md`, `top-sellers.md`, `trending-products.md`, `api-custom-endpoints.md`

**Base URL:** `https://rebuyengine.com/api/v1/`

```bash
curl -H "x-rebuy-api-key: YOUR_API_KEY" \
  "https://rebuyengine.com/api/v1/products/recommended?shopify_product_ids=123"
```

### Smart Cart Apps

Build custom apps that appear inside Smart Cart.

**Docs:** `building-your-smartcart-app.md`, `smart-cart-methods-smart-cart-apps.md`

### Headless / Hydrogen

Integrate Rebuy in headless Shopify stores.

**Docs:** `headless-sdk-overview.md`, `core-sdk-getting-started.md`, `hydrogen-sdk-getting-started.md`

**NPM Packages:** `@rebuy/core-sdk`, `@rebuy/hydrogen-sdk`

## Public JavaScript API

The `window.Rebuy` object exposes:

| Module | Purpose |
|--------|---------|
| `Rebuy.Cart` | Cart operations |
| `Rebuy.SmartCart` | Smart Cart control |
| `Rebuy.Widgets` | Widget management |
| `Rebuy.SmartSearch` | Search functionality |
| `Rebuy.SmartCollections` | Collection pages |
| `Rebuy.util` | Helper functions |

## Common Patterns

```javascript
// Listen for cart updates
document.addEventListener('rebuy:cart.change', (e) => {
  console.log('Cart updated:', e.detail.cart);
});

// Add to cart programmatically
Rebuy.Cart.addItem({ id: variantId, quantity: 1 });

// Wait for Rebuy to initialize
document.addEventListener('rebuy:ready', () => {
  console.log(Rebuy.Cart.getCart());
});

// Show/hide Smart Cart
Rebuy.SmartCart.show();
Rebuy.SmartCart.hide();
```

## Resources

- **Full Docs:** https://developers.rebuyengine.com
- **llms.txt:** https://developers.rebuyengine.com/llms.txt
- **Full Context:** https://developers.rebuyengine.com/llms-full.txt
```

## What's in llms.txt?

The index includes entries for every documentation page:

- **API Reference** - REST endpoints for recommendations, analytics, search
- **JavaScript API** - Cart, Smart Cart, Widgets, Events, Utilities
- **Headless SDKs** - Core SDK and Hydrogen integration
- **Custom Templates** - Widget, Smart Cart, Modal templates
- **Event Listeners** - All Rebuy lifecycle events

Each entry includes the page URL and a brief description to help AI tools find the right documentation quickly.

---

# Building Your Smart Cart App (2.6KB)

Source: https://developers.rebuyengine.com/guides/building-your-smartcart-app.md

## Create The App

To create a Smart Cart App start by creating your Rebuy Partners account [here](https://rebuyengine.com/partners/create). If you have already created one then [login](https://rebuyengine.com/partners/login).

Once you are logged in, click on **Smart Cart Apps** in the left sidebar menu. Then, click **Create New App**.

You will then see the following form:

![Create New App form with fields for Name, Description, Installation Instructions, and App Code](../assets/images/8f8bf62-Screen_Shot_2022-07-01_at_12.51.22_PM.png "Create New App form")

Start by giving your app a **Name**, **Description**, and **Installation Instructions**. If there are no extra steps to install your app (ie. registering an account on your website), then you can use "N/A" or "None" in the instructions field.

The **App Code** section is where you will place your HTML, JavaScript, or even CSS for your app. Just keep in mind that this field expects HTML, so if you're planning on writing CSS and JS inside of this editor, you'll need to wrap it in `<style>` and `<script>` tags, respectively.

Alternatively, you can choose to import a stylesheet or script file from elsewhere.

**Example**

```html
<div id="rebuy-example"></div>
<script src="https://cdn.rebuyengine.com/example.js"></script>
```

*This script would then populate the above "rebuy-example" div with all necessary code.*

In some cases, loading an additional script will not be necessary if your script is already being loaded by way of that shop having your Shopify app installed.

!!! note "You Can Revise App Code Later"
    This App Code doesn't need to be perfect before you submit the form. You'll be able to make revisions and restrict the app's access to specific merchant shops before it becomes visible to every Smart Cart.


Once you click **Save**, the form should submit and you will be immediately redirected to the Editor Interface for your app.

The Editor Interface looks similar to the Create New App page, except for the additional **Merchant Visibility** at the top of the screen. This section can be used to add merchant shops, which will make your app accessible to those shops' Smart Carts.

---

# Adjusting Merchant Visibility for Your App (2.5KB)

Source: https://developers.rebuyengine.com/guides/adjusting-merchant-visibility-for-your-app.md

From the Partners Dashboard, select **Smart Cart Apps** on the left sidebar.

Select your Smart Cart App, and you'll see a preview modal appear. On the bottom-left corner of the modal, select **Edit**. 

## Make your app available to specific stores

Once you've created your initial app, you can begin to test it specific stores that use Rebuy's Smart Cart.

On the Edit Interface for your app, you will see the following:

![Smart Cart App editor showing Merchant Visibility section with 'Make this app available to specific stores' option](../assets/images/43abe02-Screen_Shot_2022-07-01_at_1.16.57_PM.png "Smart Cart App merchant visibility settings")

*Your app will not be visible to merchants until you add specific stores using this interface* 

Select **Make this app available to specific stores**, and a modal should appear that allows you to enter a `myshopify.com` URL.

!!! warning "Shops must be registered Rebuy users"
    Since Smart Cart Apps can only be used on Rebuy merchant shops, you will not be able to add any merchants to this list unless they have a Rebuy account.


![Modal dialog for adding a myshopify.com URL to grant store access](../assets/images/cdbd098-Screen_Shot_2022-07-01_at_1.44.34_PM.png "Add store URL modal")

Once you've submitted a valid `myshopify.com` URL that is registered on Rebuy, the interface should look like this:

![Merchant Visibility section showing a successfully added store in the access list](../assets/images/6281fe1-Screen_Shot_2022-07-01_at_1.41.11_PM.png "Store added to visibility list")

!!! success "The Merchant can now see and enable the app."
    Now, your app will be visible to the merchant that has been added, within the merchant's Smart Cart settings interface in the Rebuy Admin.
    The merchant will still need to enable the app in order for it to begin appearing with their Smart Cart.


You can now continue developing your app, testing it on merchant shops until you're ready to submit the app for Rebuy Approval. Once approved, it will be available to all merchants.

## Make your app available to all stores

At this time, the Smart Cart Apps platform is still in development and total distribution is not yet available.

This section will be updated soon to reflect the Approval process for apps that are ready for release.

---

# Recommended (5.1KB)

Source: https://developers.rebuyengine.com/reference/recommended.md

## GET /api/v1/products/recommended

!!! note "Use Cases"
    Use this endpoint to build automated AI-based product recommendation workflows.
    For example, if a customer is buying A, use this endpoint to automatically surface and suggest they buy complimentary product B too.

!!! tip "Excluding Products"
    Add `exclude_rebuy` as a Shopify Product Tag to exclude products from being recommended.

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`shopify_product_ids` · string
:   Comma separated list of Shopify Product IDs to filter from the result set. Also used if only passing up single product ID.

`shopify_collection_id` · string
:   Shopify Collection ID. If provided, products belonging to this collection will be returned. Also used if only passing up single variant ID.

`shopify_variant_ids` · string
:   Comma separated list of Shopify Variant IDs to filter from the result set.

`metafields` · string
:   Valid values: yes. Returns product objects enriched with a metafields property.

`variant_metafields` · string
:   Valid values: yes. Returns product objects with enriched variant metafields property.

`bust_cache` · string
:   Valid values: yes. Deletes cached response and generates a new one.

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

`limit` · string · Default: `5`
:   Used to limit the number of returned results.

`any_variant_price_less_than` · string
:   Returns products that have any variant prices less than or equal to. Example value: 14.00

`any_variant_price_less_than_or_equal_to` · string
:   Returns products that have any variant prices less than or equal to. Example value: 14.00

`any_variant_price_equal_to` · string
:   Returns products that have any variant prices equal to. Example value: 99.00

`variant_price_greater_than` · string
:   Returns products that have any variant prices greater than. Example value:  10.00

`variant_price_greater_than_or_equal_to` · string
:   Returns products that have any variant prices greater than or equal to. Example value: 14.00

`unset_variants` · string
:   Unset all product variants that don't pass variant price conditions

`filter_oos` · string · Default: `yes`
:   Excludes products that are out of stock (OOS) from the response. To include OOS products, set the parameter to equal no.

`context` · string · Default: `default`
:   Toggles the recommended products to use the similar products AI

`country_code` · string
:   The ISO 3166-1 alpha-2 country code (e.g., `US`, `CA`, `GB`) corresponding to a Market region. Retrieves variant pricing from the Market’s catalog. The prices returned reflect the shop’s first active Market that matches the provided `country_code`. Only products included in that Market’s catalog will be returned in the response — products excluded from the catalog will not appear.

    **Required Shopify Scope:** `read_markets`

    Replaces the deprecated `presentment_prices` query parameter.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/products/recommended
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  shopify_product_ids: "YOUR_VALUE",
  shopify_collection_id: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/products/recommended?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": 562415992868,
      "title": "Performance Half Zip Pullover",
      "body_html": "Performance Half Zip Pullover",
      "vendor": "Example Brand",
      "product_type": "",
      "handle": "sport-tek-performance-half-zip-pullover",
      "status": "active",
      "tags": "clothing",
      "variants": [
        {
          "id": 7162596589604,
          "product_id": 562415992868,
          "title": "Royal Blue",
          "price": "50.00",
          "sku": "SPHZP-1",
          "compare_at_price": null,
          "inventory_quantity": 0,
          "option1": "Royal Blue"
        }
      ],
      "options": [
        {
          "id": 833063026724,
          "name": "Color",
          "values": ["Royal Blue", "White"]
        }
      ],
      "images": [
        {
          "id": 2155988090916,
          "src": "https://cdn.shopify.com/s/files/1/example/product.png",
          "width": 1528,
          "height": 1528
        }
      ],
      "image": {
        "id": 2155988090916,
        "src": "https://cdn.shopify.com/s/files/1/example/product.png"
      }
    }
    // ... additional products based on limit parameter
  ],
  "metadata": {
    "cache_info": {
      "cache_key": "re_c#025410d22345210e82e2e44d8826df9e",
      "cached_at_time": "never"
    }
  }
}
```

### 400 Bad Request

```json
{
  "error": "Invalid key"
}
```

---

# Top Sellers (4.4KB)

Source: https://developers.rebuyengine.com/reference/top-sellers.md

## GET /api/v1/products/top_sellers

Returns a list of the top selling products based on sales data.

!!! note "Use Cases"
    Use this endpoint to list top sellers (e.g. on the homepage).
## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`shopify_product_ids` · string
:   Comma separated list of Shopify Product IDs to filter from the result set.

`metafields` · string
:   Valid values: yes. Returns product objects enriched with a metafields property.

`variant_metafields` · string
:   Valid values: yes. Returns product objects with enriched variant metafields property.

`bust_cache` · string
:   Valid values: yes. Deletes cached response and generates a new one.

`limit` · string · Default: `5`
:   Used to limit the number of returned results.

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

`any_variant_price_less_than` · number
:   Returns products that have any variant prices less than or equal to the provided value.  Example value: 14.99

`any_variant_price_less_than_or_equal_to` · number
:   Returns products that have any variant prices less than or equal to the provided value. Example value: 14.00

`any_variant_price_equal_to` · number
:   Returns products that have any variant prices equal to the provided value. Example value: 99.99

`variant_price_greater_than` · string
:   Returns products that have any variant prices greater than the provided value. Example value: 10.00

`variant_price_greater_than_or_equal_to` · number
:   Returns products that have any variant prices greater than or equal to the provided value. Example value: 14.00

`unset_variants` · string
:   Valid values: yes, no. Unset all product variants that don't pass variant price conditions.

`filter_oos` · string · Default: `yes`
:   Excludes products that are out of stock (OOS) from the response. To include OOS products, set the parameter to equal no.

`country_code` · string
:   The ISO 3166-1 alpha-2 country code (e.g., `US`, `CA`, `GB`) corresponding to a Market region. Retrieves variant pricing from the Market's catalog. The prices returned reflect the shop's first active Market that matches the provided `country_code`. Only products included in that Market's catalog will be returned in the response — products excluded from the catalog will not appear.

    **Required Shopify Scope:** `read_markets`

    Replaces the deprecated `presentment_prices` query parameter.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/products/top_sellers
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  shopify_product_ids: "YOUR_VALUE",
  metafields: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/products/top_sellers?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": 562361892900,
      "title": "Flex Fleece Zip Hoodie",
      "body_html": "Flex Fleece Zip Hoodie",
      "vendor": "Example Brand",
      "product_type": "",
      "handle": "american-apparel-flex-fleece-zip-hoodie",
      "status": "active",
      "tags": "clothing",
      "variants": [
        {
          "id": 7162327597092,
          "product_id": 562361892900,
          "title": "Black",
          "price": "36.00",
          "sku": "AAFFZH-1",
          "compare_at_price": "45.00",
          "inventory_quantity": 10,
          "option1": "Black"
        }
      ],
      "options": [
        {
          "id": 833001914404,
          "name": "Color",
          "values": ["Black", "Gray", "Lapis"]
        }
      ],
      "images": [
        {
          "id": 2155862786084,
          "src": "https://cdn.shopify.com/s/files/1/example/hoodie.png",
          "width": 1528,
          "height": 1528
        }
      ],
      "image": {
        "id": 2155862786084,
        "src": "https://cdn.shopify.com/s/files/1/example/hoodie.png"
      }
    }
    // ... additional products based on limit parameter
  ]
}
```

### 400 Bad Request

```json
{}
```

---

# Trending Products (4.4KB)

Source: https://developers.rebuyengine.com/reference/trending-products.md

## GET /api/v1/products/trending_products

Returns a list of trending products based on sales data.

!!! note "Use Cases"
    Use this endpoint to list trending products (e.g. on the homepage).
## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`shopify_product_ids` · string
:   Comma separated list of Shopify Product IDs to filter from the result set.

`metafields` · string
:   Valid values: yes. Returns product objects enriched with a metafields property.

`variant_metafields` · string
:   Valid values: yes. Returns product objects with enriched variant metafields property.

`bust_cache` · string
:   Valid values: yes. Deletes cached response and generates a new one.

`limit` · string · Default: `5`
:   Used to limit the number of returned results.

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

`any_variant_price_less_than` · number
:   Returns products that have any variant prices less than or equal to the provided value.  Example value: 14.99

`any_variant_price_less_than_or_equal_to` · number
:   Returns products that have any variant prices less than or equal to the provided value. Example value: 14.00

`any_variant_price_equal_to` · number
:   Returns products that have any variant prices equal to the provided value. Example value: 99.99

`variant_price_greater_than` · string
:   Returns products that have any variant prices greater than the provided value. Example value: 10.00

`variant_price_greater_than_or_equal_to` · number
:   Returns products that have any variant prices greater than or equal to the provided value. Example value: 14.00

`unset_variants` · string
:   Valid values: yes, no. Unset all product variants that don't pass variant price conditions.

`filter_oos` · string · Default: `yes`
:   Excludes products that are out of stock (OOS) from the response. To include OOS products, set the parameter to equal no.

`country_code` · string
:   The ISO 3166-1 alpha-2 country code (e.g., `US`, `CA`, `GB`) corresponding to a Market region. Retrieves variant pricing from the Market's catalog. The prices returned reflect the shop's first active Market that matches the provided `country_code`. Only products included in that Market's catalog will be returned in the response — products excluded from the catalog will not appear.

    **Required Shopify Scope:** `read_markets`

    Replaces the deprecated `presentment_prices` query parameter.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/products/trending_products
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  shopify_product_ids: "YOUR_VALUE",
  metafields: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/products/trending_products?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": 562361892900,
      "title": "Flex Fleece Zip Hoodie",
      "body_html": "Flex Fleece Zip Hoodie",
      "vendor": "Example Brand",
      "product_type": "",
      "handle": "american-apparel-flex-fleece-zip-hoodie",
      "status": "active",
      "tags": "clothing",
      "variants": [
        {
          "id": 7162327597092,
          "product_id": 562361892900,
          "title": "Black",
          "price": "36.00",
          "sku": "AAFFZH-1",
          "compare_at_price": "45.00",
          "inventory_quantity": 10,
          "option1": "Black"
        }
      ],
      "options": [
        {
          "id": 832991428644,
          "name": "Color",
          "values": ["Black", "Gray", "Lapis", "Navy", "White"]
        }
      ],
      "images": [
        {
          "id": 2155862786084,
          "src": "https://cdn.shopify.com/s/files/1/example/hoodie.png",
          "width": 1528,
          "height": 1528
        }
      ],
      "image": {
        "id": 2155862786084,
        "src": "https://cdn.shopify.com/s/files/1/example/hoodie.png"
      }
    }
    // ... additional products based on limit parameter
  ]
}
```

### 400 Bad Request

```json
{}
```

---

# Purchased (16.4KB)

Source: https://developers.rebuyengine.com/reference/purchased.md

## GET /api/v1/products/purchased

!!! note "Use Cases"
    Use this endpoint to create personalized shopping experiences.
    For example, when a known customer is looking at the homepage, show them their favorite products for easy reordering.


#### Total units purchased is returned at the product-level

```json
"metadata": {
	"purchased_quantity": "1"
}
```

#### Customer details are returned at the response-level

```json
"metadata": {
	"shopify_customer": {
		"id": 589064699940,
		"first_name": "John",
		"last_name": "Smith"
	}
}
```

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`shopify_customer_id` · string
:   Shopify Customer ID

`shopify_product_ids` · string
:   Comma separated list of Shopify product IDs to filter from the result set.

`metafields` · string
:   Valid values: yes. Returns product objects enriched with a metafields property.

`bust_cache` · string
:   Valid values: yes. Deletes cached response and generates a new one.

`limit` · string · Default: `5`
:   Used to limit the number of returned results.

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

`filter_oos` · string · Default: `yes`
:   Excludes products that are out of stock (OOS) from the response. To include OOS products, set the parameter to no.

`country_code` · string
:   The ISO 3166-1 alpha-2 country code (e.g., `US`, `CA`, `GB`) corresponding to a Market region. Retrieves variant pricing from the Market’s catalog. The prices returned reflect the shop’s first active Market that matches the provided `country_code`. Only products included in that Market’s catalog will be returned in the response — products excluded from the catalog will not appear.

    **Required Shopify Scope:** `read_markets`

    Replaces the deprecated `presentment_prices` query parameter.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/products/purchased
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  shopify_customer_id: "YOUR_VALUE",
  shopify_product_ids: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/products/purchased?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": 562361892900,
      "title": "Flex Fleece Zip Hoodie",
      "body_html": "Flex Fleece Zip Hoodie",
      "vendor": "Example Brand",
      "product_type": "",
      "created_at": "2018-03-20T13:49:54-04:00",
      "handle": "american-apparel-flex-fleece-zip-hoodie",
      "updated_at": "2019-09-20T14:11:25-04:00",
      "published_at": "2018-03-20T13:46:55-04:00",
      "template_suffix": "",
      "published_scope": "web",
      "tags": "carthook_checkout, clothing",
      "admin_graphql_api_id": "gid://shopify/Product/562361892900",
      "variants": [
        {
          "id": 7162327597092,
          "product_id": 562361892900,
          "title": "Black",
          "price": "36.00",
          "sku": "AAFFZH-1",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": "45.00",
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "Black",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T13:49:54-04:00",
          "updated_at": "2019-12-19T15:10:50-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 1361,
          "image_id": 2155862786084,
          "weight": 3,
          "weight_unit": "lb",
          "inventory_item_id": 7159543824420,
          "inventory_quantity": -92,
          "old_inventory_quantity": -92,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162327597092"
        },
        {
          "id": 7162327629860,
          "product_id": 562361892900,
          "title": "Gray",
          "price": "36.00",
          "sku": "AAFFZH-2",
          "position": 2,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "Gray",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T13:49:54-04:00",
          "updated_at": "2018-09-27T13:05:00-04:00",
          "taxable": true,
          "barcode": "",
          "grams": 1361,
          "image_id": 2155863867428,
          "weight": 3,
          "weight_unit": "lb",
          "inventory_item_id": 7159543857188,
          "inventory_quantity": -6,
          "old_inventory_quantity": -6,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162327629860"
        },
        {
          "id": 7162327662628,
          "product_id": 562361892900,
          "title": "Lapis",
          "price": "36.00",
          "sku": "AAFFZH-3",
          "position": 3,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "Lapis",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T13:49:54-04:00",
          "updated_at": "2018-09-27T13:05:00-04:00",
          "taxable": true,
          "barcode": "",
          "grams": 1361,
          "image_id": 2155865604132,
          "weight": 3,
          "weight_unit": "lb",
          "inventory_item_id": 7159543889956,
          "inventory_quantity": -14,
          "old_inventory_quantity": -14,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162327662628"
        },
        {
          "id": 7162327695396,
          "product_id": 562361892900,
          "title": "Navy",
          "price": "36.00",
          "sku": "AAFFZH-4",
          "position": 4,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "Navy",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T13:49:54-04:00",
          "updated_at": "2018-11-19T19:09:31-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 1361,
          "image_id": 2155866128420,
          "weight": 3,
          "weight_unit": "lb",
          "inventory_item_id": 7159543922724,
          "inventory_quantity": -4,
          "old_inventory_quantity": -4,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162327695396"
        },
        {
          "id": 7162327728164,
          "product_id": 562361892900,
          "title": "White",
          "price": "36.00",
          "sku": "AAFFZH-5",
          "position": 5,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "White",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T13:49:54-04:00",
          "updated_at": "2018-09-27T13:05:01-04:00",
          "taxable": true,
          "barcode": "",
          "grams": 1361,
          "image_id": 2155866390564,
          "weight": 3,
          "weight_unit": "lb",
          "inventory_item_id": 7159543955492,
          "inventory_quantity": -18,
          "old_inventory_quantity": -18,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162327728164"
        }
      ],
      "options": [
        {
          "id": 832991428644,
          "product_id": 562361892900,
          "name": "Color",
          "position": 1,
          "values": [
            "Black",
            "Gray",
            "Lapis",
            "Navy",
            "White"
          ]
        }
      ],
      "images": [
        {
          "id": 2155862786084,
          "product_id": 562361892900,
          "position": 1,
          "created_at": "2018-03-20T14:01:48-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_Black_A.png?v=1573880385",
          "variant_ids": [
            7162327597092
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155862786084"
        },
        {
          "id": 2155863179300,
          "product_id": 562361892900,
          "position": 2,
          "created_at": "2018-03-20T14:01:50-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_Black_B.png?v=1573880385",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155863179300"
        },
        {
          "id": 2155863867428,
          "product_id": 562361892900,
          "position": 3,
          "created_at": "2018-03-20T14:01:54-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_Gray_A.png?v=1573880385",
          "variant_ids": [
            7162327629860
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155863867428"
        },
        {
          "id": 2155864948772,
          "product_id": 562361892900,
          "position": 4,
          "created_at": "2018-03-20T14:01:57-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_Gray_B.png?v=1573880385",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155864948772"
        },
        {
          "id": 2155865604132,
          "product_id": 562361892900,
          "position": 5,
          "created_at": "2018-03-20T14:02:01-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_Lapis_A.png?v=1573880385",
          "variant_ids": [
            7162327662628
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155865604132"
        },
        {
          "id": 2155865800740,
          "product_id": 562361892900,
          "position": 6,
          "created_at": "2018-03-20T14:02:04-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_Lapis_B.png?v=1573880385",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155865800740"
        },
        {
          "id": 2155866128420,
          "product_id": 562361892900,
          "position": 7,
          "created_at": "2018-03-20T14:02:06-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_Navy_A.png?v=1573880385",
          "variant_ids": [
            7162327695396
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155866128420"
        },
        {
          "id": 2155866259492,
          "product_id": 562361892900,
          "position": 8,
          "created_at": "2018-03-20T14:02:09-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_Navy_B.png?v=1573880385",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155866259492"
        },
        {
          "id": 2155866390564,
          "product_id": 562361892900,
          "position": 9,
          "created_at": "2018-03-20T14:02:11-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_White_A.png?v=1573880385",
          "variant_ids": [
            7162327728164
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155866390564"
        },
        {
          "id": 2155866554404,
          "product_id": 562361892900,
          "position": 10,
          "created_at": "2018-03-20T14:02:13-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_White_B.png?v=1573880385",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155866554404"
        }
      ],
      "image": {
        "id": 2155862786084,
        "product_id": 562361892900,
        "position": 1,
        "created_at": "2018-03-20T14:01:48-04:00",
        "updated_at": "2019-11-15T23:59:45-05:00",
        "alt": null,
        "width": 1528,
        "height": 1528,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/American_Apparel_Flex_Fleece_Zip_Hoodie_Black_A.png?v=1573880385",
        "variant_ids": [
          7162327597092
        ],
        "admin_graphql_api_id": "gid://shopify/ProductImage/2155862786084"
      },
      "metadata": {
        "purchased_quantity": "1"
      }
    }
  ],
  "metadata": {
    "shopify_customer": {
      "id": 589064699940,
      "email": "tester2@abovemarket.com",
      "accepts_marketing": false,
      "created_at": "2018-06-29T21:20:34-04:00",
      "updated_at": "2018-06-29T21:20:53-04:00",
      "first_name": "John",
      "last_name": "Erck",
      "orders_count": 0,
      "state": "disabled",
      "total_spent": "0.00",
      "last_order_id": null,
      "note": null,
      "verified_email": true,
      "multipass_identifier": null,
      "tax_exempt": false,
      "phone": null,
      "tags": "",
      "last_order_name": null,
      "currency": "USD",
      "addresses": [
        {
          "id": 679673036836,
          "customer_id": 589064699940,
          "first_name": "John",
          "last_name": "Erck",
          "company": null,
          "address1": "407 9th St. #101",
          "address2": "",
          "city": "Huntington Beach,",
          "province": "California",
          "country": "United States",
          "zip": "92648",
          "phone": null,
          "name": "John Erck",
          "province_code": "CA",
          "country_code": "US",
          "country_name": "United States",
          "default": true
        }
      ],
      "accepts_marketing_updated_at": "2019-01-06T16:59:46-05:00",
      "marketing_opt_in_level": null,
      "tax_exemptions": [],
      "admin_graphql_api_id": "gid://shopify/Customer/589064699940",
      "default_address": {
        "id": 679673036836,
        "customer_id": 589064699940,
        "first_name": "John",
        "last_name": "Erck",
        "company": null,
        "address1": "407 9th St. #101",
        "address2": "",
        "city": "Huntington Beach,",
        "province": "California",
        "country": "United States",
        "zip": "92648",
        "phone": null,
        "name": "John Erck",
        "province_code": "CA",
        "country_code": "US",
        "country_name": "United States",
        "default": true
      }
    }
  }
}
```

### 400 Bad Request

```json
{
  "error": "Missing required endpoint arg: shopify_customer_id"
}
```

---

# Collections (6.4KB)

Source: https://developers.rebuyengine.com/reference/collections.md

## GET /api/v1/products/collections

!!! note "Use Cases"
    Use this endpoint to offer recommendations and cross-sell opportunities from a specific collection such as sale items, high inventory items, etc.

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`shopify_collection_ids` · string
:   Comma separated list of Shopify Collection IDs.

`shopify_product_ids` · string
:   Comma separated list of Shopify product IDs to filter from the result set.

`smart_sort` · string
:   Valid values: yes, top_sellers. Sorts the returned products based on likelihood to convert / based on highest top-selling product to lowest top-selling product.

`metafields` · string
:   Valid values: yes. Returns product objects enriched with a metafields property.

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

`limit` · string · Default: `5`
:   Used to limit the number of returned results.

`filter_oos` · string · Default: `yes`
:   Excludes products that are out of stock (OOS) from the response. To include OOS products, set the parameter to no.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/products/collections
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  shopify_collection_ids: "YOUR_VALUE",
  shopify_product_ids: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/products/collections?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": 562407407652,
      "title": "100 Cotton T",
      "body_html": "100 Cotton T. Now dats wassup.",
      "vendor": "Example Brand",
      "product_type": "",
      "created_at": "2018-03-20T14:17:32-04:00",
      "handle": "hanes-100-cotton-t-shirt",
      "updated_at": "2021-01-06T10:51:08-05:00",
      "published_at": "2019-06-13T15:11:18-04:00",
      "template_suffix": "",
      "published_scope": "global",
      "tags": "clothing",
      "admin_graphql_api_id": "gid://shopify/Product/562407407652",
      "variants": [
        {
          "id": 7162542751780,
          "product_id": 562407407652,
          "title": "White",
          "price": "12.00",
          "sku": "H100CTS-1",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": "shopify",
          "option1": "White",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T14:17:33-04:00",
          "updated_at": "2020-11-16T16:55:57-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": 2155963711524,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 7159766548516,
          "inventory_quantity": -31,
          "old_inventory_quantity": -31,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162542751780"
        }
      ],
      "options": [
        {
          "id": 833049690148,
          "product_id": 562407407652,
          "name": "Color",
          "position": 1,
          "values": [
            "White"
          ]
        }
      ],
      "images": [
        {
          "id": 2155963711524,
          "product_id": 562407407652,
          "position": 1,
          "created_at": "2018-03-20T14:17:36-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_100__Cotton_T-shirt-white-A.png?v=1573880386",
          "variant_ids": [
            7162542751780
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155963711524"
        },
        {
          "id": 2155963744292,
          "product_id": 562407407652,
          "position": 2,
          "created_at": "2018-03-20T14:17:38-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_100__Cotton_T-shirt-white-B.png?v=1573880386",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155963744292"
        },
        {
          "id": 2155964530724,
          "product_id": 562407407652,
          "position": 3,
          "created_at": "2018-03-20T14:17:46-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_100__Cotton_T-shirt-yellow-A.png?v=1573880386",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155964530724"
        },
        {
          "id": 2155964629028,
          "product_id": 562407407652,
          "position": 4,
          "created_at": "2018-03-20T14:17:48-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_100__Cotton_T-shirt-yellow-B.png?v=1573880386",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155964629028"
        }
      ],
      "image": {
        "id": 2155963711524,
        "product_id": 562407407652,
        "position": 1,
        "created_at": "2018-03-20T14:17:36-04:00",
        "updated_at": "2019-11-15T23:59:46-05:00",
        "alt": null,
        "width": 1528,
        "height": 1528,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_100__Cotton_T-shirt-white-A.png?v=1573880386",
        "variant_ids": [
          7162542751780
        ],
        "admin_graphql_api_id": "gid://shopify/ProductImage/2155963711524"
      }
    }
  ]
}
```

### 400 Bad Request

```json
{
  "error": "Missing required endpoint arg: shopify_customer_id"
}
```

---

# Viewed (14.5KB)

Source: https://developers.rebuyengine.com/reference/viewed.md

## GET /api/v1/products/viewed

!!! note "Use Cases"
    When a customer (subject) views (action) a t-shirt (noun), this endpoint can be used to retrieve that information.


## How the /products/viewed Endpoint Works

If you have used the [analytics-2.0/event](rebuy-analytic-v2-endpoints.md) endpoint to submit data when a customer has viewed certain products, then this endpoint will return that data.

**Note:** The UUID should match the data previously sent to the [analytics-2.0/event](rebuy-analytic-v2-endpoints.md) endpoint.

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`shopify_customer_id` · string
:   Shopify Customer ID. If this value is not provided, then uuid needs to be provided. At least one of these two is required.

`uuid` · string
:   The 'Universally Unique Identifier' of the subject - the client is responsible for creating the token that represents the session. Example value: be6f5fab-32a4-43e5-967c-68017baa3aa5

`subject` · string
:   The subject of the event. Example value: user

`verb` · string
:   The action of the subject of the event. Example value: viewed

`metafields` · string
:   Valid values: yes. Returns product objects enriched with a metafields property.

`limit` · string · Default: `5`
:   Used to limit the number of returned results.

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

`country_code` · string
:   The ISO 3166-1 alpha-2 country code (e.g., `US`, `CA`, `GB`) corresponding to a Market region. Retrieves variant pricing from the Market’s catalog. The prices returned reflect the shop’s first active Market that matches the provided `country_code`. Only products included in that Market’s catalog will be returned in the response — products excluded from the catalog will not appear.

    **Required Shopify Scope:** `read_markets`

    Replaces the deprecated `presentment_prices` query parameter.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/products/viewed
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  shopify_customer_id: "YOUR_VALUE",
  uuid: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/products/viewed?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": 562396463140,
      "title": "Tri-Blend Full Zip T Hoodie",
      "body_html": "Tri-Blend Full Zip T Hoodie",
      "vendor": "Example Brand",
      "product_type": "",
      "created_at": "2018-03-20T14:09:51-04:00",
      "handle": "anvil-tri-blend-full-zip-t-shirt-hoodie",
      "updated_at": "2021-01-04T13:45:02-05:00",
      "published_at": "2018-03-20T14:08:11-04:00",
      "template_suffix": null,
      "published_scope": "web",
      "tags": "clothing",
      "admin_graphql_api_id": "gid://shopify/Product/562396463140",
      "variants": [
        {
          "id": 7162489372708,
          "product_id": 562396463140,
          "title": "Black",
          "price": "36.00",
          "sku": "ATBFZTSH-1",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "Black",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T14:09:51-04:00",
          "updated_at": "2021-01-04T13:42:55-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": 2155921604644,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 7159711072292,
          "inventory_quantity": -11,
          "old_inventory_quantity": -11,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162489372708"
        },
        {
          "id": 7162489405476,
          "product_id": 562396463140,
          "title": "Red",
          "price": "36.00",
          "sku": "ATBFZTSH-2",
          "position": 2,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "Red",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T14:09:51-04:00",
          "updated_at": "2020-05-01T14:43:57-04:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": 2155922227236,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 7159711105060,
          "inventory_quantity": -5,
          "old_inventory_quantity": -5,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162489405476"
        }
      ],
      "options": [
        {
          "id": 833036419108,
          "product_id": 562396463140,
          "name": "Color",
          "position": 1,
          "values": [
            "Black",
            "Red"
          ]
        }
      ],
      "images": [
        {
          "id": 2155921604644,
          "product_id": 562396463140,
          "position": 1,
          "created_at": "2018-03-20T14:09:55-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-black-A.png?v=1573880385",
          "variant_ids": [
            7162489372708
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155921604644"
        },
        {
          "id": 2155921801252,
          "product_id": 562396463140,
          "position": 2,
          "created_at": "2018-03-20T14:09:58-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-black-B.png?v=1573880385",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155921801252"
        },
        {
          "id": 2155922227236,
          "product_id": 562396463140,
          "position": 3,
          "created_at": "2018-03-20T14:10:02-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-red-A.png?v=1573880385",
          "variant_ids": [
            7162489405476
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155922227236"
        },
        {
          "id": 2155922620452,
          "product_id": 562396463140,
          "position": 4,
          "created_at": "2018-03-20T14:10:05-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-red-B.png?v=1573880385",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155922620452"
        }
      ],
      "image": {
        "id": 2155921604644,
        "product_id": 562396463140,
        "position": 1,
        "created_at": "2018-03-20T14:09:55-04:00",
        "updated_at": "2019-11-15T23:59:45-05:00",
        "alt": null,
        "width": 1528,
        "height": 1528,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-black-A.png?v=1573880385",
        "variant_ids": [
          7162489372708
        ],
        "admin_graphql_api_id": "gid://shopify/ProductImage/2155921604644"
      }
    },
    {
      "id": 4484976148516,
      "title": "Reversible Beanie",
      "body_html": "Classic Beanie",
      "vendor": "Example Brand",
      "product_type": "Beanie",
      "created_at": "2020-01-28T16:24:50-05:00",
      "handle": "beanie-reversible",
      "updated_at": "2020-12-17T15:09:30-05:00",
      "published_at": "2020-01-28T16:24:50-05:00",
      "template_suffix": "",
      "published_scope": "web",
      "tags": "clothing",
      "admin_graphql_api_id": "gid://shopify/Product/4484976148516",
      "variants": [
        {
          "id": 31628220530724,
          "product_id": 4484976148516,
          "title": "Default Title",
          "price": "24.00",
          "sku": "BEANIE1",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": "shopify",
          "option1": "Default Title",
          "option2": null,
          "option3": null,
          "created_at": "2020-01-28T16:24:50-05:00",
          "updated_at": "2020-12-17T15:09:30-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": null,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 33399558504484,
          "inventory_quantity": 100,
          "old_inventory_quantity": 100,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/31628220530724"
        }
      ],
      "options": [
        {
          "id": 5868992036900,
          "product_id": 4484976148516,
          "name": "Title",
          "position": 1,
          "values": [
            "Default Title"
          ]
        }
      ],
      "images": [
        {
          "id": 14057553854500,
          "product_id": 4484976148516,
          "position": 1,
          "created_at": "2020-01-28T16:25:05-05:00",
          "updated_at": "2020-01-28T16:25:05-05:00",
          "alt": null,
          "width": 600,
          "height": 600,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/reversible-beanie.jpg?v=1580246705",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/14057553854500"
        }
      ],
      "image": {
        "id": 14057553854500,
        "product_id": 4484976148516,
        "position": 1,
        "created_at": "2020-01-28T16:25:05-05:00",
        "updated_at": "2020-01-28T16:25:05-05:00",
        "alt": null,
        "width": 600,
        "height": 600,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/reversible-beanie.jpg?v=1580246705",
        "variant_ids": [],
        "admin_graphql_api_id": "gid://shopify/ProductImage/14057553854500"
      }
    },
    {
      "id": 562402787364,
      "title": "Dyenomite 100 Cotton Rainbow Tie-Dye T",
      "body_html": "Dyenomite 100 Cotton Rainbow Tie-Dye T",
      "vendor": "Example Brand",
      "product_type": "",
      "created_at": "2018-03-20T14:14:53-04:00",
      "handle": "dyenomite-100-cotton-rainbow-tie-dye-t-shirt",
      "updated_at": "2021-01-04T15:26:25-05:00",
      "published_at": "2021-01-04T12:28:38-05:00",
      "template_suffix": "",
      "published_scope": "web",
      "tags": "clothing",
      "admin_graphql_api_id": "gid://shopify/Product/562402787364",
      "variants": [
        {
          "id": 7162520731684,
          "product_id": 562402787364,
          "title": "Tie-Dye",
          "price": "10.00",
          "sku": "DCRTDTS",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": "shopify",
          "option1": "Tie-Dye",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T14:14:53-04:00",
          "updated_at": "2021-01-04T15:26:25-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": 2155950080036,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 7159743873060,
          "inventory_quantity": 1000,
          "old_inventory_quantity": 1000,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162520731684"
        }
      ],
      "options": [
        {
          "id": 833044185124,
          "product_id": 562402787364,
          "name": "Color",
          "position": 1,
          "values": [
            "Tie-Dye"
          ]
        }
      ],
      "images": [
        {
          "id": 2155950080036,
          "product_id": 562402787364,
          "position": 1,
          "created_at": "2018-03-20T14:14:58-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Dyenomite_100__Cotton_Rainbow_Tie-Dye_T-shirt-A.png?v=1573880386",
          "variant_ids": [
            7162520731684
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155950080036"
        },
        {
          "id": 2155950702628,
          "product_id": 562402787364,
          "position": 2,
          "created_at": "2018-03-20T14:15:06-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Dyenomite_100__Cotton_Rainbow_Tie-Dye_T-shirt-B.png?v=1573880386",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155950702628"
        }
      ],
      "image": {
        "id": 2155950080036,
        "product_id": 562402787364,
        "position": 1,
        "created_at": "2018-03-20T14:14:58-04:00",
        "updated_at": "2019-11-15T23:59:46-05:00",
        "alt": null,
        "width": 1528,
        "height": 1528,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Dyenomite_100__Cotton_Rainbow_Tie-Dye_T-shirt-A.png?v=1573880386",
        "variant_ids": [
          7162520731684
        ],
        "admin_graphql_api_id": "gid://shopify/ProductImage/2155950080036"
      }
    }
  ]
}
```

### 400 Bad Request

```json
{
  "error": "Missing required args. You must pass either shopify_customer_id or uuid."
}
```

---

# Static (9.6KB)

Source: https://developers.rebuyengine.com/reference/static.md

## GET /api/v1/products/static

!!! note "Use Cases"
    This endpoint is configured entirely by the client making the call.
    For example, pass two Shopify product IDs via **ids**, get two Shopify product objects returned.

!!! tip "Filtering Results"
    Use `shopify_product_ids` to filter the results based on context.

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`ids` · string
:   Comma separated list of Shopify product IDs to return. If omitted shopify_product_ids will be used in lieu of this argument.

`handles` · string
:   Comma separated list of Shopify product handles to return. If omitted shopify_product_ids will be used in lieu of this argument.

`shopify_product_ids` · string
:   Comma separated list of Shopify product IDs. This will filter the result set to retrieve Shopify data specifically for the listed product IDs

`shopify_collection_id` · string
:   Shopify collection ID. If provided, products belonging to this collection will be returned.

`excluded_ids` · string
:   Comma separated list of Shopify product IDs. Any IDs provided in this list will be excluded from the result set, ensuring they are not included in the response.

`metafields` · string
:   Valid values: yes. Returns product objects enriched with a metafields property.

`filter_oos` · string
:   Excludes products that are out of stock (OOS) from the response. To include OOS products, set the parameter to equal no.

`filter_unpublished` · string
:   Valid values: yes. Excludes products that aren't published.

`bust_cache` · string
:   Valid values: yes. Deletes cached response and generates a new one.

`limit` · string · Default: `5`
:   Used to limit the number of returned results.

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

`selling_plans` · string
:   Valid values: yes. Retrieves selling plans for product objects with an enriched `variant.selling_plan_allocations` property.

`country_code` · string
:   The ISO 3166-1 alpha-2 country code (e.g., `US`, `CA`, `GB`) corresponding to a Market region. Retrieves variant pricing from the Market’s catalog. The prices returned reflect the shop’s first active Market that matches the provided `country_code`. Only products included in that Market’s catalog will be returned in the response — products excluded from the catalog will not appear.

    **Required Shopify Scope:** `read_markets`

    Replaces the deprecated `presentment_prices` query parameter.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/products/static
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  ids: "YOUR_VALUE",
  handles: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/products/static?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": 1058469249060,
      "title": "Caesar Dressing",
      "body_html": "Longing for a taste-fulfilling Caesar that you can feel good about? Look no further than our dairy-free Caesar Dressing.",
      "vendor": "Primal Kitchen",
      "product_type": "Salad Dressing",
      "created_at": "2018-12-14T15:49:57-05:00",
      "handle": "caesar-dressing",
      "updated_at": "2019-01-31T22:47:22-05:00",
      "published_at": "2018-12-14T15:49:54-05:00",
      "template_suffix": null,
      "tags": "cage-free-eggs, certified-gluten-free, dairy-free, Keto, keto-product-tag, paleo_friendly, soy-canola-free, sugar-free, Whole30, whole30-approved",
      "published_scope": "web",
      "admin_graphql_api_id": "gid://shopify/Product/1058469249060",
      "variants": [
        {
          "id": 9896966455332,
          "product_id": 1058469249060,
          "title": "8 oz",
          "price": "7.95",
          "sku": "PKDRESS-CAE1",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "8 oz",
          "option2": null,
          "option3": null,
          "created_at": "2018-12-14T15:49:57-05:00",
          "updated_at": "2019-01-31T22:47:22-05:00",
          "taxable": false,
          "barcode": "",
          "grams": 544,
          "image_id": null,
          "weight": 1.1993,
          "weight_unit": "lb",
          "inventory_item_id": 10737418764324,
          "inventory_quantity": -1,
          "old_inventory_quantity": -1,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/9896966455332"
        }
      ],
      "options": [
        {
          "id": 1868270731300,
          "product_id": 1058469249060,
          "name": "Size",
          "position": 1,
          "values": [
            "8 oz"
          ]
        }
      ],
      "images": [
        {
          "id": 3865687621668,
          "product_id": 1058469249060,
          "position": 1,
          "created_at": "2018-12-14T15:49:57-05:00",
          "updated_at": "2018-12-14T15:49:57-05:00",
          "alt": null,
          "width": 2048,
          "height": 2048,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Caesar.jpg?v=1544820597",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/3865687621668"
        },
        {
          "id": 3865687654436,
          "product_id": 1058469249060,
          "position": 2,
          "created_at": "2018-12-14T15:49:57-05:00",
          "updated_at": "2018-12-14T15:49:57-05:00",
          "alt": null,
          "width": 2048,
          "height": 2048,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Caesar_3Pack.jpg?v=1544820597",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/3865687654436"
        }
      ],
      "image": {
        "id": 3865687621668,
        "product_id": 1058469249060,
        "position": 1,
        "created_at": "2018-12-14T15:49:57-05:00",
        "updated_at": "2018-12-14T15:49:57-05:00",
        "alt": null,
        "width": 2048,
        "height": 2048,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Caesar.jpg?v=1544820597",
        "variant_ids": [],
        "admin_graphql_api_id": "gid://shopify/ProductImage/3865687621668"
      }
    },
    {
      "id": 1058468429860,
      "title": "OLD - Coconut Cashew Collagen Protein Bar",
      "body_html": "Cashews and roasted pumpkin seeds satisfy with a nutty crunch, while creamy coconut adds a hint of sweetness.",
      "vendor": "Primal Kitchen",
      "product_type": "Collagen Nut & Seed Bar",
      "created_at": "2018-12-14T15:49:27-05:00",
      "handle": "coconut-cashew-bar",
      "updated_at": "2018-12-14T15:49:27-05:00",
      "published_at": null,
      "template_suffix": null,
      "tags": "15g-protein, 3g-sugar, 6-8g-fiber, Bars, Collagen, dairy-whey-free, gluten-free, paleo-approved, Sold Out, soy-free",
      "published_scope": "web",
      "admin_graphql_api_id": "gid://shopify/Product/1058468429860",
      "variants": [
        {
          "id": 9896965701668,
          "product_id": 1058468429860,
          "title": "12-Pack",
          "price": "35.95",
          "sku": "PKBAR-CCO12",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": "shopify",
          "option1": "12-Pack",
          "option2": null,
          "option3": null,
          "created_at": "2018-12-14T15:49:27-05:00",
          "updated_at": "2018-12-14T15:49:27-05:00",
          "taxable": false,
          "barcode": "",
          "grams": 726,
          "image_id": null,
          "weight": 1.6006,
          "weight_unit": "lb",
          "inventory_item_id": 10737415913508,
          "inventory_quantity": 0,
          "old_inventory_quantity": 0,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/9896965701668"
        }
      ],
      "options": [
        {
          "id": 1868269322276,
          "product_id": 1058468429860,
          "name": "Size",
          "position": 1,
          "values": [
            "12-Pack"
          ]
        }
      ],
      "images": [
        {
          "id": 3865685753892,
          "product_id": 1058468429860,
          "position": 1,
          "created_at": "2018-12-14T15:49:27-05:00",
          "updated_at": "2018-12-14T15:49:27-05:00",
          "alt": null,
          "width": 1080,
          "height": 1080,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/ccoold.png?v=1544820567",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/3865685753892"
        }
      ],
      "image": {
        "id": 3865685753892,
        "product_id": 1058468429860,
        "position": 1,
        "created_at": "2018-12-14T15:49:27-05:00",
        "updated_at": "2018-12-14T15:49:27-05:00",
        "alt": null,
        "width": 1080,
        "height": 1080,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/ccoold.png?v=1544820567",
        "variant_ids": [],
        "admin_graphql_api_id": "gid://shopify/ProductImage/3865685753892"
      }
    }
  ]
}
```

---

# Similar Products (10.6KB)

Source: https://developers.rebuyengine.com/reference/similar-products.md

## GET /api/v1/products/similar_products

!!! note "Use Cases"
    Use this endpoint to find products that are similar. For example, if a customer is buying Product A, use this endpoint to surface and suggest similar products B & C.

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`shopify_product_ids` · string
:   Shopify product id that you'd like similar products for.

`limit` · string · Default: `5`
:   Used to limit the number of products returned.

`country_code` · string
:   The ISO 3166-1 alpha-2 country code (e.g., `US`, `CA`, `GB`) corresponding to a Market region. Retrieves variant pricing from the Market’s catalog. The prices returned reflect the shop’s first active Market that matches the provided `country_code`. Only products included in that Market’s catalog will be returned in the response — products excluded from the catalog will not appear.

    **Required Shopify Scope:** `read_markets`

    Replaces the deprecated `presentment_prices` query parameter.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/products/similar_products
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  shopify_product_ids: "YOUR_VALUE",
  limit: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/products/similar_products?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "admin_graphql_api_id": "gid://shopify/Product/562405015588",
      "body_html": "50/50 T + FREE SWAG AND SHIPPING!!$Yes$#<br>",
      "created_at": "2018-03-20T18:16:12Z",
      "description": "50/50 T + FREE SWAG AND SHIPPING!!$Yes$#",
      "handle": "hanes-50-50-t-shirt",
      "id": 562405015588,
      "image": {
        "admin_graphql_api_id": "gid://shopify/ProductImage/2155956699172",
        "alt": null,
        "height": 1528,
        "id": 2155956699172,
        "position": 1,
        "product_id": 562405015588,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-lime-A.png?v=1573880386",
        "variant_ids": [
          7162531512356
        ],
        "width": 1528
      },
      "images": [
        {
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155956699172",
          "alt": null,
          "height": 1528,
          "id": 2155956699172,
          "position": 1,
          "product_id": 562405015588,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-lime-A.png?v=1573880386",
          "variant_ids": [
            7162531512356
          ],
          "width": 1528
        },
        {
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155957157924",
          "alt": null,
          "height": 1528,
          "id": 2155957157924,
          "position": 2,
          "product_id": 562405015588,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-lime-B.png?v=1573880386",
          "variant_ids": [],
          "width": 1528
        },
        {
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155957387300",
          "alt": null,
          "height": 1528,
          "id": 2155957387300,
          "position": 3,
          "product_id": 562405015588,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-yellow-A.png?v=1573880386",
          "variant_ids": [
            7162531545124
          ],
          "width": 1528
        },
        {
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155957583908",
          "alt": null,
          "height": 1528,
          "id": 2155957583908,
          "position": 4,
          "product_id": 562405015588,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-yellow-B.png?v=1573880386",
          "variant_ids": [],
          "width": 1528
        }
      ],
      "options": [
        {
          "id": 833046904868,
          "name": "Color",
          "position": 1,
          "product_id": 562405015588,
          "values": [
            "Lime",
            "Yellow"
          ]
        },
        {
          "id": 9306242121764,
          "name": "Size",
          "position": 2,
          "product_id": 562405015588,
          "values": [
            "Small",
            "Medium",
            "Large"
          ]
        }
      ],
      "product_type": "Arts & Entertainment",
      "published_at": "1970-01-01T00:00:00Z",
      "status": "draft",
      "tags": "clothing,shirt",
      "template_suffix": "",
      "title": "50/50 T - Maybe The Best T Shirt On The Marketd",
      "updated_at": "2022-07-05T19:37:31Z",
      "vendor": "Example Brand",
      "variants": [
        {
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162531512356",
          "barcode": "",
          "compare_at_price": "12.00",
          "created_at": "2018-03-20T18:16:12Z",
          "fulfillment_service": "manual",
          "grams": 0,
          "id": 7162531512356,
          "image_id": 2155956699172,
          "inventory_management": "shopify",
          "inventory_policy": "deny",
          "inventory_quantity": 0,
          "metafields": [],
          "option1": "Lime",
          "option2": "Small",
          "option3": null,
          "position": 1,
          "price": "10.00",
          "product_id": 562405015588,
          "requires_shipping": true,
          "sku": "H5050TS-1",
          "tax_code": null,
          "taxable": true,
          "title": "Lime / Small",
          "updated_at": "2022-07-05T19:37:31Z",
          "weight": 0,
          "weight_unit": "pounds"
        },
        {
          "admin_graphql_api_id": "gid://shopify/ProductVariant/40322979135524",
          "barcode": "",
          "compare_at_price": "12.00",
          "created_at": "2022-07-05T19:37:31Z",
          "fulfillment_service": "manual",
          "grams": 0,
          "id": 40322979135524,
          "image_id": null,
          "inventory_management": "shopify",
          "inventory_policy": "deny",
          "inventory_quantity": 0,
          "metafields": [],
          "option1": "Lime",
          "option2": "Medium",
          "option3": null,
          "position": 2,
          "price": "10.00",
          "product_id": 562405015588,
          "requires_shipping": true,
          "sku": "",
          "tax_code": null,
          "taxable": true,
          "title": "Lime / Medium",
          "updated_at": "2022-07-05T19:37:31Z",
          "weight": 0,
          "weight_unit": "pounds"
        },
        {
          "admin_graphql_api_id": "gid://shopify/ProductVariant/40322979168292",
          "barcode": "",
          "compare_at_price": "12.00",
          "created_at": "2022-07-05T19:37:31Z",
          "fulfillment_service": "manual",
          "grams": 0,
          "id": 40322979168292,
          "image_id": null,
          "inventory_management": "shopify",
          "inventory_policy": "deny",
          "inventory_quantity": 0,
          "metafields": [],
          "option1": "Lime",
          "option2": "Large",
          "option3": null,
          "position": 3,
          "price": "10.00",
          "product_id": 562405015588,
          "requires_shipping": true,
          "sku": "",
          "tax_code": null,
          "taxable": true,
          "title": "Lime / Large",
          "updated_at": "2022-07-05T19:37:31Z",
          "weight": 0,
          "weight_unit": "pounds"
        },
        {
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162531545124",
          "barcode": "",
          "compare_at_price": null,
          "created_at": "2018-03-20T18:16:12Z",
          "fulfillment_service": "manual",
          "grams": 0,
          "id": 7162531545124,
          "image_id": 2155957387300,
          "inventory_management": "shopify",
          "inventory_policy": "continue",
          "inventory_quantity": -2,
          "metafields": [],
          "option1": "Yellow",
          "option2": "Small",
          "option3": null,
          "position": 4,
          "price": "8.00",
          "product_id": 562405015588,
          "requires_shipping": true,
          "sku": "H5050TS-2",
          "tax_code": null,
          "taxable": true,
          "title": "Yellow / Small",
          "updated_at": "2022-07-05T19:37:31Z",
          "weight": 0,
          "weight_unit": "pounds"
        },
        {
          "admin_graphql_api_id": "gid://shopify/ProductVariant/40322979201060",
          "barcode": "",
          "compare_at_price": "12.00",
          "created_at": "2022-07-05T19:37:31Z",
          "fulfillment_service": "manual",
          "grams": 0,
          "id": 40322979201060,
          "image_id": null,
          "inventory_management": "shopify",
          "inventory_policy": "deny",
          "inventory_quantity": 0,
          "metafields": [],
          "option1": "Yellow",
          "option2": "Medium",
          "option3": null,
          "position": 5,
          "price": "10.00",
          "product_id": 562405015588,
          "requires_shipping": true,
          "sku": "",
          "tax_code": null,
          "taxable": true,
          "title": "Yellow / Medium",
          "updated_at": "2022-07-05T19:37:31Z",
          "weight": 0,
          "weight_unit": "pounds"
        },
        {
          "admin_graphql_api_id": "gid://shopify/ProductVariant/40322979233828",
          "barcode": "",
          "compare_at_price": "12.00",
          "created_at": "2022-07-05T19:37:31Z",
          "fulfillment_service": "manual",
          "grams": 0,
          "id": 40322979233828,
          "image_id": null,
          "inventory_management": "shopify",
          "inventory_policy": "deny",
          "inventory_quantity": 0,
          "metafields": [],
          "option1": "Yellow",
          "option2": "Large",
          "option3": null,
          "position": 6,
          "price": "10.00",
          "product_id": 562405015588,
          "requires_shipping": true,
          "sku": "",
          "tax_code": null,
          "taxable": true,
          "title": "Yellow / Large",
          "updated_at": "2022-07-05T19:37:31Z",
          "weight": 0,
          "weight_unit": "pounds"
        }
      ],
      "owner": "45"
    }
  ]
}
```

### 400 Bad Request

```json
{
  "error": "Invalid key"
}
```

---

# Complementary to Viewed (14.5KB)

Source: https://developers.rebuyengine.com/reference/complementary-to-viewed.md

## GET /api/v1/products/viewed-related

!!! note "Use Cases"
    When a customer (subject) views (action) a t-shirt (noun), this endpoint can be used to retrieve information related to that information.


## How the /products/viewed-related Endpoint Works

If you have used the [analytics-2.0/event](rebuy-analytic-v2-endpoints.md) endpoint to submit data when a customer has viewed certain products, then this endpoint will return data related to that data.

**Note:** The UUID should match the data previously sent to the [analytics-2.0/event](rebuy-analytic-v2-endpoints.md) endpoint.

<br />

***

<br />

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`shopify_customer_id` · string
:   Shopify Customer ID. If this value is not provided, then uuid needs to be provided. At least one of these two is required.

`uuid` · string
:   The 'Universally Unique Identifier' of the subject - the client is responsible for creating the token that represents the session. Example value: be6f5fab-32a4-43e5-967c-68017baa3aa5

`subject` · string
:   The subject of the event. Example value: user

`verb` · string
:   The action of the subject of the event. Example value: viewed

`metafields` · string
:   Valid values: yes. Returns product objects enriched with a metafields property.

`limit` · string · Default: `5`
:   Used to limit the number of returned results.

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

`country_code` · string
:   The ISO 3166-1 alpha-2 country code (e.g., `US`, `CA`, `GB`) corresponding to a Market region. Retrieves variant pricing from the Market’s catalog. The prices returned reflect the shop’s first active Market that matches the provided `country_code`. Only products included in that Market’s catalog will be returned in the response — products excluded from the catalog will not appear.

    **Required Shopify Scope:** `read_markets`

    Replaces the deprecated `presentment_prices` query parameter.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/products/viewed-related
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  shopify_customer_id: "YOUR_VALUE",
  uuid: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/products/viewed-related?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": 562396463140,
      "title": "Tri-Blend Full Zip T Hoodie",
      "body_html": "Tri-Blend Full Zip T Hoodie",
      "vendor": "Example Brand",
      "product_type": "",
      "created_at": "2018-03-20T14:09:51-04:00",
      "handle": "anvil-tri-blend-full-zip-t-shirt-hoodie",
      "updated_at": "2021-01-04T13:45:02-05:00",
      "published_at": "2018-03-20T14:08:11-04:00",
      "template_suffix": null,
      "published_scope": "web",
      "tags": "clothing",
      "admin_graphql_api_id": "gid://shopify/Product/562396463140",
      "variants": [
        {
          "id": 7162489372708,
          "product_id": 562396463140,
          "title": "Black",
          "price": "36.00",
          "sku": "ATBFZTSH-1",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "Black",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T14:09:51-04:00",
          "updated_at": "2021-01-04T13:42:55-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": 2155921604644,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 7159711072292,
          "inventory_quantity": -11,
          "old_inventory_quantity": -11,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162489372708"
        },
        {
          "id": 7162489405476,
          "product_id": 562396463140,
          "title": "Red",
          "price": "36.00",
          "sku": "ATBFZTSH-2",
          "position": 2,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "Red",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T14:09:51-04:00",
          "updated_at": "2020-05-01T14:43:57-04:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": 2155922227236,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 7159711105060,
          "inventory_quantity": -5,
          "old_inventory_quantity": -5,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162489405476"
        }
      ],
      "options": [
        {
          "id": 833036419108,
          "product_id": 562396463140,
          "name": "Color",
          "position": 1,
          "values": [
            "Black",
            "Red"
          ]
        }
      ],
      "images": [
        {
          "id": 2155921604644,
          "product_id": 562396463140,
          "position": 1,
          "created_at": "2018-03-20T14:09:55-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-black-A.png?v=1573880385",
          "variant_ids": [
            7162489372708
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155921604644"
        },
        {
          "id": 2155921801252,
          "product_id": 562396463140,
          "position": 2,
          "created_at": "2018-03-20T14:09:58-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-black-B.png?v=1573880385",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155921801252"
        },
        {
          "id": 2155922227236,
          "product_id": 562396463140,
          "position": 3,
          "created_at": "2018-03-20T14:10:02-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-red-A.png?v=1573880385",
          "variant_ids": [
            7162489405476
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155922227236"
        },
        {
          "id": 2155922620452,
          "product_id": 562396463140,
          "position": 4,
          "created_at": "2018-03-20T14:10:05-04:00",
          "updated_at": "2019-11-15T23:59:45-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-red-B.png?v=1573880385",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155922620452"
        }
      ],
      "image": {
        "id": 2155921604644,
        "product_id": 562396463140,
        "position": 1,
        "created_at": "2018-03-20T14:09:55-04:00",
        "updated_at": "2019-11-15T23:59:45-05:00",
        "alt": null,
        "width": 1528,
        "height": 1528,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Anvil_Tri-Blend_Full_Zip_T-shirt_Hoodie-black-A.png?v=1573880385",
        "variant_ids": [
          7162489372708
        ],
        "admin_graphql_api_id": "gid://shopify/ProductImage/2155921604644"
      }
    },
    {
      "id": 4484976148516,
      "title": "Reversible Beanie",
      "body_html": "Classic Beanie",
      "vendor": "Example Brand",
      "product_type": "Beanie",
      "created_at": "2020-01-28T16:24:50-05:00",
      "handle": "beanie-reversible",
      "updated_at": "2020-12-17T15:09:30-05:00",
      "published_at": "2020-01-28T16:24:50-05:00",
      "template_suffix": "",
      "published_scope": "web",
      "tags": "clothing",
      "admin_graphql_api_id": "gid://shopify/Product/4484976148516",
      "variants": [
        {
          "id": 31628220530724,
          "product_id": 4484976148516,
          "title": "Default Title",
          "price": "24.00",
          "sku": "BEANIE1",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": "shopify",
          "option1": "Default Title",
          "option2": null,
          "option3": null,
          "created_at": "2020-01-28T16:24:50-05:00",
          "updated_at": "2020-12-17T15:09:30-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": null,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 33399558504484,
          "inventory_quantity": 100,
          "old_inventory_quantity": 100,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/31628220530724"
        }
      ],
      "options": [
        {
          "id": 5868992036900,
          "product_id": 4484976148516,
          "name": "Title",
          "position": 1,
          "values": [
            "Default Title"
          ]
        }
      ],
      "images": [
        {
          "id": 14057553854500,
          "product_id": 4484976148516,
          "position": 1,
          "created_at": "2020-01-28T16:25:05-05:00",
          "updated_at": "2020-01-28T16:25:05-05:00",
          "alt": null,
          "width": 600,
          "height": 600,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/reversible-beanie.jpg?v=1580246705",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/14057553854500"
        }
      ],
      "image": {
        "id": 14057553854500,
        "product_id": 4484976148516,
        "position": 1,
        "created_at": "2020-01-28T16:25:05-05:00",
        "updated_at": "2020-01-28T16:25:05-05:00",
        "alt": null,
        "width": 600,
        "height": 600,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/reversible-beanie.jpg?v=1580246705",
        "variant_ids": [],
        "admin_graphql_api_id": "gid://shopify/ProductImage/14057553854500"
      }
    },
    {
      "id": 562402787364,
      "title": "Dyenomite 100 Cotton Rainbow Tie-Dye T",
      "body_html": "Dyenomite 100 Cotton Rainbow Tie-Dye T",
      "vendor": "Example Brand",
      "product_type": "",
      "created_at": "2018-03-20T14:14:53-04:00",
      "handle": "dyenomite-100-cotton-rainbow-tie-dye-t-shirt",
      "updated_at": "2021-01-04T15:26:25-05:00",
      "published_at": "2021-01-04T12:28:38-05:00",
      "template_suffix": "",
      "published_scope": "web",
      "tags": "clothing",
      "admin_graphql_api_id": "gid://shopify/Product/562402787364",
      "variants": [
        {
          "id": 7162520731684,
          "product_id": 562402787364,
          "title": "Tie-Dye",
          "price": "10.00",
          "sku": "DCRTDTS",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": "shopify",
          "option1": "Tie-Dye",
          "option2": null,
          "option3": null,
          "created_at": "2018-03-20T14:14:53-04:00",
          "updated_at": "2021-01-04T15:26:25-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": 2155950080036,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 7159743873060,
          "inventory_quantity": 1000,
          "old_inventory_quantity": 1000,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/7162520731684"
        }
      ],
      "options": [
        {
          "id": 833044185124,
          "product_id": 562402787364,
          "name": "Color",
          "position": 1,
          "values": [
            "Tie-Dye"
          ]
        }
      ],
      "images": [
        {
          "id": 2155950080036,
          "product_id": 562402787364,
          "position": 1,
          "created_at": "2018-03-20T14:14:58-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Dyenomite_100__Cotton_Rainbow_Tie-Dye_T-shirt-A.png?v=1573880386",
          "variant_ids": [
            7162520731684
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155950080036"
        },
        {
          "id": 2155950702628,
          "product_id": 562402787364,
          "position": 2,
          "created_at": "2018-03-20T14:15:06-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Dyenomite_100__Cotton_Rainbow_Tie-Dye_T-shirt-B.png?v=1573880386",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155950702628"
        }
      ],
      "image": {
        "id": 2155950080036,
        "product_id": 562402787364,
        "position": 1,
        "created_at": "2018-03-20T14:14:58-04:00",
        "updated_at": "2019-11-15T23:59:46-05:00",
        "alt": null,
        "width": 1528,
        "height": 1528,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Dyenomite_100__Cotton_Rainbow_Tie-Dye_T-shirt-A.png?v=1573880386",
        "variant_ids": [
          7162520731684
        ],
        "admin_graphql_api_id": "gid://shopify/ProductImage/2155950080036"
      }
    }
  ]
}
```

### 400 - Bad Request

```json
{
  "error": "Missing required args. You must pass either shopify_customer_id or uuid."
}
```

---

# Custom Endpoints (22.8KB)

Source: https://developers.rebuyengine.com/reference/api-custom-endpoints.md

## GET /api/v1/custom/id/{ruleset_id}

!!! note "Requirements"
    To use this endpoint you must add a valid **ruleset ID** to */api/v1/custom/id/{ruleset_id}*


## Using Rebuy's GUI

You can use our **GET /api/v1/custom/id/{ruleset_id}** endpoint through our Graphical User Interface (GUI). We allow access to this feature with what we call **data sources**. In data sources, you can create a set of conditional rules (ie. a ruleset). If those conditions are met by one of your customers, this endpoint will return them a list of products.

Once created, data sources can be applied to power widgets. However, this page doesn't go into detail on how to create and use widgets.

### Navigating to the Data Source Editor

First, log into [Rebuy Engine](https://rebuyengine.com).

In the left navigation bar, select **Data Sources**

![The Rebuy Data Source Editor](../assets/images/data_sources.png "The Rebuy Data Source Editor")

### Creating Rulesets

To create a ruleset, select the **Create Ruleset** button.

![The creation of a new ruleset in the data source editor](../assets/images/ruleset_blank.png "The creation of a new ruleset in the data source editor.")

After creating a ruleset, you can set your first rule. Rulesets can be powered by only one rule, or you can choose to stack multiple rules for further customization.

![Multiple example rules in the data source editor](../assets/images/ruleset_add_rule.png "Multiple example rules in the data source editor.")

For each rule block, there is an **"IF"** condition and a **"RETURN"** statement.

![An example if and return block in the data source editor](../assets/images/rule_if_and_return_blank.png "An example if and return block in the data source editor.")

#### "IF" conditions

For each "IF" condition, you define parameters that can tell us when a certain condition is met.

![The if block and associated operator dropdown in the data source editor](../assets/images/rule_if_parameters.png "The if block and associated operator dropdown in the data source editor.")

This is where our GUI and endpoint synchronize so well. At this stage, you are literally defining what information you are sending to our API.

You can make your "IF" condition more complex if you add **"AND IF"** or **"OR IF"** statements into the rule.

![The more complex or if block and and if mutator options in the data source editor](../assets/images/rule_if_complex.png "The more complex or if block and and if mutator options in the data source editor.")

#### "RETURN" statements

For each "RETURN" Statement, you define parameters that can tell our API what to return to your customer. This is another area where our GUI and endpoint synchronize so well. At this stage, you are literally defining what information you are receiving from our API.

![The return block and associated dropdown in the data source editor](../assets/images/rule_return_parameters.png "The return block and associated dropdown in the data source editor.")

You can make your "RETURN" statements more complex if you add "AND" statements into the rule.

![The more complex and mutator option within the return block in the data source editor](../assets/images/rule_return_complex.png "The more complex and mutator option within the return block in the data source editor.")

### Example Data Sources

Below you will find some great ways that our clients have effectively used this feature.

### The associated upsell

In the example below, if the grooming kit is chosen by the customer, we will display them some essentials that go along with the kit. In other words, your shop is ready to sell them a product and as a result we want to upsell them another product.

![An example of a ruleset where a pro shave kit is selected](../assets/images/grooming_plus_sunscription_minus_upsell_blank.png "An example of a ruleset where a pro shave kit")

## More Reading

* [Read more on Data Sources](https://help.rebuyengine.com/en/collections/3401117-data-sources)
* [Read more on Widgets](https://help.rebuyengine.com/en/?q=widgets)

Read more on widgets

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`shopify_product_ids` · string
:   Comma separated list of Shopify product IDs. Also used if only passing up single product ID. <hr> Allows for product level rules in your Data Source

`shopify_variant_ids` · string
:   Comma separated list of Shopify variant IDs of a product. Also used if only passing up single variant ID. <hr> Allows for variant level rules in your Data Source.

`shopify_customer_id` · string
:   The Customer ID of the Shopify user.

`cart_subtotal` · string
:   The total cost of items inside the cart.

`cart_line_count` · string
:   A single line in an order. There is one line item for each product variant.

`cart_item_count` · string
:   The number of items inside the cart.

`metafields` · string
:   Valid values: yes. Returns product objects enriched with a metafields property.

`variant_metafields` · string
:   Valid values: yes. Returns product variant objects enriched with a metafields property.

`time` · string
:   The day of the user. This can be a unix timestamp or match any RFC time standard.

`limit` · string
:   Used to limit the number of results returned.

`uuid` · string
:   The 'Universally Unique Identifier' of the subject - the client is responsible for creating the token that represents the session. Example value: be6f5fab-32a4-43e5-967c-68017baa3aa5

`url` · string
:   A value to be searched and matched within a URL. Example: beanie-reversible

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

`country_code` · string
:   The ISO 3166-1 alpha-2 country code (e.g., `US`, `CA`, `GB`) corresponding to a Market region. Retrieves variant pricing from the Market’s catalog. The prices returned reflect the shop’s first active Market that matches the provided `country_code`. Only products included in that Market’s catalog will be returned in the response — products excluded from the catalog will not appear.

    **Required Shopify Scope:** `read_markets`

    Replaces the deprecated `presentment_prices` query parameter.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/custom/id/{ RULESET_ID }
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  shopify_product_ids: "YOUR_VALUE",
  shopify_variant_ids: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/custom/id/{ RULESET_ID }?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": 4484974870564,
      "title": "Classic Beanie",
      "body_html": "Keep your head warm and look good doing it! Comfortable rib knitted hat in soft acrylic. Double yarn gives it a marbled look. Small folded leather logo on the side.",
      "vendor": "Example Brand",
      "product_type": "Beanie",
      "created_at": "2020-01-28T16:23:44-05:00",
      "handle": "beanie-classic",
      "updated_at": "2020-08-20T16:55:58-04:00",
      "published_at": "2020-01-28T16:23:44-05:00",
      "template_suffix": "",
      "published_scope": "web",
      "tags": "clothing",
      "admin_graphql_api_id": "gid://shopify/Product/4484974870564",
      "variants": [
        {
          "id": 31628219449380,
          "product_id": 4484974870564,
          "title": "Default Title",
          "price": "24.00",
          "sku": "BEANIE1",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": null,
          "option1": "Default Title",
          "option2": null,
          "option3": null,
          "created_at": "2020-01-28T16:23:45-05:00",
          "updated_at": "2020-08-20T16:51:01-04:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": null,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 33399553163300,
          "inventory_quantity": -26,
          "old_inventory_quantity": -26,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/31628219449380"
        }
      ],
      "options": [
        {
          "id": 5868989841444,
          "product_id": 4484974870564,
          "name": "Title",
          "position": 1,
          "values": [
            "Default Title"
          ]
        }
      ],
      "images": [
        {
          "id": 14057549561892,
          "product_id": 4484974870564,
          "position": 1,
          "created_at": "2020-01-28T16:24:01-05:00",
          "updated_at": "2020-01-28T16:24:01-05:00",
          "alt": null,
          "width": 600,
          "height": 600,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/classic-beanie.jpg?v=1580246641",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/14057549561892"
        }
      ],
      "image": {
        "id": 14057549561892,
        "product_id": 4484974870564,
        "position": 1,
        "created_at": "2020-01-28T16:24:01-05:00",
        "updated_at": "2020-01-28T16:24:01-05:00",
        "alt": null,
        "width": 600,
        "height": 600,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/classic-beanie.jpg?v=1580246641",
        "variant_ids": [],
        "admin_graphql_api_id": "gid://shopify/ProductImage/14057549561892"
      }
    },
    {
      "id": 4484976148516,
      "title": "Reversible Beanie",
      "body_html": "Classic Beanie",
      "vendor": "Example Brand",
      "product_type": "Beanie",
      "created_at": "2020-01-28T16:24:50-05:00",
      "handle": "beanie-reversible",
      "updated_at": "2020-12-17T15:09:30-05:00",
      "published_at": "2020-01-28T16:24:50-05:00",
      "template_suffix": "",
      "published_scope": "web",
      "tags": "clothing",
      "admin_graphql_api_id": "gid://shopify/Product/4484976148516",
      "variants": [
        {
          "id": 31628220530724,
          "product_id": 4484976148516,
          "title": "Default Title",
          "price": "24.00",
          "sku": "BEANIE1",
          "position": 1,
          "inventory_policy": "deny",
          "compare_at_price": null,
          "fulfillment_service": "manual",
          "inventory_management": "shopify",
          "option1": "Default Title",
          "option2": null,
          "option3": null,
          "created_at": "2020-01-28T16:24:50-05:00",
          "updated_at": "2020-12-17T15:09:30-05:00",
          "taxable": true,
          "barcode": "",
          "grams": 0,
          "image_id": null,
          "weight": 0,
          "weight_unit": "lb",
          "inventory_item_id": 33399558504484,
          "inventory_quantity": 100,
          "old_inventory_quantity": 100,
          "requires_shipping": true,
          "admin_graphql_api_id": "gid://shopify/ProductVariant/31628220530724"
        }
      ],
      "options": [
        {
          "id": 5868992036900,
          "product_id": 4484976148516,
          "name": "Title",
          "position": 1,
          "values": [
            "Default Title"
          ]
        }
      ],
      "images": [
        {
          "id": 14057553854500,
          "product_id": 4484976148516,
          "position": 1,
          "created_at": "2020-01-28T16:25:05-05:00",
          "updated_at": "2020-01-28T16:25:05-05:00",
          "alt": null,
          "width": 600,
          "height": 600,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/reversible-beanie.jpg?v=1580246705",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/14057553854500"
        }
      ],
      "image": {
        "id": 14057553854500,
        "product_id": 4484976148516,
        "position": 1,
        "created_at": "2020-01-28T16:25:05-05:00",
        "updated_at": "2020-01-28T16:25:05-05:00",
        "alt": null,
        "width": 600,
        "height": 600,
        "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/reversible-beanie.jpg?v=1580246705",
        "variant_ids": [],
        "admin_graphql_api_id": "gid://shopify/ProductImage/14057553854500"
      }
    }
  ],
  "metadata": {
    "input_products": [
      {
        "id": 562405015588,
        "title": "50/50 T - The Best T Shirt On The Market and Definitely The Best Fabric Too",
        "body_html": "50/50 T",
        "vendor": "Example Brand",
        "product_type": "",
        "created_at": "2018-03-20T14:16:12-04:00",
        "handle": "hanes-50-50-t-shirt",
        "updated_at": "2021-01-06T18:40:04-05:00",
        "published_at": "2019-09-26T22:48:25-04:00",
        "template_suffix": "",
        "published_scope": "global",
        "tags": "clothing",
        "admin_graphql_api_id": "gid://shopify/Product/562405015588",
        "variants": [
          {
            "id": 7162531512356,
            "product_id": 562405015588,
            "title": "Lime",
            "price": "8.00",
            "sku": "H5050TS-1",
            "position": 1,
            "inventory_policy": "deny",
            "compare_at_price": null,
            "fulfillment_service": "manual",
            "inventory_management": "shopify",
            "option1": "Lime",
            "option2": null,
            "option3": null,
            "created_at": "2018-03-20T14:16:12-04:00",
            "updated_at": "2021-01-06T18:36:35-05:00",
            "taxable": true,
            "barcode": "",
            "grams": 0,
            "image_id": 2155956699172,
            "weight": 0,
            "weight_unit": "lb",
            "inventory_item_id": 7159756619812,
            "inventory_quantity": 98,
            "old_inventory_quantity": 98,
            "requires_shipping": true,
            "admin_graphql_api_id": "gid://shopify/ProductVariant/7162531512356"
          },
          {
            "id": 7162531545124,
            "product_id": 562405015588,
            "title": "Yellow",
            "price": "8.00",
            "sku": "H5050TS-2",
            "position": 2,
            "inventory_policy": "continue",
            "compare_at_price": null,
            "fulfillment_service": "manual",
            "inventory_management": null,
            "option1": "Yellow",
            "option2": null,
            "option3": null,
            "created_at": "2018-03-20T14:16:12-04:00",
            "updated_at": "2020-05-01T14:33:59-04:00",
            "taxable": true,
            "barcode": "",
            "grams": 0,
            "image_id": 2155957387300,
            "weight": 0,
            "weight_unit": "lb",
            "inventory_item_id": 7159756652580,
            "inventory_quantity": -12,
            "old_inventory_quantity": -12,
            "requires_shipping": true,
            "admin_graphql_api_id": "gid://shopify/ProductVariant/7162531545124"
          }
        ],
        "options": [
          {
            "id": 833046904868,
            "product_id": 562405015588,
            "name": "Color",
            "position": 1,
            "values": [
              "Lime",
              "Yellow"
            ]
          }
        ],
        "images": [
          {
            "id": 2155956699172,
            "product_id": 562405015588,
            "position": 1,
            "created_at": "2018-03-20T14:16:17-04:00",
            "updated_at": "2019-11-15T23:59:46-05:00",
            "alt": null,
            "width": 1528,
            "height": 1528,
            "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-lime-A.png?v=1573880386",
            "variant_ids": [
              7162531512356
            ],
            "admin_graphql_api_id": "gid://shopify/ProductImage/2155956699172"
          },
          {
            "id": 2155957157924,
            "product_id": 562405015588,
            "position": 2,
            "created_at": "2018-03-20T14:16:20-04:00",
            "updated_at": "2019-11-15T23:59:46-05:00",
            "alt": null,
            "width": 1528,
            "height": 1528,
            "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-lime-B.png?v=1573880386",
            "variant_ids": [],
            "admin_graphql_api_id": "gid://shopify/ProductImage/2155957157924"
          },
          {
            "id": 2155957387300,
            "product_id": 562405015588,
            "position": 3,
            "created_at": "2018-03-20T14:16:22-04:00",
            "updated_at": "2019-11-15T23:59:46-05:00",
            "alt": null,
            "width": 1528,
            "height": 1528,
            "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-yellow-A.png?v=1573880386",
            "variant_ids": [
              7162531545124
            ],
            "admin_graphql_api_id": "gid://shopify/ProductImage/2155957387300"
          },
          {
            "id": 2155957583908,
            "product_id": 562405015588,
            "position": 4,
            "created_at": "2018-03-20T14:16:25-04:00",
            "updated_at": "2019-11-15T23:59:46-05:00",
            "alt": null,
            "width": 1528,
            "height": 1528,
            "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-yellow-B.png?v=1573880386",
            "variant_ids": [],
            "admin_graphql_api_id": "gid://shopify/ProductImage/2155957583908"
          }
        ],
        "image": {
          "id": 2155956699172,
          "product_id": 562405015588,
          "position": 1,
          "created_at": "2018-03-20T14:16:17-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1528,
          "height": 1528,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Hanes_50_50_T-shirt-lime-A.png?v=1573880386",
          "variant_ids": [
            7162531512356
          ],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2155956699172"
        }
      }
    ],
    "matched_rules": [
      {
        "logic": [
          {
            "rules": [
              {
                "type": "product",
                "operator": "contains_any",
                "value": "",
                "products": [
                  {
                    "product_id": 562407407652,
                    "variant_ids": []
                  },
                  {
                    "product_id": 562405015588,
                    "variant_ids": []
                  },
                  {
                    "product_id": 562399838244,
                    "variant_ids": []
                  }
                ]
              }
            ]
          }
        ],
        "output": [
          {
            "type": "product",
            "products": [
              {
                "product_id": 591006728228,
                "variant_ids": []
              },
              {
                "product_id": 4484974870564,
                "variant_ids": []
              },
              {
                "product_id": 4484976148516,
                "variant_ids": []
              }
            ]
          }
        ],
        "exit_if_matched": true
      }
    ],
    "unmatched_rules": [],
    "unevaluated_rules": [
      {
        "logic": [
          {
            "rules": [
              {
                "type": "cart_subtotal",
                "operator": "greater_than",
                "value": "50"
              }
            ]
          }
        ],
        "output": [
          {
            "type": "endpoint",
            "endpoint": "/products/recommended"
          }
        ],
        "exit_if_matched": true
      }
    ],
    "filtered_oos_products": [
      {
        "id": 591006728228,
        "title": "Classic Beanie",
        "body_html": "Classic Beanie",
        "vendor": "Example Brand",
        "product_type": "",
        "created_at": "2018-03-30T11:53:26-04:00",
        "handle": "classic-beanie",
        "updated_at": "2020-12-24T14:40:35-05:00",
        "published_at": "2020-01-28T16:11:45-05:00",
        "template_suffix": "",
        "published_scope": "web",
        "tags": "clothing",
        "admin_graphql_api_id": "gid://shopify/Product/591006728228",
        "variants": [
          {
            "id": 7321573425188,
            "product_id": 591006728228,
            "title": "Default Title",
            "price": "15.00",
            "sku": "BEANIE1",
            "position": 1,
            "inventory_policy": "deny",
            "compare_at_price": null,
            "fulfillment_service": "manual",
            "inventory_management": "shopify",
            "option1": "Default Title",
            "option2": null,
            "option3": null,
            "created_at": "2018-03-30T11:53:26-04:00",
            "updated_at": "2020-12-24T14:40:35-05:00",
            "taxable": true,
            "barcode": "",
            "grams": 0,
            "image_id": null,
            "weight": 0,
            "weight_unit": "lb",
            "inventory_item_id": 7334298255396,
            "inventory_quantity": 0,
            "old_inventory_quantity": 0,
            "requires_shipping": true,
            "admin_graphql_api_id": "gid://shopify/ProductVariant/7321573425188"
          }
        ],
        "options": [
          {
            "id": 872156528676,
            "product_id": 591006728228,
            "name": "Title",
            "position": 1,
            "values": [
              "Default Title"
            ]
          }
        ],
        "images": [
          {
            "id": 2245076910116,
            "product_id": 591006728228,
            "position": 1,
            "created_at": "2018-03-30T11:53:29-04:00",
            "updated_at": "2019-11-15T23:59:46-05:00",
            "alt": null,
            "width": 1130,
            "height": 1112,
            "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Beanie-black.png?v=1573880386",
            "variant_ids": [],
            "admin_graphql_api_id": "gid://shopify/ProductImage/2245076910116"
          }
        ],
        "image": {
          "id": 2245076910116,
          "product_id": 591006728228,
          "position": 1,
          "created_at": "2018-03-30T11:53:29-04:00",
          "updated_at": "2019-11-15T23:59:46-05:00",
          "alt": null,
          "width": 1130,
          "height": 1112,
          "src": "https://cdn.shopify.com/s/files/1/0011/0746/0132/products/Beanie-black.png?v=1573880386",
          "variant_ids": [],
          "admin_graphql_api_id": "gid://shopify/ProductImage/2245076910116"
        }
      }
    ],
    "filtered_input_products": [],
    "errors": []
  }
}
```

### 400 Bad Request

```json
{
  "error": "Missing key"
}
```

---

# All Sources (2.8KB)

Source: https://developers.rebuyengine.com/reference/sources.md

## GET /api/v1/sources

!!! note "Use Cases"
    Third-party app integrations can use this endpoint to provide a drop down list of endpoints that the merchant can pick from within the app.

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`format` · string
:   Valid values: pretty. Use pretty to make the response easy to read.

## Code Example

```javascript
// GET https://rebuyengine.com/api/v1/sources/
const API_KEY = "YOUR_PUBLIC_API_KEY";

const params = new URLSearchParams({
  key: API_KEY,
  format: "pretty"
});

fetch(`https://rebuyengine.com/api/v1/sources/?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": [
    {
      "id": "/api/v1/products/recommended",
      "name": "Recommended Products",
      "description": "Returns AI-based product recommendations",
      "protocol": "https",
      "host": "rebuyengine.com",
      "path": "/api/v1/products/recommended",
      "query": [
        {
          "name": "shopify_product_ids",
          "required": false,
          "default": null,
          "description": "Comma separated list of Shopify product IDs.",
          "example": "123,456"
        },
        {
          "name": "limit",
          "required": false,
          "default": null,
          "description": "Used to limit the number of results returned.",
          "example": "10"
        }
      ]
    },
    {
      "id": "/api/v1/products/top_sellers",
      "name": "Top Sellers",
      "description": "Returns a list of top selling products",
      "protocol": "https",
      "host": "rebuyengine.com",
      "path": "/api/v1/products/top_sellers",
      "query": [
        {
          "name": "shopify_collection_id",
          "required": false,
          "default": null,
          "description": "Shopify collection ID. If provided, products belonging to this collection will be returned.",
          "example": "123456"
        },
        {
          "name": "limit",
          "required": false,
          "default": null,
          "description": "Used to limit the number of results returned.",
          "example": "10"
        }
      ]
    }
  ]
}
```

!!! info "Response Structure"
    The response includes all available data sources for your merchant account, including built-in sources (Recommended, Top Sellers, etc.) and any custom data sources you've configured.

### 400 Bad Request

```json
{
  "error": "Missing key"
}
```

---

# Widget Settings (1.7KB)

Source: https://developers.rebuyengine.com/reference/widget-settings-url.md

## GET /api/v1/widgets/settings?id={widget_id}&cache_key={cache_key}

!!! note "Requirements"
    In order to get the most up to date widget settings from this endpoint, you must pull your cache key from your store's`user/config`. This can be done by either accessing `window.Rebuy.shop.cache_key` or by hitting this endpoint:
    `https://rebuyengine.com/api/v1/user/config?shop={{myshopify domain here}}`
    and pulling it from `data.shop.cache_key`.

## Query Parameters

`key` · string · required
:   Your Rebuy public API key. Find this in your Rebuy admin under [**Settings → API Keys**](https://rebuyengine.com/account/keys).

`widget_id` · string
:   The ID of the widget you need settings for

`cache_key` · string
:   Your store's cache key

## Code Example

```javascript
// GET https://cached.rebuyengine.com/api/v1/widgets/settings
const API_KEY = "YOUR_PUBLIC_API_KEY";
const widgetId = "12345";
const cacheKey = window.Rebuy?.shop?.cache_key || "YOUR_CACHE_KEY";

fetch(`https://cached.rebuyengine.com/api/v1/widgets/settings?key=${API_KEY}&id=${widgetId}&cache_key=${cacheKey}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Example

```json
{
  "data": {
    "id": 12345,
    "name": "Product Page Cross-Sell",
    "type": "product_recommendation",
    "settings": {
      "title": "You may also like",
      "limit": 4,
      "layout": "grid"
    }
  },
  "metadata": {
    "cache_key": "abc123",
    "cached_at": "2024-01-15T10:30:00Z"
  }
}
```

---

# Event (3.1KB)

Source: https://developers.rebuyengine.com/reference/analytics-event.md

!!! warning "Deprecated"
    This page documents a deprecated feature. It may be removed in a future version.

## POST /api/v1/analytics/event

## Rebuy Event Streams

Leverage Rebuy AI's event stream technology to surface smart product and shopping experience recommendations.

!!! note "Event Format"
    A user (subject) views (action) a t-shirt (noun).
    Rebuy will store the event so it can be included in analytics at a later time.


!!! warning "Generating a client-side UUID"
    At this time, the client is responsible for generating a UUID to be included with the request.
    We recommend using [this NPM package (UUID)](https://www.npmjs.com/package/uuid) to generate the UUID.
    We also recommend storing this session-based UUID if you plan on using the [/products/viewed](viewed.md) endpoint.


## How to Use the /event Endpoint

1. Generate a UUID for the customer if one hasn't been created already.
2. Build your POST data with the appropriate subject, verb, and noun (ex. user, viewed, product) and corresponding product data (ex. shopify_product_handle)
3. Submit your request when a customer views a product.

Once you've submitted data to this endpoint, you can call the [/products/viewed](viewed.md) endpoint using the customer's established UUID to get a list of products that they've viewed throughout their session.

## Query Parameters

`key` · string
:   The key to use our API.

`subject` · string
:   The subject of the event. Supported value: [user].

`verb` · string
:   The action of the subject of the event. Supported values: [viewed, added, removed].

`noun` · string
:   The object that the subject's action operated upon. Supported value: [product].

`shopify_product_handle` · string
:   Shopify's primary identifier for a product - required when the noun is product-based. Example: classic-beanie

`subject_email` · string
:   The email of the subject. Example: johndoe@example.com

`theme_id` · string
:   The theme identifier that applies to the product.

`uuid` · string
:   The 'Universally Unique Identifier' of the subject - the client is responsible for creating the token that represents the session. We recommend using this NPM package (https://www.npmjs.com/package/uuid). Example value: be6f5fab-32a4-43e5-967c-68017baa3aa5

## Code Example

```javascript
// POST https://rebuyengine.com/api/v1/analytics/event
const params = new URLSearchParams({
  key: "YOUR_VALUE",
  subject: "YOUR_VALUE"
});

fetch(`https://rebuyengine.com/api/v1/analytics/event?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "data": "Received"
}
```

### 400 Bad Request

```json
{
  "error": "Missing required args. You must pass either shopify_customer_id or uuid."
}
```

---

# Rebuy Analytic 2.0 Endpoints (4.0KB)

Source: https://developers.rebuyengine.com/reference/rebuy-analytic-v2-endpoints.md

## POST /api/v2/analytics/event

Creates a single analytic event.

### Headers

`X-Rebuy-User-Token` · string · **required**
:   Your key to use our API.

`Content-Type` · string · **required**
:   Must be `application/json`.

### Body Parameters

`subject` · string · **required**
:   The subject of the event. Supported value: `user`.

`verb` · string · **required**
:   The action of the subject of the event. Supported values: `viewed`, `added`, `removed`.

`noun` · string · **required**
:   The object that the subject's action operated upon. Supported value: `product`.

`product_id` · string · **required**
:   The unique identifier of the *noun* field. Even if numeric, this must be passed as a string.

`product_handle` · string · **required if product_id is not available**
:   The product handle can be passed in lieu of the product_id if the *noun* is "product".

`uuid` · string · **required**
:   The 'Universally Unique Identifier' of the subject. The client is responsible for creating this token. We recommend using [this NPM package (UUID)](https://www.npmjs.com/package/uuid). Example: `be6f5fab-32a4-43e5-967c-68017baa3aa5`

`customer_id` · string
:   The customer id can be passed to tie multiple UUIDs from different browsers together if the UUID for a customer is being stored in a cookie. Even if numeric, this must be passed as a string.

`theme_id` · string
:   The theme identifier that applies to the product.

`platform` · string · Default: `Shopify`
:   Commerce platform identification string.

### Request Example

```json
{
  "subject": "user",
  "verb": "viewed",
  "noun": "product",
  "uuid": "be6f5fab-32a4-43e5-967c-68017baa3aa5",
  "customer_id": "65069794",
  "product_id": "5630650697948"
}
```

### Response Example

```json
{
  "data": "Received"
}
```

### How to Use

1. Generate a UUID for the customer if one hasn't been created already.
2. Build your POST data with the appropriate subject, verb, and noun (e.g., user, viewed, product) and corresponding product data (e.g., product_id).
3. Submit your request when a customer views a product.

Once you've submitted data to this endpoint, you can call the [/products/viewed](viewed.md) endpoint using the customer's established UUID to get a list of products that they've viewed throughout their session.

---

## POST /api/v2/analytics/event/bulk

Creates multiple analytic events in a single request (maximum 100 items).

### Headers

`X-Rebuy-User-Token` · string · **required**
:   Your key to use our API.

`Content-Type` · string · **required**
:   Must be `application/json`.

### Body Parameters

The request body is a JSON array of event objects. Each event object uses the same fields as the single event endpoint above.

### Request Example

```json
[
  {
    "subject": "user",
    "verb": "viewed",
    "noun": "product",
    "uuid": "be6f5fab-32a4-43e5-967c-68017baa3aa5",
    "customer_id": "65069794",
    "product_id": "5630650697948"
  },
  {
    "subject": "user",
    "verb": "viewed",
    "noun": "product",
    "uuid": "be6f5fab-32a4-43e5-967c-68017baa3aa5",
    "customer_id": "65069794",
    "product_id": "6506975630948"
  }
]
```

### Response Example

```json
{
  "data": "Received"
}
```

### How to Use

1. The general structure and usage is similar to the single event endpoint, however, up to 100 JSON events can be passed inside of a JSON array.
2. Each event must contain all required fields.

---

## Reference

### UUID Generation

!!! warning "Generating a client-side UUID"
    At this time, the client is responsible for generating a UUID to be included with the request.
    We recommend using [this NPM package (UUID)](https://www.npmjs.com/package/uuid) to generate the UUID.
    We also recommend storing this session-based UUID if you plan on using the [/products/viewed](viewed.md) endpoint.

---

# Overview (921B)

Source: https://developers.rebuyengine.com/reference/rebuy-js-overview.md

## Introduction

Rebuy.Js is the front end library that loads in to Shopify stores and powers the Rebuy experience.

For Rebuy widgets, Rebuy looks for divs with attribute of data-rebuy-id="XXX" and will hydrate those elements with Rebuy merchandising components and merchandising widgets.

Rebuy also includes customer identity tracking and event tracking which leverages Shopify's [consent tracking API](https://shopify.dev/api/consent-tracking) If a customer has declined consent, Rebuy will track event anonymously .

Rebuy JS is very extensible SDK that allows complex work flows to fit your needs. Rebuy JS contains events and public functions which can be found in the respective section of these doc's.

---

# Automatic Installation (1.1KB)

Source: https://developers.rebuyengine.com/reference/automatic-installation.md

Once a merchant has installed Rebuy via the Shopify app store, Rebuy JS will load in through the head of the document. By default Shopify loads all apps after the regular Shopify site has finished loading. This means Rebuy is not allowed to run until after the site has finished loading which can sometimes take 3-4 seconds or longer. This may cause a delay in load times and so it is suggested to use the advanced installation guide to help Rebuy features load in more quickly.

Optionally, Rebuy automatic installation can be disabled from [Rebuy Admin](https://rebuyengine.com/settings) and Rebuy can be installed manually.

![Rebuy Admin settings showing the Enable Rebuy JS toggle option](../assets/images/ff93e18-Screenshot_051222_120946_PM.jpg "Rebuy JS settings toggle")

---

# Manual Installation (1.8KB)

Source: https://developers.rebuyengine.com/reference/manual-installation.md

## Adding the Rebuy Script Tag

By default Shopify loads all apps after the regular Shopify site has finished loading. This means Rebuy is not allowed to run until after the site has finished loading which can sometimes take 3-4 seconds or longer. We can change this by the adding Rebuy JS directly to your theme.

In your theme's **theme.liquid** file, add the following script tag before the closing body tag.

```html
<script async src="https://cdn.rebuyengine.com/onsite/js/rebuy.js?shop={{ shop.permanent_domain }}"></script>
```

Then, turn off Rebuy JS via your settings here: [Rebuy settings](https://rebuyengine.com/settings). Switch "Enable Rebuy JS" from "Yes to "No" and save.

![Rebuy settings with Enable Rebuy JS toggle switched to No](../assets/images/c80a8ac-Screenshot_050922_083028_AM.jpg "Enable Rebuy JS set to No")

If Rebuy has already loaded, then it will simply return and not run through initialization again. But, it is suggested to turn off this setting so that Rebuy does not try to load in multiple times. 

## Only Load Rebuy.JS

It is also possible to only load in Rebuy.JS without the CSS package. This is useful if you would like to utilize your custom theme CSS.

```html
<script async src="https://cdn.rebuyengine.com/onsite/js/rebuy.js?assets=javascript&shop={{ shop.permanent_domain }}"></script>
```

## Only Load Rebuy CSS

It is also possible to only load Rebuy CSS without the JavaScript. This can be useful if your application is using our REST API with custom JavaScript. 

```html
<script async src="https://cdn.rebuyengine.com/onsite/js/rebuy.js?assets=stylesheet&shop={{ shop.permanent_domain }}"></script>
```

---

# Event Listeners (6.5KB)

Source: https://developers.rebuyengine.com/reference/event-listeners.md

## Overview

Rebuy dispatches custom events throughout the lifecycle of its features, allowing you to hook into key moments and add custom functionality. All Rebuy events are dispatched on the `document` object using the browser's native [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) API.

### Key Concepts

- **Events fire on `document`** — Use `document.addEventListener()` to listen
- **Data is in `event.detail`** — Access event payload via the `detail` property
- **Events are synchronous** — Handlers execute before Rebuy continues
- **Multiple listeners allowed** — Add as many handlers as needed for the same event

## Event Naming Conventions

Rebuy uses two naming patterns for events:

| Pattern | Example | Used For |
|---------|---------|----------|
| `rebuy.eventName` | `rebuy.loaded` | Core Rebuy lifecycle, Widget events |
| `rebuy:module.eventName` | `rebuy:cart.add` | Module-specific events (Cart, Smart Cart, etc.) |

!!! tip "Both patterns work the same way"
    The naming difference is purely organizational. Both use `document.addEventListener()` and provide data via `event.detail`.

## Listening for Events

The basic pattern for listening to any Rebuy event:

```javascript
document.addEventListener('rebuy:cart.add', (event) => {
    // Access event data via event.detail
    const { cart, item } = event.detail;

    console.log('Item added:', item);
    console.log('Cart total:', cart.cart.total_price);
});
```

### The `event.detail` Object

Every Rebuy event includes contextual data in `event.detail`. The structure varies by event type:

| Event Type | Common `detail` Properties |
|------------|----------------------------|
| Widget events | `widget` (widget instance), `product` or `products` |
| Cart events | `cart` (Rebuy Cart module; access Shopify cart via `cart.cart`), `item` (line item) |
| Smart Cart events | `smartcart` (Smart Cart instance), `item` |
| Landing Page events | `data` (page data) |

```javascript
// Example: Widget ready event
document.addEventListener('rebuy.ready', (event) => {
    const { widget } = event.detail;

    console.log('Widget ID:', widget.id);
    console.log('Products:', widget.data.products);
});

// Example: Cart change event
document.addEventListener('rebuy:cart.change', (event) => {
    const { cart } = event.detail;

    // cart is the Rebuy Cart module; cart.cart is the Shopify cart data
    console.log('Item count:', cart.cart.item_count);
    console.log('Total:', Rebuy.util.formatMoney(cart.cart.total_price));
});
```

---

## Core Lifecycle Events

These events fire once during the Rebuy initialization process.

### rebuy.beforeLoaded

Fires before Rebuy begins loading. Use this to configure settings or add early customizations.

```javascript
document.addEventListener('rebuy.beforeLoaded', (event) => {
    console.log('Rebuy is about to load');

    // Configure Rebuy before it initializes
    window.RebuyConfig = window.RebuyConfig || {};
    window.RebuyConfig.customSetting = 'value';
});
```

### rebuy.loaded

Fires when Rebuy has fully loaded and all features are initialized.

```javascript
document.addEventListener('rebuy.loaded', (event) => {
    console.log('Rebuy is ready');

    // Safe to interact with Rebuy APIs
    console.log('Cart:', window.Rebuy.Cart.cart());
});
```

---

## Event Reference by Feature

Rebuy provides events for each major feature. Click the links below for complete documentation:

| Feature | Documentation | Key Events |
|---------|---------------|------------|
| **Core** | This page | `rebuy.beforeLoaded`, `rebuy.loaded` |
| **Widgets** | [Widget Event Listeners](widget-event-listeners.md) | `rebuy.init`, `rebuy.ready`, `rebuy.add`, `rebuy.show`, `rebuy.hide` |
| **Cart** | [Cart Event Listeners](cart-event-listeners.md) | `rebuy:cart.ready`, `rebuy:cart.add`, `rebuy:cart.change` |
| **Smart Cart** | [Smart Cart Event Listeners](smart-cart-event-listeners.md) | `rebuy:smartcart.show`, `rebuy:smartcart.hide`, line item events |
| **Smart Search** | [Smart Search Event Listeners](smart-search-event-listeners.md) | Quick View events, Results Page events |
| **Smart Collections** | [Smart Collections Event Listeners](smart-collections-event-listeners.md) | `rebuy:smartcollections.ready`, product events |
| **Bundle Builder** | [Bundle Builder Event Listeners](bundle-builder-event-listeners.md) | Bundle selection and cart events |
| **Landing Pages** | [Landing Pages Event Listeners](landing-pages-event-listeners.md) | Reorder and Reactivate page events |

---

## Common Patterns

### Run Code After Rebuy Loads

```javascript
document.addEventListener('rebuy.loaded', () => {
    // All Rebuy features are now available
    const cart = window.Rebuy.Cart.cart();

    if (cart.item_count > 0) {
        console.log('Customer has items in cart');
    }
});
```

### Track Product Adds Across All Widgets

```javascript
document.addEventListener('rebuy.add', (event) => {
    const { product, widget } = event.detail;

    // Send to analytics
    analytics.track('Product Added', {
        product_id: product.id,
        product_title: product.title,
        widget_id: widget.id,
        source: 'rebuy_widget'
    });
});
```

### React to Cart Changes

```javascript
document.addEventListener('rebuy:cart.change', (event) => {
    const { cart } = event.detail;

    // cart is the Rebuy Cart module; cart.cart is the Shopify cart data
    const shopifyCart = cart.cart;

    // Update custom UI elements
    document.querySelector('.custom-cart-count').textContent = shopifyCart.item_count;

    // Show free shipping progress
    const threshold = 5000; // $50.00 in cents
    const remaining = Math.max(0, threshold - shopifyCart.total_price);

    if (remaining === 0) {
        console.log('Free shipping unlocked!');
    }
});
```

### Modify Widget Before Display

```javascript
document.addEventListener('rebuy.beforeShow', (event) => {
    const { widget } = event.detail;

    // Add custom class based on product count
    const productCount = widget.data.products?.length || 0;

    if (productCount > 4) {
        widget.el.classList.add('rebuy-widget--large');
    }
});
```

---

## Related

- [Widget Methods](widget-methods.md) — Programmatically control widgets
- [Smart Cart Methods](smart-cart-methods.md) — Control the Smart Cart
- [Utility Methods](utility-methods.md) — Helper functions like `formatMoney()`

---

# Templates (2.1KB)

Source: https://developers.rebuyengine.com/reference/templates.md

Rebuy uses Vue.JS and prebuilt templates that are loaded in with Rebuy.JS for all widgets and the Smart Cart. These templates can be brought into the theme code and customized in order to provide additional functionality and layout that may not be accomplished with the standard settings.

To learn more about Vue.JS and the the useful attributes you can visit this link [here](https://vuejs.org/guide/introduction.html).

## Widget Specificity

All widgets start with a default template which is loaded in with Rebuy JS. A custom template can be added to the theme files in order to change the markup as desired.

Rebuy templates can be specified to work for a specific widget or all widgets of that widget type by either including or excluding the widget ID in the opening script tag of the template. In order to make the template work for that specific widget change the id of the script tog to "rebuy-widget-xxxx" where the x's are the Id of the specific widget you would like to customize such as the example below.

```html title="Specific Widget"
<script id="rebuy-widget-1234" type="text/template"></script>
```

The highest level of specificity are instance based templates. This is where the widgets div opening and closing tags wrap the whole template. Anything inside of the div tag will be used as the template for the widget. The widget div can be found on the widget settings page under the placement dropdown. 

## Global Functions

These templates can accept any globally available JavaScript functions as needed. So, if you need to create some functionality that is not available from the Rebuy settings then you can create a new function that is globally available on the pages the widget will load in on and apply as needed.

Many developers have built onto our standard templates in order to provide stunning functionality and design.

In order to get more specific information on Rebuy templates please see the templates section for the Smart Cart or the Widgets.

---

# Cart Overview (1.1KB)

Source: https://developers.rebuyengine.com/reference/cart.md

The Rebuy cart starts with a copy of the Shopify cart. Then the Rebuy cart goes through the items and adds additional information when available for products. This information could pertain to subscription items. For example if the item in the cart is a onetime item, the Rebuy cart stores a map between the onetime item and the subscription pair to that item. This specific information on gets generated when connected to Recharge (from the Integration settings of the Rebuy admin) and the Smart Cart switch to subscription setting in enabled or you manually run the **enrichCart()** method once Rebuy loads in.

This information can now be accessed from the Cart object such as the example below.

```javascript title="Enriched Products"
window.Rebuy.Cart.cart.items[0].product;
```

There is also a long list of methods that can be helpful in providing custom functionality and logic.

---

# Methods (11.0KB)

Source: https://developers.rebuyengine.com/reference/cart-methods.md

All methods below are as if the cart object has a reference variable defined as shown in this code snippet.

```javascript title="Cart reference"
const Cart = window.Rebuy.Cart;
```

This is not a complete list of the globally available function but the ones that we find most helpful.

## addItem

Adds the item object that is passed in as the first argument to the Shopify cart.

```javascript
Cart.addItem(data, options);
```

## allItemsAreOneTime

Returns a boolean. If all items in the cart are onetime items as opposed to subscription items.

```javascript
Cart.allItemsAreOneTime();
```

## allItemsAreSubscription

Returns a boolean. If all items in the cart are subscription items as opposed to onetime items.

```javascript
Cart.allItemsAreSubscription();
```

## allSubscribableItemsAreSubscription

Returns a boolean. If all items in the cart that have a subscription option are subscription products.

```javascript
Cart.allSubscribableItemsAreSubscription();
```

## availableSubscriptionOptions

Returns an options property which is an array containing all of the available frequency options of the items in the cart.

```javascript
Cart.availableSubscriptionOptions();
```

## cartHasMetafieldSubscriptionItems

Returns a boolean. This would be in reference to stores using subscription items with Recharge Checkout which would return true.

```javascript
Cart.cartHasMetafieldSubscriptionItems();
```

## cartHasSellingPlanSubscriptionItems

Returns a boolean. This would be in reference to Shopify selling plans or Recharges Shopify checkout integration which would return true.

```javascript
Cart.cartHasSellingPlanSubscriptionItems();
```

## cartHasSubscriptionItems

Returns a boolean if any of the items in the cart are a subscription item.

```javascript
Cart.cartHasSubscriptionItems();
```

## changeItem

Accepts an object which must contain an id (this should be the key of the item that you would like to change) property and a quantity property but could also adjust product properties. The options argument is also an object which can take a success and/or error property which are callback functions upon success or error.

```javascript title="Cart.changeItem(object, options);"

// Example API call
Cart.changeItem({
  id: item.key,
  quantity: 2,
  properties: {
    test: 'This is a test'
  }
});
```

## checkout

Will navigate the user to Shopify checkout if all items are onetime or if the merchant is set up with Shopify selling plans and subscription items are in the cart. Otherwise this function will navigate the user to Recharge checkout

```javascript
Cart.checkout();
```

## clearCart

When this method is called all the items in the cart will be removed.

```javascript
Cart.clearCart(options);
```

## decreaseItem

This function takes in a single item object as it first argument and an optional callback. One way to get the item object is using the window\.Rebuy.Cart.getItemAtIndex(1); method if the index is known.

```javascript
Cart.decreaseItem(item, callback);
```

## enrichCart

This method loops through the cart items and appends additional information to the item by adding a product property. Within this product property you will find useful information referencing the map between the one-time product and the subscription version of that product depending on which checkout version of Recharge the merchant is using. This method also stores this information in Local Storage to be more easily accessed again in the future.

```javascript
Cart.enrichCart(callback);
```

Takes an email address and passes the Rebuy customer object into the callback.

## fetchReChargeCart

Passes the Recharge cart object into the callback

```javascript
Cart.fetchReChargeCart(callback);
```

```javascript title="Example"
Cart.fetchReChargeCart(cart => console.log("cart", cart));
```

## fetchShopifyCart

Async function that returns the Rebuy cart object.

```javascript
Cart.fetchShopifyCart(callback);
```

```javascript title="Example"
Cart.fetchShopifyCart(cart => console.log("cart", cart));
```

## formatMoney

This function takes a number as the first argument and returns a formatted string with decimal and dollar symbol.

```javascript
Cart.formatMoney(price, format);
```

```javascript title="Example"
Cart.formatMoney(10000);
// Will return '$100.00'
```

## getCart

Returns the Rebuy cart object.

```javascript
Cart.getCart();
```

## getCartProductIDs

Returns tan array of numbers which are the product ID's of the products in the cart.

```javascript
Cart.getCartProductIDs();
```

## getCartToken

Returns a string which is the current Shopify cart token.

```javascript
Cart.getCartToken();
```

## getCartVariantIDs

Returns tan array of numbers which are the variant ID's of the products in the cart.

```javascript
Cart.getCartVariantIDs();
```

## getCurrency

Returns a string which is the current currency the store is using.

```javascript
Cart.getCurrency();
```

## getItemAtIndex

Returns an item object at the index given.

```javascript
Cart.getItemAtIndex(index);
```

## getItemLineNumber

```javascript
Cart.getItemLineNumber(item);
```

## getItems

Returns an array containing the objects of the items currently in the cart in sorted order where index 0 is the most recent item added or updated.

```javascript
Cart.getItems(filters, possessive);
```

## getRebuyItemCount

Returns a number which is the number of items added by a Rebuy widget. If a specific widget ID is passed into this method as an argument then it will return the number of items that have been added by that widget only.

!!! note "Widget Tracking"
    Widget tracking must be enabled for this method to work properly. This is enabled on all widgets by default.


```javascript
Cart.getRebuyItemCount(widget_id);
```

## getRebuyItems

Returns an array of objects which are the items added by a Rebuy widget. If a specific widget ID is passed into this method as an argument then it will return the items that have been added by that widget only.

!!! note "Widget Tracking"
    Widget tracking must be enabled for this method to work properly. This is enabled on all widgets by default.


```javascript
Cart.getRebuyItems(widget_id);
```

## getReChargeCheckoutDomain

Returns the Recharge checkout domain.

!!! warning "Recharge Checkout Only"
    Only use this if the merchant is using the Recharge checkout version of Recharge as opposed to the Shopify Checkout Integration.


```javascript
Cart.getReChargeCheckoutDomain();
```

## goToCartPage

When this method is called the user will be redirected to the cart page.

```javascript
Cart.goToCartPage();
```

## goToReChargeCheckout

When this method is called and the store is using the Recharge Checkout Integration the user will be redirected to the Recharge checkout page.

!!! warning "Recharge Checkout Only"
    Only use this if the merchant is using the Recharge checkout version of Recharge as opposed to the Shopify Checkout Integration.


```javascript
Cart.goToReChargeCheckout();
```

## goToShopifyCheckout

When this function is called, the customer will be re-directed to the Shopify checkout page.

```javascript
Cart.goToShopifyCheckout();
```

## hasItems

Returns a boolean (true) if the cart currently has any items.

```javascript
Cart.hasItems();
```

## hasSubscribableItems

Returns a boolean (true) when the cart contains at least one item that could be or is a subscription item.

```javascript
Cart.hasSubscribableItems();
```

## increaseItem

Takes an item object as the first argument, a success callback as the second, and an error callback as the last and will increase the quantity of that item by one.

```javascript
Cart.increaseItem(item, success, error);
```

```javascript title="Example"
Cart.increaseItem(Cart.items[0]);
```

## init

Initializes the Rebuy Cart object

```javascript
Cart.init();
```

## isSubscription

Returns a boolean (true) if the product in the cart either is a subscription item or has a subscription option and is currently a onetime item.

```javascript
Cart.isSubscription(item);
```

## itemCount

Returns the count (type: number) of all the items including items with more than one quantity.

```javascript
Cart.itemCount();
```

## itemDeliveryFrequency

Takes an item object as an argument and returns a string which is the delivery frequency at which the item is currently selected at. (i.e. 'Onetime', '30', '60')

```javascript
Cart.itemDeliveryFrequency(item);
```

## itemDeliveryInterval

Returns a string which is the currently selected interval ('days').

```javascript
Cart.itemDeliveryInterval(item);
```

## itemIsOneTime

Returns a boolean (true) if the specified item is a onetime item as opposed to a subscription item.

```javascript
Cart.itemIsOneTime(item);
```

## itemIsSubscription

Returns a boolean (true) if the specified item is a subscription item as opposed to a onetime item.

```javascript
Cart.itemIsSubscription(item);
```

## itemPrice

Returns an unformatted number of the price of the item. Could be used in conjunction with Cart.formatMoney() to create a formatted price.

```javascript
Cart.itemPrice(item);
```

## items

Returns an array of objects which are the items in the cart.

```javascript
Cart.items();
```

## lineCount

Returns a number. If one item has quantity of two then that will only count as one toward to total count returned.

```javascript
Cart.lineCount();
```

## lineItemDiscountMessage

Returns a string which is the discount message if applicable to the item.

```javascript
Cart.lineItemDiscountMessage(item);
```

## removeItem

Removes the item that is passed in as the first argument.

```javascript
Cart.removeItem(item, callback);
```

## removeShopifyDiscount

```javascript
Cart.removeShopifyDiscount(callback);
```

## selectVariant

```javascript
Cart.selectVariant(product, query);
```

## setDiscount

```javascript
Cart.setDiscount(discount);
```

## setItemQuantity

Takes and item object and a number as arguments and will set that item quantity to the given number.

```javascript
Cart.setItemQuantity(item, quantity, callback);
```

## subtotal

Returns a number which is the current subtotal of all the items in the cart. This is not formatted.

```javascript
Cart.subtotal();
```

## switchCartToFrequency

```javascript
Cart.switchCartToFrequency(selectedOption, callback, errorHandler);
```

## switchItemToFrequency

```javascript
Cart.switchItemToFrequency(item, frequency, callback, errorHandler);
```

## switchItemToOneTimeData

```javascript
Cart.switchItemToOneTimeData(item);
```

## switchItemToSubscriptionData

```javascript
Cart.switchItemToSubscriptionData(item, frequency, interval);
```

## switchToOneTime

Takes a subscription item's object as an argument and will switch the item from a subscription to a one-time item.

```javascript
Cart.switchToOneTime(item, callback);
```

## switchToSubscription

Takes an item object and a frequency string. The frequency is the interval at which you would like the shipping interval to default to. (i.e. '30')

```javascript
Cart.switchToSubscription(item, frequency, callback);
```

---

# Event Listeners (2.7KB)

Source: https://developers.rebuyengine.com/reference/cart-event-listeners.md

These events provide access to the Rebuy Cart module. Rebuy keeps a copy of the Shopify cart, so cart add and cart change events trigger even when changes happen outside of Rebuy features. For example, if a customer adds an item from the product details page, the add event will still trigger.

!!! note "Accessing cart data"
    The `cart` property in `event.detail` is the Rebuy Cart module, not the Shopify cart directly. Access the Shopify cart data via `cart.cart`:

    ```javascript
    document.addEventListener('rebuy:cart.change', (event) => {
        const { cart } = event.detail;
        console.log(cart.cart.total_price); // Shopify cart data
    });
    ```

## Ready

Triggers when the cart object is ready.

```javascript
document.addEventListener('rebuy:cart.ready', (event) => {
  const { cart } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `cart` | object | The Rebuy Cart module (access Shopify cart via `cart.cart`) |

## Add

Triggers when an item is added to the cart.

```javascript
document.addEventListener('rebuy:cart.add', (event) => {
  const { cart, item } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `cart` | object | The Rebuy Cart module (access Shopify cart via `cart.cart`) |
| `item` | object | The item that was added, or an object with `items` array and `sections` when multiple items are added (e.g., `{items: [...], sections: {...}}`) |

## Change

Triggers when the cart changes (add, remove, quantity increase, quantity decrease).

```javascript
document.addEventListener('rebuy:cart.change', (event) => {
  const { cart } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `cart` | object | The Rebuy Cart module (access Shopify cart via `cart.cart`) |

## Enriched

Triggers when the cart is enriched with additional subscription information.

```javascript
document.addEventListener('rebuy:cart.enriched', (event) => {
  const { cart } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `cart` | object | The Rebuy Cart module with enriched subscription data (access Shopify cart via `cart.cart`) |

## Related

- [Smart Cart Event Listeners](smart-cart-event-listeners.md) - Events for the Smart Cart UI
- [Widget Event Listeners](widget-event-listeners.md) - Events for recommendation widgets

---

# Smart Cart Overview (3.5KB)

Source: https://developers.rebuyengine.com/reference/smart-cart.md

## Overview

The Smart Cart is a cart drawer solution. This is loaded in with Rebuy global.js and does not require a root HTML div to attach to like the Rebuy widgets. The Smart Cart is an extension to the cart object and keeps its own reference of the cart object. The Smart Cart currently has one layout but many settings to allow merchants to customize the overall functionality. Colors and styles are inherited from the theme colors selected which can be found at the top right of the Admin Dashboard. The Smart Cart make it easy to cross-sell popular products by attaching a Rebuy widget via the Smart Cart settings.

## Quick Start

Control the Smart Cart programmatically using JavaScript:

```javascript
// Show the Smart Cart
Rebuy.SmartCart.show();

// Hide the Smart Cart
Rebuy.SmartCart.hide();

// Check if Smart Cart is visible
if (Rebuy.SmartCart.visible) {
  console.log('Smart Cart is open');
}

// Check if Smart Cart is ready
if (Rebuy.SmartCart.status === 'ready') {
  console.log('Smart Cart is initialized');
}
```

### Event Listeners

Listen for Smart Cart events to integrate custom functionality:

```javascript
// Smart Cart opened
document.addEventListener('rebuy:smartcart.show', (event) => {
  console.log('Smart Cart opened');
});

// Smart Cart closed
document.addEventListener('rebuy:smartcart.hide', (event) => {
  console.log('Smart Cart closed');
});

// Item added to cart
document.addEventListener('rebuy:smartcart.line-item-increase', (event) => {
  const { item } = event.detail;
  console.log('Item quantity increased:', item.title);
});
```

See [Smart Cart Event Listeners](./smart-cart-event-listeners.md) for all available events and [Smart Cart Methods](./smart-cart-methods.md) for the complete API reference.

## Product Tags

| Tag                            | Result                                                                                                                                                              |
| :----------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| smart-cart-hidden              | Will hide the product from displaying and will not count toward total item count in the Smart Cart.                                                                 |
| smart-cart-hide-qty            | Will hide the quantity selector for any items containing this tag.                                                                                                  |
| smart-cart-shipping-excluded   | When this tag is added to a product the cost of the product will not count toward the free shipping threshold                                                       |
| smart-cart-hide-bundle-options | Will hide the bundle dropdown in Smart Cart for the associated item (Shopify bundles only, recommended if the bundle item is a prebuilt bundle with no variants).   |
| smart-cart-disable-click       | Will prevent the line item's product title and product image from being clickable. This prevents users from being able to navigate to the line item's product page. |
| smart-cart-disable-quantity    | Will disable the line item's quantity selector buttons for both increment and decrement.                                                                            |

---

# Settings (11.7KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-settings.md

The Smart Cart settings page can be found on the left hand navigation bar by clicking on "Smart Cart". Below is a list of all of the available settings and short descriptions. These settings can all be manipulated on the fly via the Rebuy object. In order to view the settings object on a merchants site you can run window\.Rebuy.SmartCart.settings in the console. Adjusting these settings with JavaScript and the Smart Cart or Cart events, developers are able to provide amazing functionality beyond the standard settings available in the app.

```javascript
const SmartCart = window.Rebuy.SmartCart;
```

!!! success "Advanced Settings Callbacks"
    At the bottom we have our advanced setting which contain JavaScript callbacks for various actions of the Smart Cart. Event listeners for other Rebuy events can be added into these callbacks as you will see in the example.


## Live Mode

When live mode is enabled this means that the Smart Cart will be live on the merchants site and running as the cart drawer solution for that site. When live mode is not enabled, this means that the Smart Cart can be viewed in Rebuys preview mode. Preview mode can be turned on by clicking the "Preview" link which will open the merchants site in Rebuy's preview mode. You will see a flag across the bottom of the site to notify you that you are now in preview mode.

![Live Mode toggle with Preview link](../assets/images/606d0c0-Screenshot_041322_033848_PM.jpg)

```javascript
SmartCart.settings.preview_mode;
```

## Announcement Bar

The announcement bar will display messages at the top of the Smart Cart. If there are multiple messages they will rotate through a carousel. This carousel is powered by Flickity.js.

![Announcement Bar settings with sample message field](../assets/images/aa84571-Screenshot_041322_033929_PM.jpg)

```javascript
SmartCart.settings.announcement_bar;
```

## Multi-Tier Progress Bar

The Multi-Tier Progress Bar is a versatile way to incentivize customers to increase their order size. This new setting will replace the previously used Free Shipping bar setting. Up to 4 Tiers can be added to allow customers to unlock Free Products or Free Shipping at certain cart subtotals.

**Set Countries** (optional)\
Merchants can add two-character country codes to show the Progress Bar only in certain countries. This setting can also be used to create multiple bars (up to 3).

There are two available layouts for displaying free products in the Smart Cart - in-line with the Shipping Bar, or below the cart line items.

**Free Product Tiers**\
The Free Product tier enables a product (or specific product variants) to be used as a Free Product once the customer reaches a certain cart subtotal. There are also feedback labels that can be customized as needed.

**Free Shipping Tier**\
The Free Shipping tier uses a similar configuration to the previous Free Shipping Bar. Merchants can configure the Free Shipping to be unlocked using a Minimum Price, multiple different prices (using Presentment Currencies), or using a Subscription Product. There are also feedback labels that can be customized as needed.

![Tiered Progress Bar with Free Shipping and Free Product tier configuration](../assets/images/f7d3f08-image.png)

**Updates from the Free Shipping Bar**\
If you have a custom solution that interacted with the previous Free Shipping Bar, you may need to make adjustments to your code.

The previous Free Shipping settings were accessed using `Rebuy.SmartCart.settings.free_shipping`, but the Progress Bar settings will be accessible via `Rebuy.SmartCart.progressBar`.

If you used custom code to check for the Free Shipping minimum price, you would need to adjust the code to look for the Free Shipping *tier* minimum instead:

```javascript
// how to access a free shipping tier in the Progress Bar
const freeShippingTier = Rebuy.SmartCart.progressBar.tiers.find(tier => tier.type === 'shipping');

// how to access the free shipping minimum
freeShippingTier.minimum;
```

If you are using a **[Custom Smart Cart Template](smart-cart-custom-template.md)**, you should also make sure you update the base template to include the Progress Bar.

## Free Shipping Bar (Legacy)

The Free Shipping bar was a visual display that notified customers how far they were away from free shipping.

![Free Shipping settings with minimum price and customizable labels](../assets/images/a19ee9f-Screenshot_041322_034004_PM.jpg)

This can be adjusted dynamically in order to add multiple rules as shown in the example below. When wrapped in the "rebuy:cart.change" event we are able to listen for changes to the cart and subtotal to change to a new threshold and push customers to spend more to get a free gift. In this case we need to use the raw endraw tags so that the double curly braces do not get parsed via liquid.

```javascript
document.addEventListener('rebuy:cart.change', function(event){
  const settings = window.Rebuy.SmartCart.settings;
	const cartTotal = window.Rebuy.Cart.cart.total_price;
	if (cartTotal >= 5000) {
		settings.free_shipping.minimum = 7000;
		settings.language.free_shipping_remaining = "Free shipping acheived! Spend {% raw %}{{remaining_amount}}{% endraw %} more for a <b>FREE GIFT!</b>";
	} else {
		settings.free_shipping.minimum = 5000;
		settings.language.free_shipping_remaining = "You are {% raw %}{{remaining_amount}}{% endraw %}away from <b>FREE SHIPPING!</b>";
	}
});
```

```javascript
SmartCart.settings.free_shipping;
```

## Switch to Subscription

The Switch to Subscription setting enables a button and select dropdown group. If a customer adds a onetime item that has a subscription option then they can click on the switch to subscription button to "Upgrade" to subscription. Then they can adjust the shipping intervals via the dropdown.

![Switch to Subscription settings with upgrade and downgrade labels](../assets/images/873afe4-Screenshot_041422_024401_PM.jpg)

```javascript
SmartCart.settings.switch_to_subscription;
```

## Cart Cross-Sells Widgets

This makes it very easy to add cross selling ability to the Smart Cart. You can just click on the "Create Cart Flyout Widget" button and enable that widget. Clicking on the widget will take you to the settings page for that widget where merchants can customize the look and adjust the data source.

![Cross-Sells Widgets configuration with widget selector](../assets/images/f71de81-Screenshot_041422_024901_PM.jpg)

```javascript
SmartCart.settings.cross_sells;
```

## Language

The main point to note here is the ability to add a link in the empty cart message. Typically merchants will use this to navigate to a collections page of popular products.

![Language settings for cart title, empty cart message, and subtotal text](../assets/images/0b68a28-Screenshot_042122_024647_PM.jpg)

```javascript
SmartCart.settings.language;
```

## Discount

This feature allows customers the ability to add a Shopify discount code and see the discount that they would receive upon checkout. This feature makes a request to checkout in order to confirm the validity of the discount code as well as the discount associated with that code.

![Discount code settings with label customization](../assets/images/f7cc2f0-Screenshot_041422_030410_PM.jpg)

```javascript
SmartCart.settings.discount;
```

## Checkout, View Cart and Continue Shopping buttons

The button selections at the bottom of the Smart Cart. Navigate straight to checkout, go to the cart page or continue shopping which closes the Smart Cart.

![Checkout button settings with routing and additional button toggles](../assets/images/0404e4c-Screenshot_041422_030522_PM.jpg)

```javascript title="SmartCart.settings.checkout_button;"
SmartCart.settings.language.checkout_label;

SmartCart.settings.view_cart_button;
SmartCart.settings.language.view_cart_label;

SmartCart.settings.language.continue_shopping_label;
```

## Disable Cart Page

This setting makes it so that cart page cannot be accessed. If this setting is enabled, when Rebuy loads in the user will instead be redirected to the home page and the Smart Cart will open for them to now adjust or view their cart items as needed.

![Disabled Cart Page toggle](../assets/images/c6fc5e0-Screenshot_041422_030801_PM.jpg)

```javascript
SmartCart.settings.disable_cart_page;
```

## Payment Installments

If the merchant uses a payment provider like AfterPay they can display a message of how much the purchase would cost with X amount of payments. The terms URL is a link that is used to allow the customer to check on the terms of using this payment provider.

![Payment Installments with AfterPay provider configuration](../assets/images/4abf23f-Screenshot_041422_030856_PM.jpg)

```javascript
SmartCart.settings.installments;
```

## Theme Selectors

Theme selectors accept CSS style notation in order to update the cart quantity or subtotal whenever the cart changes so that the stores theme and the Smart Cart are in sync.

!!! warning "Avoid Broad Selectors"
    Make sure that you target a specific class of id here as this uses a querySelectorAll("p"); type of functionality and will manipulate all elements. (i.e. if you are to simple place a "p" in one of these fields then all "p"/paragraph tags will be adjusted on cart change)


![Theme Selectors for cart count and subtotal CSS selectors](../assets/images/c87cc79-Screenshot_041422_031018_PM.jpg)

```javascript
SmartCart.settings.selectors;
```

## Product Form Redirect

![Product Form Redirect dropdown](../assets/images/654353d-Screenshot_041422_031059_PM.jpg)

```javascript
SmartCart.settings.product_form_redirect;
```

## Terms and Conditions

When enabled this will provide a checkbox this the terms text in which customers have to accept before they are allowed to continue to checkout.

![Terms and Conditions with rich text editor](../assets/images/f320b72-Screenshot_041422_031222_PM.jpg)

```javascript
SmartCart.settings.terms;
```

## Custom Code

This text input accepts custom HTML which can be used to create one off Smart Cart apps. Script tags can also be added in to provide functionality via JavaScript.

![Custom Code input for HTML and JavaScript](../assets/images/95d6d62-Screenshot_041422_031435_PM.jpg)

## Apps

![Smart Cart Apps table with live toggle and location settings](../assets/images/d9eb14b-Screenshot_041422_031525_PM.jpg)

## Advanced

The advanced settings contains Smart Cart attribution tracking which tracks all products that have been purchased through the Smart Cart. When disabled Rebuy will not track products that have been managed by the Smart Cart.

The Event Callbacks give you the ability to add custom JavaScript through the lifecycle of the Smart Cart and pass in the Smart Cart instance where you can adjust settings dynamically and according to custom logic as desired.

![Advanced settings with event callback checkboxes](../assets/images/5e38395-Screenshot_051722_024549_PM.jpg)

These callbacks can be extremely helpful to provide a custom experience. In the example below, we are adding an event listener for Rebuy Cart Change within the Ready callback to either display or hide the Smart Cart announcement bar.

```javascript title="Ready Callback"
const shouldDisplayAnnouncement = () => {
  const Cart = window.Rebuy.Cart
  const announcementBar = document.querySelector("#rebuy-smart-cart-announcement-bar");
  console.log('rebuy:cart.change event', Cart);
  if (Cart.cart.item_count > 1) {
    announcementBar.style.visibility = "hidden";
  } else {
    announcementBar.style.visibility = "visible";
  }
}

document.addEventListener('rebuy:cart.change', function (event) {
    shouldDisplayAnnouncement();
});

shouldDisplayAnnouncement();
```

![Advanced settings with Ready callback JavaScript example](../assets/images/f127a27-Rebuy.png)

---

# Event Listeners (4.4KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-event-listeners.md

These events trigger within the Smart Cart lifecycle. Since Smart Cart extends the cart object, [Cart events](cart-event-listeners.md) like `rebuy:cart.change` can also be used for cart-based logic.

You can also add these as anonymous functions in Smart Cart settings under the "Advanced" section—no theme code changes required.

## Init

Triggers when the Smart Cart begins initialization.

```javascript
document.addEventListener('rebuy:smartcart.init', (event) => {
  const { smartcart } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartcart` | object | The Smart Cart instance |

## Ready

Triggers when the Smart Cart has fully initialized and is ready.

```javascript
document.addEventListener('rebuy:smartcart.ready', (event) => {
  const { smartcart } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartcart` | object | The Smart Cart instance |

## Show

Triggers when the Smart Cart is shown. Can also be triggered via `window.Rebuy.SmartCart.show()`.

```javascript
document.addEventListener('rebuy:smartcart.show', (event) => {
  const { smartcart } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartcart` | object | The Smart Cart instance |

## Hide

Triggers when the Smart Cart is hidden. Can also be triggered via `window.Rebuy.SmartCart.hide()`.

```javascript
document.addEventListener('rebuy:smartcart.hide', (event) => {
  const { smartcart } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartcart` | object | The Smart Cart instance |

## Item Increase

Triggers when an item's quantity is increased in the Smart Cart.

```javascript
document.addEventListener('rebuy:smartcart.line-item-increase', (event) => {
  const { smartcart, item } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartcart` | object | The Smart Cart instance |
| `item` | object | The cart item that was increased |

## Item Decrease

Triggers when an item's quantity is decreased in the Smart Cart.

```javascript
document.addEventListener('rebuy:smartcart.line-item-decrease', (event) => {
  const { smartcart, item } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartcart` | object | The Smart Cart instance |
| `item` | object | The cart item that was decreased |

## Item Removed

Triggers when a customer removes an item from the Smart Cart.

```javascript
document.addEventListener('rebuy:smartcart.line-item-removed', (event) => {
  const { smartcart, item } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartcart` | object | The Smart Cart instance |
| `item` | object | The cart item that was removed |

## Item Switched to Subscription

Triggers when an item is switched to subscription within the Smart Cart.

```javascript
document.addEventListener('rebuy:smartcart.item-switch-to-subscription', (event) => {
  const { smartcart, item } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartcart` | object | The Smart Cart instance |
| `item` | object | The cart item that was switched |

## Item Switched to One-time

Triggers when an item is switched to one-time purchase within the Smart Cart.

```javascript
document.addEventListener('rebuy:smartcart.item-switch-to-one-time', (event) => {
  const { smartcart, item } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartcart` | object | The Smart Cart instance |
| `item` | object | The cart item that was switched |

## Related

- [Cart Event Listeners](cart-event-listeners.md) - Events for the underlying cart object
- [Widget Event Listeners](widget-event-listeners.md) - Events for recommendation widgets

---

# Smart Cart Custom Template (39.3KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-custom-template.md

## Legacy Smart Cart Custom Templates

!!! warning "Legacy Smart Cart Only"
    This template applies to the Legacy Smart Cart
    If you're interested in using Custom Templates for a new Smart Cart, you can access the templates within the editor experience in your Rebuy Admin.


Below is the template for the Smart Cart that loads in with Rebuy. This can be used to customize the layout or add additional layout or functionality that is not achievable with the Smart Cart settings.

The Smart Cart is created in Vue.js and so can utilize Vue.js attributes. For example conditional rendering can be achieved with the v-if attribute. This can also utilize any globally accessible function if a new function is needed to provide alternate user experience.

To use this template, create a new snippet (typically named 'rebuy-cart-template') and paste the below code there. Then, in the theme.liquid file, render this snippet with {% render 'rebuy-cart-template' %} just above the bottom of the closing body tag.  We wrap the template with {% raw %} {% endraw %} so that the double curly brace syntax of Vue.js does not get parsed as liquid. Sometimes, developers will need to access other liquid snippets. To do this, you can end the raw portion when needed and begin the raw portion once done with liquid code.

When Rebuy loads in it will search to see if there is a custom template in the theme code and if so it will use this instead of the standard template that loads in with Rebuy.

Many developers have created and styled amazing Smart Carts by using a custom template like this one below.

![Smart Cart drawer with items, subscription upsell, and product recommendations](../assets/images/746d4e1-Screenshot_042122_033402_PM.jpg)

```html title="Last Updated: January 2, 2026"
{% raw %}
<script id="rebuy-cart-template" type="text/template">
<div
  id="rebuy-cart"
  class="rebuy-cart"
  v-cloak
  v-bind:class="[visible ? 'is-visible' : '', 'currency-' + currency() ]"
  role="dialog"
  aria-modal="true"
  aria-labelledby="SmartCart_title"
  v-bind:aria-hidden="!visible ? 'true' : 'false'"
>
  <div class="rebuy-cart__flyout">
    <div class="rebuy-cart__flyout-header">
      <div v-html="renderHeader()"></div>
      <button
        class="rebuy-cart__flyout-close"
        type="button"
        v-on:click="hide()"
        aria-label="Close Cart"
      >
        <rebuy-icon name="x"></rebuy-icon>
      </button>
    </div>
    <div class="rebuy-cart__flyout-body">
      <div
        class="rebuy-cart__flyout-announcement-bar"
        id="rebuy-smart-cart-announcement-bar"
        v-if="announcementBarEnabled()"
      >
        <div
          class="rebuy-cart__flyout-announcement-bar-message"
          v-for="message in settings.announcement_bar.messages"
          v-html="message"
        ></div>
      </div>

      <div
        class="rebuy-cart__flyout-shipping-bar"
        v-if="freeShippingEnabled()"
        v-bind:class="[ freeShippingHelperMessage() ? 'has-helper' : '', hasFreeShipping() ? 'has-free-shipping': '' ]"
      >
        <div
          class="rebuy-cart__flyout-shipping-bar-message"
          v-if="!hasFreeShipping()"
          v-html="freeShippingRemainingMessage()"
        ></div>
        <div
          class="rebuy-cart__flyout-shipping-bar-message"
          v-if="hasFreeShipping()"
          v-html="freeShippingCompleteMessage()"
        ></div>
        <div
          class="rebuy-cart__flyout-shipping-bar-meter"
          v-bind:class="[hasFreeShippingProgress() ? 'has-progress' : 'no-progress']"
        >
          <span id="free-shipping-progress-label" class="rebuy-cart__flyout-shipping-bar-meter-fill-text">
            Progress to free shipping: {{ freeShippingPercentComplete() }}
          </span>
          <div
            class="rebuy-cart__flyout-shipping-bar-meter-fill"
            v-bind:style="{ width: freeShippingPercentComplete() }"
            role="progressbar"
            tabindex="0"
            aria-valuemin="0"
            aria-valuemax="100"
            v-bind:aria-valuenow="freeShippingPercentComplete(false, true)"
            aria-labelledby="free-shipping-progress-label"
          ></div>
        </div>
        <div
          class="rebuy-cart__flyout-shipping-bar-helper"
          v-if="freeShippingHelperMessage()"
          v-html="freeShippingHelperMessage()"
        ></div>
      </div>

      <div v-else-if="progressBarEnabled()" class="rebuy-cart__progress-bar-container above">
        <div v-for="bar in settings.progress_bar.bars" v-if="isValidBar(bar)">
          <div class="rebuy-cart__progress-step-wrapper" v-bind:class="[ 'count-' + bar.tiers.length ]">
            <div v-for="tier in bar.tiers" class="rebuy-cart__progress-step" v-bind:style="{ width: progressStepMaxWidth(bar) }" v-bind:class="[ progressTierReached(tier) ? 'complete' : '' ]">
              <div class="rebuy-cart__progress-step-icon" v-html="progressTierIcon(tier)"></div>
              <span class="rebuy-cart__progress-step-label">{{ getTierLabel(tier)}}</span>
            </div>
          </div>

          <div class="rebuy-cart__progress-bar-wrapper">
            <div class="rebuy-cart__progress-bar-meter" v-bind:class="[hasTierProgress() ? 'has-progress' : 'no-progress']">
              <div
                class="rebuy-cart__progress-bar-meter-fill"
                v-bind:style="{ width: tiersPercentageComplete(bar) }"
                role="progressbar"
                tabindex="0"
                aria-valuemin="0"
                aria-valuemax="100"
                v-bind:aria-valuenow="tiersPercentageComplete(bar, true)"
                aria-labelledby="rebuy-cart__progress-bar-meter-label"
              >
                <span class="sr-only"></span>
              </div>
            </div>

            <div id="rebuy-cart__progress-bar-meter-label" class="rebuy-cart__progress-bar-prompt" v-if="hasProgressPrompt(bar)" v-html="getTierFeedbackText(bar)"></div>
          </div>

          <div class="rebuy-cart__progress-free-products" v-if="getBarLayout(bar) == 'above' && earnedProducts(bar).length > 0">
            <div class="rebuy-cart__progress-free-products-title">Free Gifts</div>
            <div class="rebuy-cart__progress-free-products-list" ref="freeProductList">
              <div v-for="product in earnedProducts(bar)" class="rebuy-cart__progress-free-product" v-bind:style="[ freeProductTileStyle(bar) ]">
                <div class="rebuy-cart__progress-free-product-image" v-bind:style="freeProductStyles(product)"></div>
                <div class="rebuy-cart__progress-free-product-info">
                  <div>
                    <p class="rebuy-cart__progress-free-product-title" v-html="product.title"></p>
                    <span v-if="product.chosen_variant" class="rebuy-cart__progress-free-product-variant-title" v-html="getFreeVariantTitle(product)"></span>
                  </div>
                  <div v-if="!product.chosen_variant" class="rebuy-cart__progress-free-product-variant-select-container">
                    <select class="rebuy-cart__progress-free-product-variant-select" v-on:change="selectFreeProductVariant($event, product)">
                      <option value="" disabled selected>Select Variant</option>
                      <option v-for="variant in freeProductOptions(product)" v-bind:value="variant.id">{{ variant.title }}</option>
                    </select>
                    <div class="rebuy-cart__progress-free-product-variant-select-prompt" v-html="freeProductPrompt(product)"></div>
                  </div>
                </div>
                <button
                  v-show="product.chosen_variant"
                  class="rebuy-cart__progress-free-product-remove"
                  v-on:click="removeFreeProduct(product)"
                >
                  <rebuy-icon name="x"></rebuy-icon>
                  <span class="sr-only">Remove {{ product.title }} {{ product.chosen_variant?.title ? product.chosen_variant.title : '' }} from Cart</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="rebuy-cart__flyout-content"
        v-bind:class="[ hasItems() ? 'has-items' : 'no-items' ]"
      >
        <ul class="rebuy-cart__flyout-items" v-if="hasItems()" data-smartcart-items tabindex="0" role="group">
          <li
            class="rebuy-cart__flyout-item"
            v-for="item in items()"
            v-if="!isHiddenItem(item)"
            :key="item.key"
            v-bind:class="[ 'product-' + item.handle, itemProductTagsClasses(item), itemPropertyClasses(item) ]"
            aria-label="product"
          >
            <div class="rebuy-cart__flyout-item-media">
              <a
                v-bind:aria-disabled="!isItemClickable(item)"
                v-bind:aria-label="itemLinkLabel(item)"
                v-bind:class="[{ 'click-disabled': !isItemClickable(item) }]"
                v-bind:href="isItemClickable(item) ? itemURL(item) : null"
              >
                <img
                  v-bind:src="sizeImage(item.image, '240x240')"
                  v-bind:alt="itemImageAlt(item)"
                />
              </a>
            </div>
            <div class="rebuy-cart__flyout-item-info">
              <a
                role="heading"
                aria-level="5"
                v-bind:aria-disabled="!isItemClickable(item)"
                v-bind:class="[
                  'rebuy-cart__flyout-item-product-title',
                  { 'click-disabled': !isItemClickable(item) }
                ]"
                v-bind:href="isItemClickable(item) ? itemURL(item) : null"
                v-html="item.product_title"
                v-bind:tabindex="isItemClickable(item) ? 0 : -1"
              ></a>
              <div
                class="rebuy-cart__flyout-item-variant-title"
                v-html="item.variant_title"
                v-if="item.variant_title"
                tabindex="0"
              ></div>

              <div
                class="rebuy-cart__flyout-item-discount-message"
                v-if="hasLineItemDiscount(item)"
                v-html="lineItemDiscountMessage(item)"
              ></div>

              <div
                class="rebuy-cart__flyout-item-properties"
                v-if="hasItemProperties(item)"
              >
                <div
                  class="rebuy-cart__flyout-item-property rebuy-cart__flyout-item-property--delivery-frequency"
                  v-if="itemDeliveryFrequency(item)"
                  v-html="itemDeliveryFrequency(item)"
                ></div>
                <div
                  class="rebuy-cart__flyout-item-property"
                  v-for="property in itemProperties(item)"
                  v-bind:class="[ itemPropertyKeyClass(property), itemPropertyValueClass(property) ]"
                >
                  <span
                    class="rebuy-cart__flyout-item-property-name"
                    v-html="property.key"
                  ></span>
                  <span class="rebuy-cart__flyout-item-property-separator">
                    :
                  </span>
                  <span
                    class="rebuy-cart__flyout-item-property-value"
                    v-html="property.value"
                  ></span>
                </div>
              </div>

              <button
                class="rebuy-cart__flyout-item-remove"
                type="button"
                v-bind:aria-label="'Remove ' + item.product_title"
                v-on:click="removeItem(item)"
              >
                <rebuy-icon
                  v-bind:name="(item.status == 'removing') ? 'refresh-cw' : 'trash'"
                  v-bind:spin="item.status == 'removing'"
                ></rebuy-icon>
              </button>

              <div class="rebuy-cart__flyout-item-quantity">
                <div
                  class="rebuy-cart__flyout-item-quantity-widget"
                  v-if="hideQuantitySelectors && !hideQuantitySelectors(item)"
                >
                  <button
                    class="rebuy-cart__flyout-item-quantity-widget-button"
                    v-bind:aria-label="'Decrease quantity of ' + item.product_title"
                    v-on:click="decreaseItem(item)"
                    v-bind:disabled="!isQuantityEnabled(item)"
                    type="button"
                  >
                    <rebuy-icon
                      v-bind:name="(item.status == 'decreasing') ? 'refresh-cw' : 'minus'"
                      v-bind:spin="item.status == 'decreasing'"
                    ></rebuy-icon>
                  </button>

                  <span
                    class="rebuy-cart__flyout-item-quantity-widget-label"
                  >
                    <span class="sr-only">Quantity of {{ item.product_title }}</span>
                    {{ item.quantity }}
                  </span>

                  <button
                    class="rebuy-cart__flyout-item-quantity-widget-button"
                    v-bind:aria-label="'Increase quantity of ' + item.product_title"
                    v-on:click="increaseItem(item)"
                    v-bind:disabled="!isQuantityEnabled(item)"
                    type="button"
                  >
                    <rebuy-icon
                      v-bind:name="(item.status == 'increasing') ? 'refresh-cw' : 'plus'"
                      v-bind:spin="item.status == 'increasing'"
                    ></rebuy-icon>
                  </button>
                </div>
              </div>

              <div class="rebuy-cart__flyout-item-price">
                <div v-if="itemHasDiscount(item)">
                  <span
                    class="rebuy-money sale"
                  >
                    <span class="sr-only">Sale price</span>
                    <span tabindex="0" v-html="formatMoney(itemPrice(item))"></span>
                  </span>
                  <span
                    class="rebuy-money compare-at"
                  >
                    <span class="sr-only">Original price</span>
                    <span v-html="formatMoney(compareAtPrice(item))"></span>
                  </span>
                </div>
                <div v-if="!itemHasDiscount(item)">
                  <span
                    class="rebuy-money"
                  >
                    <span class="sr-only">Price</span>
                    <span tabindex="0" v-html="formatMoney(itemPrice(item))"></span>
                  </span>
                </div>
              </div>

              <div class="rebuy-cart__flyout-item-bundle" v-if="itemIsBundle(item) && !hideBundleOptions(item)">
                <button
                  class="rebuy-cart__flyout-item-bundle-show-button"
                  v-if="itemBundleLength(item) > 0 && !isSeeingBundle(item)"
                  v-on:click="toggleActiveBundle(item)"
                  type="button"
                  v-bind:aria-label="'Expand bundle of ' + item.product_title"
                  >
                    Show
                    <span v-html="itemBundleLength(item)"></span>
                    items
                    <span class="rebuy-cart__flyout-bundle-chev-icon">
                      <rebuy-icon name="chevron-down"></rebuy-icon>
                    </span>
                </button>

                <button
                  class="rebuy-cart__flyout-item-bundle-hide-button"
                  v-if="itemBundleLength(item) > 0 && isSeeingBundle(item)"
                  v-on:click="toggleActiveBundle(item)"
                  type="button"
                  v-bind:aria-label="'Collapse bundle of ' + item.product_title"
                  >
                    Hide
                    <span v-html="itemBundleLength(item)"></span>
                    items
                    <span class="rebuy-cart__flyout-bundle-chev-icon">
                      <rebuy-icon name="chevron-up"></rebuy-icon>
                    </span>
                </button>

                <ul
                  class="rebuy-cart__flyout-item-bundle-children"
                  v-if="itemBundleLength(item) > 0 && isSeeingBundle(item)"
                  tabindex="0"
                  >
                  <li class="rebuy-cart__flyout-item-bundle-child" v-for="(option, index) in item.options_with_values">
                      <div class="rebuy-cart__flyout-item-bundle-child-left">
                        <div class="rebuy-cart__flyout-item-bundle-image-container">
                          <img
                            v-bind:src="getBundleOptionImage(item.product, option, index)"
                            v-bind:alt="childBundleTitle(option)"
                            class="rebuy-cart__flyout-item-bundle-image"
                          />
                        </div>
                      </div>

                      <div class="rebuy-cart__flyout-item-bundle-child-right">
                        <h5 v-html="childBundleTitle(option)" class="rebuy-cart__flyout-item-bundle-title"></h5>
                        <p v-html="option.value" class="rebuy-cart__flyout-item-bundle-value"></p>
                      </div>
                  </li>
                </ul>
              </div>
            </div>

            <div
              v-if="itemHasBMSM(item) && bMSMFinalTierNotReached(item)"
              class="rebuy-cart__flyout-item-buy-more-save-more"
            >
              <div
                v-if="hasBMSMButtons()"
                class="rebuy-cart__flyout-item-buy-more-save-more-container"
              >
                <div
                  v-for="tier in getBMSMTiers()"
                  class="rebuy-cart__flyout-item-buy-more-save-more-button-container"
                  v-if="tier.quantity > item.quantity"
                >
                  <button
                    v-on:click="adjustBMSMQuantity(item, tier)"
                    class="rebuy-button rebuy-cart__flyout-item-buy-more-save-more-button"
                    v-bind:aria-label="getBMSMButtonText(tier)"
                  >
                    <span v-html="getBMSMButtonText(tier)"></span>
                  </button>
                </div>
              </div>

              <span
                v-if="!hasBMSMButtons()"
                class="rebuy-cart__flyout-buy-more-save-more-dynamic-message-text"
                v-html="buyMoreSaveMoreDynamicText(item)"
              ></span>
            </div>

            <div
              class="rebuy-cart__flyout-item-subscription"
              v-if="hasSwitchToSubscription(item)"
            >
              <button
                class="rebuy-button outline"
                v-if="!item.product.subscription || item.status == 'downgrading' || item.status == 'upgrading'"
                v-bind:aria-label="'Switch ' + item.product_title + ' to a Subscription'"
                v-bind:disabled="(item.status == 'downgrading' || item.status == 'upgrading')"
                v-on:click="updateItemDeliveryFrequency(item, selectedSubscriptionFrequency(item, 0), 'onetime')"
                type="button"
              >
                <span v-html="switchToSubscriptionLabel(item)"></span>
              </button>

              <select
                class="rebuy-select muted"
                aria-label="Subscription delivery frequency"
                v-if="item.product.subscription && item.status != 'downgrading'"
                v-model="item.product.subscription_frequency"
                v-on:change="updateItemDeliveryFrequency(item)"
              >
                <optgroup
                  v-if="!item.product.is_subscription_only && !subscriptionDowngradeDisabled()"
                  v-bind:label="onetimeOptionGroupLabel(item)"
                >
                  <option
                    v-bind:value="'onetime'"
                    v-html="onetimeOptionLabel(item)"
                  ></option>
                </optgroup>
                <optgroup v-bind:label="subscriptionOptionGroupLabel(item)">
                  <option
                    v-for="frequency in subscriptionFrequencies(item)"
                    v-bind:value="frequency"
                    v-html="subscriptionOptionLabel(item, frequency, item.product.subscription_interval)"
                  ></option>
                </optgroup>
              </select>
            </div>
          </li>
        </ul>
        <div class="rebuy-cart__flyout-note" v-if="notesEnabled()">
          <label class="rebuy-cart__flyout-note-toggle">
            <input
              class="rebuy-cart__flyout-note-toggle-input rebuy-checkbox"
              type="checkbox"
              v-model="notes.visible"
              v-on:click="notesToggle()"
            />
            <span
              class="rebuy-cart__flyout-note-toggle-label"
              v-html="settings.language.notes_label"
            ></span>
          </label>
          <div
            class="rebuy-cart__flyout-note-content"
            v-if="notesIsVisible()"
          >
            <textarea
              id="rebuy-cart-notes"
              class="rebuy-textarea rebuy-cart__flyout-note-textarea"
              v-model="notes.value"
              v-on:keyup="notesChange($event)"
              v-on:keydown="notesChange($event)"
              v-on:change="notesChange($event)"
              v-bind:placeholder="settings.language.notes_placeholder"
            ></textarea>
            <small
              id="rebuy-cart-characters-remaining"
              v-html="notesRemainingCharacters()"
            ></small>
          </div>
        </div>


        <div class="rebuy-cart__flyout-empty-cart" v-html="emptyCartMessage()" v-if="!hasItems()"></div>
        <div class="rebuy-cart__flyout-empty-cart-footer" v-if="!hasItems()">
          <div data-app-target="empty_cart"></div>
        </div>

        <div class="rebuy-cart__flyout-recommendations" v-if="hasCrossSells()">
          <div
            v-for="widget_id in settings.cross_sells"
            v-bind:data-rebuy-id="widget_id"
          ></div>
        </div>

        <div class="rebuy-cart__upsells" v-if="hasPrePurchase()">
          <div v-bind:data-rebuy-id="settings.pre_purchase.id"></div>
        </div>
      </div>

      <div v-if="progressBarEnabled()" class="rebuy-cart__progress-bar-container below">
        <div class="rebuy-cart__progress-free-products" v-for="bar in settings.progress_bar.bars" v-if="isValidBar(bar) && getBarLayout(bar) == 'below' && earnedProducts(bar).length > 0">
          <div class="rebuy-cart__progress-free-products-title">Free Gifts</div>
          <div class="rebuy-cart__progress-free-products-list" ref="freeProductList">
            <div v-for="product in earnedProducts(bar)" class="rebuy-cart__progress-free-product" v-bind:style="[ freeProductTileStyle(bar) ]">
              <div class="rebuy-cart__progress-free-product-image" v-bind:style="freeProductStyles(product)"></div>
              <div class="rebuy-cart__progress-free-product-info">
                <div>
                  <p class="rebuy-cart__progress-free-product-title" v-html="product.title"></p>
                  <span v-if="product.chosen_variant" class="rebuy-cart__progress-free-product-variant-title" v-html="product.chosen_variant.title"></span>
                </div>
                <div v-if="!product.chosen_variant" class="rebuy-cart__progress-free-product-variant-select-container">
                  <select class="rebuy-cart__progress-free-product-variant-select" v-on:change="selectFreeProductVariant($event, product)">
                    <option value="" disabled selected>Select Variant</option>
                    <option v-for="variant in freeProductOptions(product)" v-bind:value="variant.id">{{ variant.title }}</option>
                  </select>
                  <div class="rebuy-cart__progress-free-product-variant-select-prompt" v-html="freeProductPrompt(product)"></div>
                </div>
              </div>
              <button
                v-show="product.chosen_variant"
                class="rebuy-cart__progress-free-product-remove"
                v-on:click="removeFreeProduct(product)"
                v-bind:aria-label="'Remove ' + product.title +  ' ' + (product.chosen_variant?.title)"
              >
                <rebuy-icon name="x"></rebuy-icon>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="rebuy-cart__flyout-footer" v-show="hasItems()">

      <div class="rebuy-cart__flyout-discount-container" v-if="discountEnabled()">

        <form class="rebuy-cart__flyout-discount-form" v-if="shouldShowDiscountInput()" v-on:submit="applyDiscount(null, $event)">
          <div
            class="rebuy-input-wrapper rebuy-input-wrapper--floating-label"
            v-bind:class="[discount.inputValue ? 'show-label' : '' ]"
          >
            <span
              class="rebuy-input-label"
              v-html="settings.language.discount_code_label"
            ></span>
            <input
              class="rebuy-input"
              v-model="discount.inputValue"
              v-bind:placeholder="settings.language.discount_code_label"
              v-bind:disabled="discount.loading"
              id="rebuy-discount-input"
              aria-label="Input Discount"
              autocomplete
            />
          </div>
          <button
            class="rebuy-button"
            v-bind:disabled="discount.loading"
          >
            <span v-html="discountButtonLabel()"></span>
          </button>
        </form>

        <div class="rebuy-cart__flyout-discount-error-message" v-if="discount.hasError()" v-html="discount.errorMessage()"></div>

        <div class="rebuy-cart__flyout-discount-tag" v-if="shouldShowDiscountSubtotal()">
          <span class="rebuy-cart__flyout-discount-tag-icon">
            <rebuy-icon name="tag"></rebuy-icon>
          </span>
          <span class="rebuy-cart__flyout-discount-tag-text" v-html="discount.code"></span>
          <span
            class="rebuy-cart__flyout-discount-tag-remove"
            v-on:click="removeDiscount()"
          >
            <rebuy-icon name="x"></rebuy-icon>
          </span>
        </div>

        <div class="rebuy-cart__flyout-discount-amount" v-if="shouldShowDiscountSubtotal()">
          <span v-html="discountTotal()"></span>
        </div>
      </div>

      <div
        class="rebuy-cart__flyout-integration"
        v-if="settings.integrations && settings.integrations.enabled"
      ></div>
      <div class="rebuy-cart__flyout-apps">
        <div data-app-target="above_subtotal"></div>
      </div>

      <div class="rebuy-cart__flyout-subtotal">
        <div class="rebuy-cart__flyout-subtotal-label">
          <span v-html="subtotalLabel()"></span>
        </div>
        <div class="rebuy-cart__flyout-subtotal-amount">
            <span class="sr-only">Cart subtotal</span>
            <span v-html="subtotal()"></span>
        </div>
      </div>
      <div data-app-target="below_subtotal"></div>

      <div class="rebuy-cart__flyout-actions">
        <div
          v-if="settings.terms && settings.terms.enabled"
          class="rebuy-cart__flyout-terms"
        >
          <input
            class="rebuy-cart__flyout-terms-checkbox rebuy-checkbox"
            id="rebuy-terms-checkbox"
            name="rebuy-terms-checkbox"
            type="checkbox"
            v-model="termsAccepted"
            v-on:click="updateTermsCheck()"
          />
          <label
            class="rebuy-cart__flyout-terms-label"
            for="rebuy-terms-checkbox"
            v-html="settings.terms.disclaimer"
          ></label>
        </div>

        <button
          v-show="hasCheckoutButton()"
          class="rebuy-button rebuy-cart__checkout-button block"
          type="button"
          v-on:click="checkout()"
          v-bind:disabled="hasTermsEnabled() && !hasAcceptedTerms()"
        >
          <span v-html="checkoutLabel()"></span>
        </button>

        <button
          v-if="hasViewCartButton()"
          class="rebuy-button rebuy-cart__view-cart-button block"
          v-bind:class="{'outline': hasCheckoutButton()}"
          type="button"
          v-on:click="viewCart()"
        >
          <span v-html="viewCartLabel()"></span>
        </button>

        <button
          v-if="hasContinueShoppingButton()"
          class="rebuy-button rebuy-cart__continue-shopping-button block outline"
          type="button"
          v-on:click="hide()"
        >
          <span v-html="continueShoppingLabel()"></span>
        </button>

        <button
          v-if="hasShopPayButton()"
          class="rebuy-button rebuy-cart__shop-pay-button block"
          v-on:click="shopPayCheckout()"
          aria-label="Checkout with Shop Pay"
        >
          <svg
            width="80"
            height="30"
            viewBox="0 0 4317 1037"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g clip-path="url(#clip0)">
              <path
                d="M1105.96 326.186C1071.34 253.553 1005.7 206.635 906.786 206.635C876.426 207.164 846.593 214.661 819.588 228.543C792.585 242.427 769.128 262.328 751.033 286.711L747.423 291.109V6.44337C747.423 4.7982 746.77 3.22051 745.606 2.05722C744.443 0.8939 742.864 0.240234 741.219 0.240234H601.367C599.742 0.269795 598.194 0.936325 597.055 2.09644C595.915 3.25656 595.277 4.81756 595.277 6.44337V822.999C595.277 824.614 595.92 826.162 597.062 827.304C598.204 828.447 599.752 829.089 601.367 829.089H751.145C752.771 829.089 754.332 828.452 755.492 827.311C756.652 826.172 757.318 824.624 757.348 822.999V474.835C757.348 407.165 802.461 359.231 874.643 359.231C953.592 359.231 973.555 424.195 973.555 490.398V822.999C973.555 824.614 974.196 826.162 975.338 827.304C976.48 828.447 978.03 829.089 979.645 829.089H1129.08C1130.71 829.089 1132.27 828.452 1133.43 827.311C1134.59 826.172 1135.26 824.624 1135.29 822.999V470.549C1135.29 458.481 1135.29 446.638 1133.71 435.135C1131.14 397.437 1121.74 360.519 1105.96 326.186Z"
                fill="white"
              />
              <path
                d="M358.093 447.206C358.093 447.206 281.851 429.273 253.768 422.055C225.684 414.837 176.623 399.498 176.623 362.392C176.623 325.286 216.21 313.443 256.362 313.443C296.513 313.443 341.176 323.143 344.672 367.693C344.813 369.299 345.552 370.791 346.742 371.879C347.933 372.965 349.488 373.563 351.1 373.558L498.734 372.994C499.603 372.996 500.463 372.819 501.26 372.474C502.057 372.129 502.774 371.623 503.367 370.987C503.96 370.353 504.416 369.602 504.705 368.783C504.994 367.963 505.113 367.093 505.05 366.226C495.915 223.668 370.837 172.69 255.459 172.69C118.652 172.69 18.6132 262.917 18.6132 362.392C18.6132 435.025 39.1399 503.147 200.533 550.516C228.842 558.749 267.302 569.463 300.912 578.825C341.288 590.104 363.055 607.134 363.055 633.976C363.055 665.104 317.942 686.758 273.618 686.758C209.444 686.758 163.879 662.961 160.157 620.215C159.963 618.652 159.202 617.212 158.016 616.172C156.831 615.132 155.305 614.564 153.728 614.576L6.43255 615.253C5.569 615.253 4.71432 615.426 3.91928 615.764C3.12425 616.101 2.40528 616.594 1.80527 617.216C1.20527 617.836 0.736446 618.572 0.426968 619.378C0.11749 620.185 -0.0263401 621.045 0.00395994 621.908C6.77099 756.459 136.698 828.978 257.829 828.978C438.283 828.978 519.825 727.474 519.825 632.397C520.051 587.734 509.787 486.003 358.093 447.206Z"
                fill="white"
              />
              <path
                d="M2257.37 206.409C2182.38 206.409 2119.55 247.913 2079.06 297.991V212.274C2079.06 210.678 2078.43 209.145 2077.31 208.007C2076.21 206.868 2074.68 206.213 2073.08 206.185H1933.01C1931.4 206.185 1929.84 206.825 1928.7 207.967C1927.56 209.11 1926.91 210.66 1926.91 212.274V1013.04C1926.95 1014.63 1927.61 1016.16 1928.75 1017.27C1929.89 1018.39 1931.42 1019.02 1933.01 1019.02H2082.9C2084.48 1019.02 2086 1018.39 2087.12 1017.27C2088.24 1016.15 2088.87 1014.62 2088.87 1013.04V749.802H2091.13C2114.92 786.117 2180 829.653 2265.05 829.653C2424.96 829.653 2558.28 697.019 2558.28 517.806C2558.4 345.811 2425.76 206.409 2257.37 206.409ZM2243.5 677.057C2211.94 677.841 2180.83 669.2 2154.2 652.238C2127.57 635.274 2106.58 610.759 2093.93 581.82C2081.29 552.88 2077.55 520.829 2083.21 489.757C2088.85 458.685 2103.64 430.002 2125.66 407.369C2147.69 384.733 2175.96 369.175 2206.87 362.679C2237.77 356.183 2269.91 359.042 2299.18 370.893C2328.46 382.743 2353.53 403.048 2371.22 429.215C2388.9 455.383 2398.38 486.224 2398.47 517.806C2398.79 538.449 2395.03 558.955 2387.42 578.145C2379.81 597.335 2368.47 614.831 2354.07 629.628C2339.68 644.425 2322.5 656.232 2303.51 664.371C2284.54 672.511 2264.15 676.821 2243.5 677.057Z"
                fill="white"
              />
              <path
                d="M1483.34 171.229C1343.6 171.229 1273.9 218.711 1217.95 256.72L1216.26 257.847C1213.38 259.821 1211.35 262.813 1210.57 266.221C1209.8 269.63 1210.34 273.204 1212.09 276.231L1267.35 371.419C1268.39 373.201 1269.81 374.732 1271.5 375.901C1273.2 377.071 1275.13 377.852 1277.17 378.187C1279.16 378.546 1281.2 378.459 1283.15 377.932C1285.1 377.405 1286.91 376.454 1288.45 375.141L1292.84 371.533C1321.6 347.397 1367.73 315.14 1479.39 306.343C1541.53 301.382 1595.22 317.622 1634.8 354.615C1678.34 394.767 1704.4 459.617 1704.4 528.077C1704.4 654.057 1630.18 733.23 1510.97 734.81C1412.73 734.246 1346.75 683.042 1346.75 607.364C1346.75 567.212 1364.91 541.047 1400.33 514.881C1403.03 512.947 1404.94 510.1 1405.71 506.866C1406.48 503.632 1406.05 500.229 1404.5 497.287L1354.87 403.45C1353.96 401.771 1352.72 400.289 1351.23 399.089C1349.74 397.889 1348.03 396.995 1346.19 396.458C1344.31 395.899 1342.34 395.741 1340.4 395.992C1338.45 396.245 1336.58 396.903 1334.91 397.925C1279.2 430.97 1210.85 491.422 1214.57 607.59C1219.08 755.449 1342.02 868.345 1501.83 872.97H1509.84H1520.78C1710.7 866.766 1847.85 725.787 1847.85 534.619C1847.85 359.126 1719.95 171.229 1483.34 171.229Z"
                fill="white"
              />
              <path
                d="M3148.93 261.455H3053.73C3051.51 261.484 3049.37 262.385 3047.79 263.964C3046.2 265.544 3045.3 267.679 3045.29 269.914V469.653C3045.3 471.878 3046.21 473.999 3047.8 475.561C3049.38 477.123 3051.51 478 3053.73 478H3148.93C3206.9 478 3249.65 432.322 3249.65 369.727C3249.65 307.132 3206.9 261.455 3148.93 261.455Z"
                fill="white"
              />
              <path
                d="M3441.38 614.802C3441.38 643.787 3465.85 659.915 3508.48 659.915C3566.45 659.915 3600.73 628.561 3600.73 572.958V556.944L3513.9 561.455C3468.1 563.71 3441.38 582.772 3441.38 614.802Z"
                fill="white"
              />
              <path
                d="M4146.27 2.04983H2867.3C2846.33 2.04981 2825.54 6.18442 2806.17 14.2172C2786.78 22.25 2769.17 34.0237 2754.35 48.8653C2739.51 63.707 2727.75 81.3258 2719.73 100.715C2711.7 120.104 2707.59 140.883 2707.61 161.865V862.026C2707.61 904.392 2724.43 945.025 2754.38 974.992C2784.33 1004.96 2824.95 1021.81 2867.3 1021.84H4146.27C4167.28 1021.9 4188.1 1017.82 4207.53 1009.83C4226.95 1001.84 4244.61 990.093 4259.5 975.273C4274.37 960.45 4286.2 942.839 4294.28 923.445C4302.35 904.052 4306.51 883.258 4306.55 862.252V162.09C4306.58 141.042 4302.47 120.192 4294.43 100.74C4286.39 81.2884 4274.58 63.6179 4259.69 48.7448C4244.8 33.8719 4227.11 22.0899 4207.65 14.0763C4188.19 6.06265 4167.33 1.97545 4146.27 2.04983ZM3153.77 556.609H3053.17C3050.93 556.609 3048.79 557.499 3047.19 559.085C3045.61 560.672 3044.71 562.824 3044.71 565.068V708.302C3044.71 710.545 3043.82 712.697 3042.24 714.283C3040.65 715.87 3038.5 716.761 3036.26 716.761H2965.42C2963.2 716.732 2961.05 715.831 2959.47 714.25C2957.89 712.672 2957.01 710.537 2956.97 708.302V191.639C2956.97 189.397 2957.86 187.245 2959.46 185.658C2961.04 184.072 2963.18 183.181 2965.42 183.181H3153.77C3260.47 183.181 3336.82 260.889 3336.82 369.951C3336.82 479.013 3261.03 556.833 3154.35 556.833L3153.77 556.609ZM3683.86 708.19C3683.88 709.31 3683.68 710.421 3683.25 711.461C3682.83 712.5 3682.21 713.447 3681.43 714.244C3680.63 715.041 3679.7 715.675 3678.66 716.107C3677.64 716.538 3676.52 716.761 3675.4 716.761H3608.52C3607.4 716.761 3606.29 716.538 3605.26 716.107C3604.22 715.675 3603.28 715.041 3602.5 714.244C3601.72 713.447 3601.09 712.5 3600.68 711.461C3600.26 710.421 3600.05 709.31 3600.07 708.19V692.739C3600.17 691.382 3599.85 690.026 3599.12 688.874C3598.41 687.72 3597.34 686.829 3596.06 686.334C3594.8 685.84 3593.41 685.769 3592.1 686.131C3590.77 686.491 3589.62 687.266 3588.79 688.34C3568.82 710.107 3536.34 725.896 3484.57 725.896C3408.34 725.896 3357.91 686.197 3357.91 617.624C3357.18 600.904 3360.63 584.265 3367.96 569.216C3375.28 554.17 3386.26 541.19 3399.88 531.458C3427.39 510.818 3470.02 500.104 3533.29 497.622L3600.39 495.367V475.741C3600.39 436.154 3573.78 419.35 3531.03 419.35C3488.29 419.35 3461.33 434.463 3455.03 459.163C3454.52 460.907 3453.45 462.433 3451.97 463.496C3450.51 464.56 3448.72 465.098 3446.9 465.027H3380.7C3379.48 465.058 3378.27 464.82 3377.15 464.334C3376.05 463.846 3375.04 463.12 3374.23 462.206C3373.43 461.291 3372.83 460.214 3372.49 459.044C3372.14 457.875 3372.05 456.646 3372.24 455.441C3382.17 396.793 3430.66 352.243 3534.09 352.243C3643.94 352.243 3683.52 403.335 3683.52 500.892L3683.86 708.19ZM4100.49 372.995L3951.62 770.108C3917.78 862.364 3858.56 886.05 3793.71 886.05C3781.5 886.348 3769.3 884.866 3757.51 881.652C3755.67 881.157 3754.06 880.073 3752.88 878.563C3751.73 877.056 3751.1 875.208 3751.08 873.305V812.965C3751.08 811.703 3751.35 810.455 3751.88 809.311C3752.42 808.167 3753.19 807.154 3754.16 806.347C3755.14 805.538 3756.27 804.955 3757.49 804.637C3758.71 804.319 3759.99 804.274 3761.23 804.506C3771.46 806.446 3781.84 807.428 3792.25 807.44C3810.18 808.339 3827.9 803.193 3842.57 792.825C3857.22 782.457 3867.98 767.467 3873.11 750.258L3877.52 736.385C3878.2 734.529 3878.2 732.491 3877.52 730.633L3738.33 373.109C3737.91 371.831 3737.79 370.469 3737.99 369.137C3738.2 367.804 3738.71 366.537 3739.47 365.439C3740.26 364.341 3741.29 363.442 3742.48 362.814C3743.67 362.187 3745 361.849 3746.34 361.83H3814.02C3815.75 361.847 3817.43 362.381 3818.86 363.367C3820.29 364.351 3821.39 365.741 3822.02 367.357L3916.54 619.542C3917.17 621.189 3918.27 622.608 3919.72 623.609C3921.18 624.612 3922.89 625.147 3924.66 625.147C3926.41 625.147 3928.15 624.612 3929.59 623.609C3931.04 622.608 3932.16 621.189 3932.77 619.542L4014.78 368.034C4015.32 366.319 4016.41 364.825 4017.87 363.77C4019.33 362.714 4021.08 362.153 4022.88 362.169H4092.26C4093.59 362.163 4094.91 362.475 4096.12 363.073C4097.31 363.673 4098.36 364.545 4099.16 365.62C4099.96 366.695 4100.49 367.942 4100.72 369.263C4100.96 370.582 4100.88 371.938 4100.49 373.221V372.995Z"
                fill="white"
              />
            </g>
            <defs>
              <clipPath id="clip0">
                <rect
                  width="4317"
                  height="1036.76"
                  fill="white"
                  transform="translate(0 0.240234)"
                />
              </clipPath>
            </defs>
          </svg>
        </button>
      </div>

      <div
        class="rebuy-cart__flyout-installments"
        v-if="installmentsEnabled()"
        v-html="installmentsMessage()"
      ></div>

      <div data-app-target="below_checkout"></div>
    </div>
  </div>

  <div class="rebuy-cart__background" v-on:click="hide()"></div>
  <div id="rebuy-cart-live-region" class="sr-only" aria-live="polite"></div>
</div >
</script >
{% endraw %}
```

**NOTE:** The Smart Cart template changes regularly, so check back often to ensure that you have updated to the newest version and can take advantage of the most up-to-date Smart Cart features and functionality.

---

# URL Argument (548B)

Source: https://developers.rebuyengine.com/reference/url-argument.md

## Smart Cart URL Argument

Rebuy supports a URL argument to open the Smart Cart on page load.

**Example:** [https://rebuy-plus-sandbox.myshopify.com/?viewcart=true](https://rebuy-plus-sandbox.myshopify.com/?viewcart=true)

| Argument | Result |
|----------|--------|
| `viewcart=true` | On page load, the Smart Cart will open once Rebuy loads in |

---

# Methods - Legacy (9.9KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-legacy.md

All methods below are as if the Smart Cart object has a reference variable defined as shown in this code snippet. 

```javascript title="Smart Cart reference"
const SmartCart = window.Rebuy.SmartCart;
```

This is not a complete list of the globally available function but the ones that we find most helpful.

## announcementBarEnabled

Returns a boolean (true) if the announcement bar is enabled.

```javascript
SmartCart.announcementBarEnabled();
```

## checkout

When this method is called the customer will be re-directed to the checkout page.

```javascript
SmartCart.checkout();
```

## checkoutLabel

Returns a string which is the label specified in the Smart Cart admin settings for the checkout button.

```javascript
SmartCart.checkoutLabel();
```

## compareAtPrice

Returns the compare at price of the item passed in as an argument. Will return null if the item does not have a compare at price. 

```javascript
SmartCart.compareAtPrice(item);
```

## continueShoppingLabel

Returns a string which is the label specified in the Smart Cart admin settings for the continue shopping button.

```javascript
SmartCart.continueShoppingLabel();
```

## currency

Returns a string which is the currency of the store. (example: 'USD')

```javascript
SmartCart.currency();
```

## decreaseItem

Will decrease the item quantity count of the item that is passed into this method as the first parameter. 

```javascript
SmartCart.decreaseItem(item, callback);
```

## destroy

When this function is called it will remove the Smart Cart from the DOM and delete all events relating to the Smart Cart.

```javascript
SmartCart.destroy();
```

## discountTotal

Returns a string which is a formatted dollar amount of the total discount of the items in the cart.

```javascript
SmartCart.discountTotal(format);
```

## emptyCartMessage

Returns a string which is the message specified from the Smart Cart admin settings.

```javascript
SmartCart.emptyCartMessage();
```

## formatMoney

Provides the same functionality of Rebuy.Cart.formatMoney();

```javascript
SmartCart.formatMoney(price, format);
```

## freeShippingCompleteMessage

Returns a string which is the free shipping complete message specified from the Smart Cart admin settings.

```javascript
SmartCart.freeShippingCompleteMessage();
```

## freeShippingEnabled

Returns a boolean (true) if the free shipping bar is enabled.

```javascript
SmartCart.freeShippingEnabled();
```

## freeShippingHelperMessage

```javascript
SmartCart.freeShippingHelperMessage();
```

## freeShippingMinimum

Returns a number which is the total required to achieve free shipping. 

```javascript
SmartCart.freeShippingMinimum();
```

## freeShippingOnAllProductsEnabled

Returns a boolean (true) if free shipping on all products setting is enabled from the Smart Cart admin settings.

```javascript
SmartCart.freeShippingOnAllProductsEnabled();
```

## freeShippingPercentComplete

Returns a string which is a percentage of the remaining amount to achieve free shipping. (example '50%')

```javascript
SmartCart.freeShippingPercentComplete();
```

## freeShippingRemaining

Returns a number which is the remaining amount dollar amount to achieve free shipping.

```javascript
SmartCart.freeShippingRemaining();
```

## freeShippingRemainingMessage

```javascript
SmartCart.freeShippingRemainingMessage();
```

## hasAcceptedTerms

Returns a boolean (true) if the customer has accepted the terms and conditions checkbox input if this setting is enabled. 

```javascript
SmartCart.hasAcceptedTerms();
```

## hasCheckoutButton

Returns a boolean (true) if the checkout button is enabled from the Smart Cart admin settings.

```javascript
SmartCart.hasCheckoutButton();
```

## hasContinueShoppingButton

Returns a boolean (true) if the continue shopping button is enabled from the Smart Cart admin settings.

```javascript
SmartCart.hasContinueShoppingButton();
```

## hasCrossSells

Returns a boolean (true) if there is one or more cross sell widgets enabled from the Smart Cart admin settings.

```javascript
SmartCart.hasCrossSells();
```

## hasFreeShipping

Returns a boolean (true) if the free shipping bar is enabled from the Smart Cart admin settings.

```javascript
SmartCart.hasFreeShipping();
```

## hasFreeShippingProgress

Returns a boolean (true) if the customer has not reached the specified price for free shipping.

```javascript
SmartCart.hasFreeShippingProgress();
```

## hasItems

Returns a boolean (true) if the cart has items.

```javascript
SmartCart.hasItems();
```

## hasLineItemDiscount

Returns a boolean (true) if the item object passed in as an argument contains a line item discount.

```javascript
SmartCart.hasLineItemDiscount(item);
```

## hasPrePurchase

```javascript
SmartCart.hasPrePurchase();
```

## hasSwitchToSubscription

Returns a boolean (true) when the item passed in as an argument has the switch to subscription functionality.

```javascript
SmartCart.hasSwitchToSubscription(item);
```

## hasTermsEnabled

Returns a boolean (true) if the terms and conditions setting is enabled from the Smart Cart admin settings.

```javascript
SmartCart.hasTermsEnabled();
```

## hasViewCartButton

Returns a boolean (true) if the view cart button is enabled from the Smart Cart admin settings.

```javascript
SmartCart.hasViewCartButton();
```

## hiddenItems

Returns an array of objects which are items that have the product tag of 'smart-cart-hidden'.

```javascript
SmartCart.hiddenItems();
```

## hide

Will close the Smart Cart when this method is called. 

```javascript
SmartCart.hide(event);
```

## hideQuantitySelectors

Returns a boolean (true) if the item passed into this method has a product tag of 'smart-cart-hide-qty'.

```javascript
SmartCart.hideQuantitySelectors(item);
```

## increaseItem

This method will increase the quantity of the item object passed in as an argument by one.

```javascript
SmartCart.increaseItem(item, callback);
```

## init

This method initializes the Smart Cart.

```javascript
SmartCart.init(settings);
```

## installmentsEnabled

Returns a boolean (true) when the merchant has the payment installments enabled from the Smart Cart admin settings.

```javascript
SmartCart.installmentsEnabled();
```

## installmentsMessage

Returns a string which contains HTML in order to provide click functionality to the specified installments provider as specified from the Smart Cart admin settings. 

```javascript
SmartCart.installmentsMessage();
```

## isHiddenItem

Returns a boolean (true) when the item object passed in contains the product tag of 'smart-cart-hidden'.

```javascript
SmartCart.isHiddenItem(item);
```

## itemCount

Returns a number which is the total items in the cart including items that have more than one quantity. 

```javascript
SmartCart.itemCount();
```

## itemDeliveryFrequency

```javascript
SmartCart.itemDeliveryFrequency(item);
```

## itemDeliveryIntervalFrequency

```javascript
SmartCart.itemDeliveryIntervalFrequency(item);
```

## itemHasDiscount

Returns a boolean (true) if the item object passed in as an argument has a compare at price or has a Shopify script discount. 

```javascript
SmartCart.itemHasDiscount(item);
```

## itemPrice

Returns a number which is the unformatted final price of the item object passed in as an argument.

```javascript
SmartCart.itemPrice(item);
```

## itemProductTagsClasses

Returns a string of the product tags of the item object passed in as an argument where each tag it preceded with 'tag-'

```javascript title="SmartCart.itemProductTagsClasses(item);"
//'tag-available tag-best-seller tag-skinbarrierpage tag-skincare tag-spodefault tag-spodisabled'
```

## items

Returns an array of objects where each object it an item in the cart. 

```javascript
SmartCart.items();
```

## itemURL

Returns a string which it the relative URL of the item object passed in as an argument. 

```javascript
SmartCart.itemURL(item);
```

## lineCount

```javascript
SmartCart.lineCount();
```

## lineItemDiscountMessage

Returns a string which is the discount message provided from a Shopify discounting script. Length equals zero if there is no discount or no message provided for the discount. 

```javascript
SmartCart.lineItemDiscountMessage(item);
```

## notesChange

```javascript
SmartCart.notesChange(event);
```

## notesEnabled

Returns a boolean (true) if the notes setting from the Smart Cart admin settings is enabled.

```javascript
SmartCart.notesEnabled();
```

## notesIsVisible

Returns a boolean (true) if the notes text area is visible.

```javascript
SmartCart.notesIsVisible();
```

## notesRemainingCharacters

```javascript
SmartCart.notesRemainingCharacters();
```

## notesToggle

This method toggles the notes text area open and closed along with setting the input checkbox respective to the setting.

```javascript
SmartCart.notesToggle();
```

## onetimeOptionGroupLabel

```javascript
SmartCart.onetimeOptionGroupLabel(item);
```

## onetimeOptionLabel

```javascript
SmartCart.onetimeOptionLabel(item);
```

## removeItem

This method make the API call to Shopify to remove the item object that is passed in as an argument. 

```javascript
SmartCart.removeItem(item, callback);
```

## shippingExcludedSubtotal

Returns a number which is the difference between items that do and do not have the product tag 'smart-cart-shipping-excluded'. This tag can be added to products in order to have them not count toward the remaining amount of the free shipping bar.

```javascript
SmartCart.shippingExcludedSubtotal();
```

## show

Will open the Smart Cart when this method is called.

```javascript
SmartCart.show(event);
```

## skip_open

When setting this to true, it will prevent Smart Cart from opening when an item is added to cart (clicking on cart icon will still allow the Smart Cart to open, however).

```javascript
SmartCart.skip_open = true;
```

---

# Overview (1.3KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods.md

!!! note "Methods Grouped by Component"
    To make the documentation more digestible, we've broken up available methods by their associated Smart Cart Component or feature.


## Smart Cart Methods (by feature/component)

* [Base Methods](smart-cart-methods-base.md)
* [Announcement Bar Methods](smart-cart-methods-announcement-bar.md)
* [Bundle Product Methods](smart-cart-methods-bundle-product.md)
* [Buy More Save More Methods](smart-cart-methods-buy-more-save-more.md)
* [Cart Items Methods](smart-cart-methods-cart-items.md)
* [Checkout Area Methods](smart-cart-methods-checkout-area.md)
* [Cross-Sell Widget Methods](smart-cart-methods-cross-sell-widget.md)
* [Discount Code Input Methods](smart-cart-methods-discount-code-input.md)
* [Login Link Methods](smart-cart-methods-login.md)
* [Notes Methods](smart-cart-methods-order-notes.md)
* [Subtotal Methods](smart-cart-methods-subtotal.md)
* [Switch to Subscription Methods](smart-cart-methods-switch-to-subscription.md)
* [Tiered Progress Bar Methods](smart-cart-methods-tiered-progress-bar.md)
* [Title Methods](smart-cart-methods-title.md)

---

# Base Methods (5.6KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-base.md

## `SmartCart.currency` ⇒ `string`

Gets the current cart currency code

**Returns**: `string` - the currency code for the current Shopify cart object\ ## `SmartCart.destroy`

Destroys the Smart Cart instance, removes it from the DOM, unbinds events, and resets default properties

## `SmartCart.discountTotal` ⇒ `string`

Gets the discount total string to display in the Smart Cart

**Returns**: `string` - The total discount amount (formatted)  

| Param | Type | Description |
| --- | --- | --- |
| format | `string` | Money formatting string (ie. `'${{amount}}'`) |

## `SmartCart.emptyCartMarkup` ⇒ `string`

Gets the empty cart markup from the settings object

**Returns**: `string` - The empty cart markup\ ## `SmartCart.enrich`

Enriches the cart product data, either pulling it from local storage or re-fetching it

## `SmartCart.formatMoney` ⇒ `string`

Formats a money amount with the specified format and current cart currency\
(used to render money amounts in the Smart Cart)

**Returns**: `string` - The formatted money amount  

| Param | Type | Description |
| --- | --- | --- |
| amount | `number` \| `string` | The money amount to format |
| [format] | `string` | Money formatting string (ie. `'${{amount}}'`) |
| [currencyCode] | `string` | The currency code to use for formatting |

## `SmartCart.getCalculatedCartDiscount` ⇒ `number`

Gets the calculated discount for the cart, based on detected automatic discounts OR applied discount codes

**Returns**: `number` - The total discount amount for the cart\ ## `SmartCart.getComponentsByType` ⇒ `Array`

Gets all of the Smart Cart components of a specific type from the settings.components array

**Returns**: `Array` - An array of Smart Cart components of the specified type  

| Param | Type | Description |
| --- | --- | --- |
| type | `string` | The component type to filter by |

## `SmartCart.getFirstComponentByType` ⇒ `object` | `undefined`

Gets the first Smart Cart component of a specific type from the settings.components array.\
This is useful for components that should only have one instance (ie. the title component)

**Returns**: `object` | `undefined` - The first Smart Cart component of the specified type  

| Param | Type | Description |
| --- | --- | --- |
| type | `string` | The component type to filter by |

## `SmartCart.getOriginalCartTotal` ⇒ `number`

Gets the cart original price (before discounts). Some items are excluded from the subtotal calculation.

**Returns**: `number` - The original price of the cart (included items original prices combined)\ ## `SmartCart.getVueConfig` ⇒ `object`

Defines the Smart Cart's Vue configuration object

**Returns**: `object` - Vue configuration object\ ## `SmartCart.hide`

Hides the Smart Cart from the customer, stops any announcement bars, and triggers the Smart Cart hide event

| Param | Type | Description |
| --- | --- | --- |
| e | `event` | The event object (if applicable) |

## `SmartCart.init`

Initializes the Smart Cart

| Param | Type | Description |
| --- | --- | --- |
| settings | `object` | The Smart Cart settings object |

## `SmartCart.isComponentVisible` ⇒ `boolean`

Determines whether a Smart Cart component is visible based on its visibility status

**Returns**: `boolean` - Whether the component is visible  

| Param | Type | Description |
| --- | --- | --- |
| component | `object` | A Smart Cart component object from the settings.components array |

## `SmartCart.setCart`

Sets the internal SmartCart.cart object, syncs the cart note (if applicable), and enriches the cart product data

| Param | Type | Description |
| --- | --- | --- |
| cart | `object` | The Shopify cart object to set as the Smart Cart cart |

## `SmartCart.shouldUseProductMetafields` ⇒ `boolean`

Gets the setting value for Enable Product Metafields in the Smart Cart\
(used to determine whether to include product metafields in the Smart Cart enriched data)

**Returns**: `boolean` - Whether the setting is enabled\ ## `SmartCart.show`

Shows the Smart Cart to the customer, initializes any announcement bars, and triggers the Smart Cart show event

| Param | Type | Description |
| --- | --- | --- |
| e | `event` | The event object (if applicable) |

## `SmartCart.sizeImage` ⇒ `string`

Gets a Shopify image size URL with a specified size

**Returns**: `string` - The new image URL with the specified size  

| Param | Type | Description |
| --- | --- | --- |
| src | `string` | The original image URL |
| size | `string` | The desired image size (ie. 'small', 'medium', 'large') |

## `SmartCart.updateCartCount`

Updates the Cart Item Count element with the current item count\
(if the Item Count selector is defined in the Theme Selectors in settings)

## `SmartCart.updateCartSubtotal`

Updates the Cart Subtotal element with the current subtotal\
(if the Cart Subtotal selector is defined in the Theme Selectors in settings)

## `SmartCart.updateLiveRegion`

Updates the ARIA Live Region in the Smart Cart with a message

| Param | Type | Description |
| --- | --- | --- |
| message | `string` | The message to display in the live region |

## `SmartCart.skip_open`

When this property is set to **true**, it will prevent Smart Cart from opening when an item is added to cart (clicking on cart icon will still allow the Smart Cart to open, however).

```javascript
Rebuy.SmartCart.skip_open = true;
```

---

# Announcement Bar Methods (1.5KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-announcement-bar.md

## `SmartCart.getAnnouncementBarsInCart` ⇒ `Array`

Get announcement bar instances used in the cart

**Returns**: `Array` - The announcement bar instances

**Example**

```javascript
// Get all announcement bars currently in the cart
const bars = SmartCart.getAnnouncementBarsInCart();

// Log the number of active announcement bars
console.log(`${bars.length} announcement bar(s) active`);

// Iterate through bars to check their state
bars.forEach((bar, index) => {
  console.log(`Bar ${index + 1}:`, bar);
});
```

## `SmartCart.getAnnouncementsByComponentId` ⇒ `Array`

Get announcements by component ID

**Returns**: `Array` - The announcements for the component

| Param | Type | Description |
| --- | --- | --- |
| id | `string` | The component ID |

**Example**

```javascript
// Get announcements for a specific component
const componentId = 'my-announcement-component';
const announcements = SmartCart.getAnnouncementsByComponentId(componentId);

// Display announcements in a custom container
announcements.forEach(announcement => {
  console.log('Announcement:', announcement);
});
```

---

# Bundle Product Methods (2.0KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-bundle-product.md

## `SmartCart.childBundleTitle` ⇒ `string`

Remove extra word from bundle option title

**Returns**: `string` - bundle option title  

| Param | Type | Description |
| --- | --- | --- |
| option | `object` | bundle option |

## `SmartCart.getBundleOptionImage` ⇒ `string`

Get the bundle option image

**Returns**: `string` - Image URL  

| Param | Type | Description |
| --- | --- | --- |
| product | `object` | Product object |
| currentOption | `object` | Current option |
| currentOptionIndex | `number` | Index of the current option |

## `SmartCart.hideBundleOptions` ⇒ `boolean`

Check if bundle options should be hidden

**Returns**: `boolean` - true if bundle options should be hidden  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | cart line item |

## `SmartCart.isBundleVisible` ⇒ `boolean`

Check whether the item is the currently expanded bundle

**Returns**: `boolean` - true if the item is the currently expanded bundle  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | line item |

## `SmartCart.itemBundleLength` ⇒ `number`

Check if item is bundle and has more than 1 option (excluding default option)

**Returns**: `number` - number of non-default options  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | line item |

## `SmartCart.itemIsBundle` ⇒ `boolean`

Check whether item is a bundle product

**Returns**: `boolean` - true if item is bundle  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | line item |

## `SmartCart.toggleActiveBundle` ⇒ `void`

Toggle the active product bundle

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | line item |

---

# Buy More Save More Methods (2.3KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-buy-more-save-more.md

## `SmartCart.adjustBMSMQuantity` ⇒ `void`

Adjusts the BMSM quantity for the provided item and tier.

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The item for which to adjust the BMSM quantity. |
| tier | `object` | The BMSM tier for which to adjust the quantity. |

## `SmartCart.bMSMFinalTierNotReached` ⇒ `boolean`

Checks if the final BMSM tier has been reached for the provided item.

**Returns**: `boolean` - True if the final BMSM tier has not been reached, false otherwise.

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The item for which to check if the final BMSM tier has been reached. |

## `SmartCart.buyMoreSaveMoreDynamicText` ⇒ `string` | `void`

Gets the dynamic BMSM discount text for the provided item.

**Returns**: `string` | `void` - The dynamic BMSM discount text for the provided item.

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The item for which to get the dynamic BMSM discount text. |

## `SmartCart.getBMSMButtonText` ⇒ `string`

Gets the BMSM discount button text for the provided tier.

**Returns**: `string` - The BMSM discount button text for the provided tier.

| Param | Type | Description |
| --- | --- | --- |
| tier | `object` | The BMSM tier for which to get the button text. |

## `SmartCart.getBMSMTiers` ⇒ `Array`

Gets the BMSM tiers.

**Returns**: `Array` - An array of BMSM discount tiers.

## `SmartCart.hasBMSMButtons` ⇒ `boolean`

Checks if the BMSM discount is displayed as buttons.

**Returns**: `boolean` - True if the BMSM discount is displayed as buttons, false otherwise.

## `SmartCart.itemHasBMSM` ⇒ `boolean` | `void`

Checks if the provided item has Buy More Save More (BMSM) discount enabled.

**Returns**: `boolean` | `void` - True if the item has BMSM discount enabled, false otherwise.

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The item to check for BMSM discount. |

---

# Cart Items Methods (8.1KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-cart-items.md

## `SmartCart.automaticDiscountTotalAmountSaved` ⇒ `number`

Returns the total amount saved from automatic discounts on items in the cart

**Returns**: `number` - the total amount saved from automatic discounts on items in the cart\
                  (excludes items with subtotal exclusions)\ ## `SmartCart.compareAtPrice` ⇒ `number` | `null`

Gets the compare at price for a cart item

**Returns**: `number` | `null` - The compare at price of the cart item or null if not applicable  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.decreaseItem`

Decreases the quantity of a cart item

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |
| callback | `function` | Function to call after decreasing the item quantity |

**Example**

```javascript
// Decrease quantity of an item (removes if quantity becomes 0)
const items = SmartCart.items();
if (items.length > 0 && items[0].quantity > 1) {
  SmartCart.decreaseItem(items[0], () => {
    console.log('Item quantity decreased');
  });
}
```

## `SmartCart.hasAutomaticDiscountApplied` ⇒ `boolean`

Determines whether any of the items in the cart have an automatic discount applied

**Returns**: `boolean` - Boolean indicating whether any of the items in the cart have an automatic discount applied\ ## `SmartCart.hasItemProperties` ⇒ `boolean`

Determines if the cart item has any content it should render in the line item properties area in the Smart Cart

**Returns**: `boolean` - Whether the cart item has any properties to render (or a delivery frequency with Switch to Subscription disabled)  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item object to check for properties |

## `SmartCart.hasItems` ⇒ `boolean`

Determines whether the cart has items

**Returns**: `boolean` - Boolean indicating whether the cart has items

**Example**

```javascript
// Check if cart has items before showing checkout
if (SmartCart.hasItems()) {
  console.log('Cart has items, ready for checkout');
} else {
  console.log('Cart is empty');
}
```

## `SmartCart.hasLineItemDiscount` ⇒ `boolean`

Determines whether the cart item has a line item discount

**Returns**: `boolean` - Boolean indicating whether the cart item has a line item discount  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.hiddenItems` ⇒ `Array.<object>`

Returns the hidden items in the cart

**Returns**: `Array.<object>` - Array of hidden items in the cart\ ## `SmartCart.hideQuantitySelectors` ⇒ `boolean`

Determines whether the quantity selectors should be hidden for the cart item\
based on product tags or properties

**Returns**: `boolean` - Boolean indicating whether the quantity selectors should be hidden  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.increaseItem`

Increases the quantity of a cart item

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |
| callback | `function` | Function to call after increasing the item quantity |

**Example**

```javascript
// Get the first item and increase its quantity
const items = SmartCart.items();
if (items.length > 0) {
  SmartCart.increaseItem(items[0], () => {
    console.log('Item quantity increased');
  });
}
```

## `SmartCart.isHiddenItem` ⇒ `boolean`

Determines whether the cart item should be hidden in the Smart Cart based on product tags or properties

**Returns**: `boolean` - Boolean indicating whether the cart item should be hidden  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.itemCount` ⇒ `number`

Returns the total number of items in the cart (excluding hidden items)

**Returns**: `number` - The total number of items in the cart

**Example**

```javascript
// Update a custom cart counter element
const count = SmartCart.itemCount();
document.querySelector('.my-cart-count').textContent = count;

// Conditionally show/hide empty cart message
if (count === 0) {
  document.querySelector('.empty-cart-message').style.display = 'block';
}
```

## `SmartCart.itemHasDiscount` ⇒ `boolean`

Determines whether the cart item has a discount

**Returns**: `boolean` - Boolean indicating whether the cart item has a discount  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.itemPrice` ⇒ `number`

Gets the price for a cart item

**Returns**: `number` - The price of the cart item  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.itemProductTagsClasses` ⇒ `string`

Gets a string of tag-based classes for the line item

**Returns**: `string` - String of tag-based classes for the line item  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.itemProperties` ⇒ `Array.<object>`

Gets the line item properties to display in the cart

**Returns**: `Array.<object>` - Array of properties for the item  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.itemPropertyClasses` ⇒ `string`

Gets a string of multiple property-based classes for the line item

**Returns**: `string` - String of multiple property-based classes for the line item  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |
| item.properties | `object` | The properties of the item |

## `SmartCart.itemPropertyKeyClass` ⇒ `string`

Gets a single CSS class for the line item property key

**Returns**: `string` - single CSS class for the line item property key  

| Param | Type | Description |
| --- | --- | --- |
| property | `object` | Line item property object (key, value) |

## `SmartCart.itemPropertyValueClass` ⇒ `string`

Gets a single CSS class for the line item property value

**Returns**: `string` - single CSS class for the line item property value  

| Param | Type | Description |
| --- | --- | --- |
| property | `object` | Line item property object (key, value) |

## `SmartCart.itemURL` ⇒ `string`

Gets the URL for a cart item

**Returns**: `string` - The URL for the cart item  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.items` ⇒ `Array.<object>`

Returns the items in the cart

**Returns**: `Array.<object>` - Array of items in the cart

**Example**

```javascript
// Get all items in the cart
const items = SmartCart.items();

// Log each item's title and quantity
items.forEach(item => {
  console.log(`${item.title} x ${item.quantity}`);
});

// Calculate total quantity across all items
const totalQty = items.reduce((sum, item) => sum + item.quantity, 0);
console.log('Total items:', totalQty);
```

## `SmartCart.itemsWithSubtotalExclusions` ⇒ `Array.<object>`

Gets the cart items with or without subtotal exclusions

**Returns**: `Array.<object>` - Array of cart items  

| Param | Type | Description |
| --- | --- | --- |
| returnExcludedItems | `boolean` | Whether to return excluded items instead of included items |

## `SmartCart.lineItemDiscountMessage` ⇒ `string` | `null`

Gets the discount message for a line item

**Returns**: `string` | `null` - The discount message or null if no discount  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item |

## `SmartCart.removeItem`

Removes an item from the cart

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The cart item to remove |
| callback | `function` | Function to call after removing the item |

**Example**

```javascript
// Remove the first item from the cart
const items = SmartCart.items();
if (items.length > 0) {
  SmartCart.removeItem(items[0], () => {
    console.log('Item removed from cart');
  });
}
```

---

# Checkout Area Methods (4.7KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-checkout-area.md

## `SmartCart.adjustPreviewButtons` ⇒ `void`

Updates the Accelerated Checkout buttons for previewing in the Admin.

| Param | Type | Description |
| --- | --- | --- |
| settings | `object` | Smart Cart settings |

## `SmartCart.appendAcceleratedCheckout` ⇒ `void`

Appends the '.additional-checkout-buttons' element to the SmartCart flyout

## `SmartCart.checkout` ⇒ `void`

Performs the checkout process

**Example**

```javascript
// Trigger checkout programmatically
document.querySelector('.custom-checkout-btn').addEventListener('click', () => {
  SmartCart.checkout();
});
```

## `SmartCart.checkoutLabel` ⇒ `string`

Gets the label for the checkout button

**Returns**: `string` - The label for the checkout button (HTML content)\ ## `SmartCart.clearAcceleratedCheckout` ⇒ `void`

Removes the '.additional-checkout-buttons' element from the SmartCart flyout

## `SmartCart.continueShoppingLabel` ⇒ `string`

Get the label for the Continue Shopping button

**Returns**: `string` - The label for the Continue Shopping button\ ## `SmartCart.getAdditionalCheckoutButtons` ⇒ `boolean` | `object`

Checks for the existence of the '.additional-checkout-buttons' element, which is used by the 'rebuy-smartcart-extensions.liquid' snippet

**Returns**: `boolean` | `object` - returns false otherwise buttonContainers, buttonContainer, buttonList, buttonListItems.  

| Param | Type | Description |
| --- | --- | --- |
| parent | `Element` | DOM Element |

## `SmartCart.getCheckoutSettings` ⇒ `object`

gets the checkout settings from the SmartCart

**Returns**: `object` - The checkout settings object\ ## `SmartCart.hasAcceptedTerms` ⇒ `boolean`

Checks if the user has accepted the terms and conditions

**Returns**: `boolean` - True if the user has accepted the terms, otherwise false\ ## `SmartCart.hasCheckoutButton` ⇒ `boolean`

Checks if the checkout button is enabled

**Returns**: `boolean` - True if the checkout button is enabled, otherwise false

**Example**

```javascript
// Conditionally show custom checkout UI
if (SmartCart.hasCheckoutButton()) {
  document.querySelector('.checkout-section').style.display = 'block';
}
```

## `SmartCart.hasContinueShoppingButton` ⇒ `boolean`

Checks if the Continue Shopping button is enabled

**Returns**: `boolean` - True if the Continue Shopping button is enabled, otherwise false\ ## `SmartCart.hasPrePurchase` ⇒ `boolean`

Returns true if there is a pre-purchase pop-up widget enabled

## `SmartCart.hasShopPayButton` ⇒ `boolean`

Checks if the Shop Pay button is enabled

**Returns**: `boolean` - True if the Shop Pay button is enabled, otherwise false\ ## `SmartCart.hasTermsEnabled` ⇒ `boolean`

Determines if the terms and conditions are enabled in settings

**Returns**: `boolean` - True if terms and conditions are enabled, otherwise false

**Example**

```javascript
// Check if terms must be accepted before checkout
if (SmartCart.hasTermsEnabled()) {
  if (!SmartCart.hasAcceptedTerms()) {
    console.log('Please accept terms before checkout');
  }
}
```

## `SmartCart.hasViewCartButton` ⇒ `boolean`

Checks if the View Cart button is enabled

**Returns**: `boolean` - True if the View Cart button is enabled, otherwise false\ ## `SmartCart.installmentsEnabled` ⇒ `boolean`

Returns true if the payment installments indicator text is enabled

## `SmartCart.installmentsMessage` ⇒ `string`

Returns the payment installments indicator text

**Returns**: `string` - HTML\ ## `SmartCart.manageAcceleratedCheckout` ⇒ `void`

Manages the Accelerated Checkout feature

## `SmartCart.prePurchaseWidgetId` ⇒ `string`

Returns the pre-purchase pop-up widget ID

## `SmartCart.renderPayPalButton`

Conditionally renders a paypal button if the PayPal iFrame is not rendered

## `SmartCart.shopPayCheckout` ⇒ `void`

Performs the Shop Pay checkout process

## `SmartCart.shopPaySvg` : `string`

SVG code for the Shop Pay icon.

## `SmartCart.updateTermsCheck` ⇒ `void`

Update the terms checkbox status

## `SmartCart.viewCart`

Navigates to the Shopify Cart Page

**Example**

```javascript
// Navigate to the cart page with a custom button
document.querySelector('.view-cart-btn').addEventListener('click', () => {
  SmartCart.viewCart();
});
```

## `SmartCart.viewCartLabel` ⇒ `string`

Gets the label for the View Cart button

**Returns**: `string` - The label for the View Cart button

---

# Cross-Sell Widget Methods (1.9KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-cross-sell-widget.md

## `SmartCart.getAllCrossSellWidgetIds` ⇒ `Array.<string>`

Get all cross sell widget IDs in Cross-Sell components in the current Smart Cart settings

**Returns**: `Array.<string>` - Array of widget IDs

**Example**

```javascript
// Get all cross-sell widget IDs configured in Smart Cart
const widgetIds = SmartCart.getAllCrossSellWidgetIds();

console.log('Cross-sell widgets:', widgetIds);
// Output: ['widget-123', 'widget-456']

// Use widget IDs to fetch recommendations via the API
widgetIds.forEach(id => {
  console.log(`Widget ${id} is configured`);
});
```

## `SmartCart.getWidgetIdByComponentId` ⇒ `string` | `null`

Get the widget ID by component ID

**Returns**: `string` | `null` - The widget ID

| Param | Type | Description |
| --- | --- | --- |
| componentId | `string` | The component ID |

**Example**

```javascript
// Get the widget ID for a specific Smart Cart component
const widgetId = SmartCart.getWidgetIdByComponentId('cross-sell-component-1');

if (widgetId) {
  console.log('Found widget:', widgetId);
} else {
  console.log('No widget found for this component');
}
```

## `SmartCart.hasCrossSellWidgets` ⇒ `boolean`

Check if there are cross sell widgets in the current Smart Cart settings

**Returns**: `boolean` - True if there are cross sell widgets

**Example**

```javascript
// Check if cross-sell widgets are configured before showing related UI
if (SmartCart.hasCrossSellWidgets()) {
  console.log('Cross-sell recommendations are enabled');
} else {
  console.log('No cross-sell widgets configured');
}
```

---

# Discount Code Input Methods (3.6KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-discount-code-input.md

## `SmartCart.applyDiscount` ⇒ `void`

Applies a discount code to the current SmartCart instance.

| Param | Type | Description |
| --- | --- | --- |
| discountCode | `string` | The discount code to apply. |
| [e] | `Event` | The event object (optional). |

**Example**

```javascript
// Apply a discount code programmatically
SmartCart.applyDiscount('SAVE10');

// Apply from a custom input field
const code = document.querySelector('#my-discount-input').value;
if (code) {
  SmartCart.applyDiscount(code);
}
```

## `SmartCart.getApplicableDiscountCodeTotal` ⇒ `number`

Gets the applicable discount amount from a submitted discount code. Used in the Tiered Progress Bar calculations.

**Returns**: `number` - The applicable discount amount from the submitted discount code\ ## `SmartCart.getDiscountButtonLabel` ⇒ `string`

Get the discount button label from the current SmartCart instance

**Returns**: `string` - The discount button text\ ## `SmartCart.getDiscountCodeLabel` ⇒ `string`

Get the discount code label from the current SmartCart instance

**Returns**: `string` - The discount code label text\ ## `SmartCart.getDiscountCodeSettings` ⇒ `object` | `null`

Get the discount code settings from the current SmartCart instance

**Returns**: `object` | `null` - The discount code component settings\ ## `SmartCart.getDiscountInvalidMessage` ⇒ `string`

Get the discount invalid message from the current SmartCart instance

**Returns**: `string` - The discount invalid message text\ ## `SmartCart.isDiscountInputEnabled` ⇒ `boolean`

Determines if the discount code input component is enabled.

**Example**

```javascript
// Check if discount input is enabled before showing custom UI
if (SmartCart.isDiscountInputEnabled()) {
  document.querySelector('.custom-discount-section').style.display = 'block';
}
```

## `SmartCart.removeDiscount` ⇒ `void`

Removes the discount from the current SmartCart instance + local storage.

**Example**

```javascript
// Remove any applied discount code
SmartCart.removeDiscount();
console.log('Discount code removed');
```

## `SmartCart.shouldApplyDiscountCode` ⇒ `boolean`

Determines, based on the presence of an automatic discount, if the discount code should be applied.

**Returns**: `boolean` - Whether the discount code should be applied.\ ## `SmartCart.shouldShowDiscountEntitled` ⇒ `boolean`

Determines if the discount entitled message should be shown.

**Returns**: `boolean` - Whether the discount entitled message should be shown.\ ## `SmartCart.shouldShowDiscountInput` ⇒ `boolean`

Determines if the discount input should be shown.

**Returns**: `boolean` - Whether the discount input should be shown.\ ## `SmartCart.shouldShowDiscountSubtotal` ⇒ `boolean`

Determines if the discount subtotal should be shown.

**Returns**: `boolean` - Whether the discount subtotal should be shown.\ ## `SmartCart.showInvalidMessage` ⇒ `boolean`

Determines if the invalid message should be shown.

**Returns**: `boolean` - Whether the invalid message should be shown.\ ## `SmartCart.useDiscountCodeMessageOnly` ⇒ `boolean`

Determines if the discount calculation should be omitted (useful for complex discount scenarios).

**Returns**: `boolean` - Whether the discount calculation should be omitted until checkout.

---

# Login Link Methods (855B)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-login.md

## `SmartCart.getLoginLabel` ⇒ `string`

Get the login button text from the current SmartCart instance

**Returns**: `string` - The login button text

## `SmartCart.getLoginUrl` ⇒ `string`

Get the login button URL from the current SmartCart instance

**Returns**: `string` - The login button URL

## `SmartCart.shouldRenderLoginComponent` ⇒ `boolean`

Check if the login component should be rendered

**Returns**: `boolean` - True if the login component should be rendered

---

# Order Notes Methods (2.1KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-order-notes.md

## `SmartCart.getNotesData` ⇒ `object` | `null`

Returns the notes state data from the SmartCart object (not the settings).

**Example**

```javascript
// Get current notes data
const notesData = SmartCart.getNotesData();
if (notesData) {
  console.log('Current note:', notesData.value);
}
```

## `SmartCart.getNotesLabel` ⇒ `string`

Returns the configured label for the notes input

## `SmartCart.getNotesPlaceholder` ⇒ `string`

Returns the configured placeholder for the notes input

## `SmartCart.getNotesSettings` ⇒ `object`

Returns the notes settings from the SmartCart object.

## `SmartCart.notesChange` ⇒ `void`

Handles updating the notes value

| Param | Type | Description |
| --- | --- | --- |
| event | `Event` | DOM user action event |

## `SmartCart.notesEnabled` ⇒ `boolean`

Returns a boolean indicating whether or not the notes component is enabled (ie. not hidden)

**Example**

```javascript
// Check if order notes are enabled
if (SmartCart.notesEnabled()) {
  console.log('Order notes feature is available');
}
```

## `SmartCart.notesIsVisible` ⇒ `boolean`

Returns a boolean indicating whether or not the notes input is visible to customer

## `SmartCart.notesRemainingCharacters` ⇒ `string`

Returns a string containing the remaining characters message

**Example**

```javascript
// Display remaining characters in a custom UI
const remaining = SmartCart.notesRemainingCharacters();
document.querySelector('.char-count').textContent = remaining;
// Output: "50 characters remaining"
```

## `SmartCart.notesToggle` ⇒ `void`

Handles toggling the visibility of the notes input

**Example**

```javascript
// Toggle notes visibility with a custom button
document.querySelector('.toggle-notes-btn').addEventListener('click', () => {
  SmartCart.notesToggle();
});
```

---

# Smart Cart App Methods (1.1KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-smart-cart-apps.md

## `SmartCart.enrichSmartCartApps` ⇒ `void`

Hydrates apps with data from API

| Param | Type | Description |
| --- | --- | --- |
| cartSettings | `object` | Smart Cart settings |

## `SmartCart.executeSmartCartApps` ⇒ `void`

Executes the app scripts

## `SmartCart.getSmartCartAppIdByComponentId` ⇒ `string` | `null`

Returns the app ID by using the component ID

**Returns**: `string` | `null` - The app ID

| Param | Type | Description |
| --- | --- | --- |
| componentId | `string` | The component ID |

## `SmartCart.injectSmartCartAppScripts` ⇒ `void`

Injects the app scripts into the DOM

| Param | Type | Description |
| --- | --- | --- |
| cartSettings | `object` | Smart Cart settings |

---

# Subtotal Methods (1.7KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-subtotal.md

## `SmartCart.getSubtotalSettings` ⇒ `object`

Returns the subtotal settings from the SmartCart components array.

## `SmartCart.subtotal` ⇒ `string`

Returns the subtotal amount to display. The subtotal is often just a formatted string, but can be returned as HTML to display a compare (discount) price

| Param | Type | Description |
| --- | --- | --- |
| format | `string` | Currency format string |

**Example**

```javascript
// Get the formatted subtotal for display
const subtotal = SmartCart.subtotal('${{amount}}');
console.log('Cart subtotal:', subtotal); // "$49.99"

// Display in a custom element
document.querySelector('.my-subtotal').innerHTML = subtotal;
```

## `SmartCart.subtotalLabel` ⇒ `string`

Returns the subtotal label.

**Example**

```javascript
// Get the configured subtotal label
const label = SmartCart.subtotalLabel();
console.log(label); // "Subtotal" or custom label from settings
```

## `SmartCart.subtotalNumber` ⇒ `number`

Returns the subtotal number (rather than a formatted string). This is useful for calculating the subtotal for other components.

**Example**

```javascript
// Get the raw subtotal value for calculations
const subtotal = SmartCart.subtotalNumber();
console.log('Subtotal in cents:', subtotal); // 4999

// Check if cart meets a minimum threshold (e.g., $50 = 5000 cents)
if (subtotal >= 5000) {
  console.log('Eligible for free shipping!');
}
```

---

# Switch to Subscription Methods (3.3KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-switch-to-subscription.md

## `SmartCart.getSwitchToSubscriptionLabel` ⇒ `string`

Get the SwitchToSubscription label string

**Returns**: `string` - label  

| Param | Type | Description |
| --- | --- | --- |
| property | `string` | property to get from the language object |

## `SmartCart.hasSwitchToSubscription` ⇒ `boolean`

Determine if the item has the SwitchToSubscription functionality

**Returns**: `boolean` - response  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | rebuy cart item |

## `SmartCart.itemDeliveryFrequency` ⇒ `string`

Gets the item delivery frequency for a given item in the Smart Cart (if applicable)\
(used to render the delivery frequency in the line item properties area)

**Returns**: `string` - The delivery frequency for the item  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The item object to get the delivery frequency for |

## `SmartCart.selectedSubscriptionFrequency` ⇒ `string` | `undefined`

Gets the selected subscription frequency for a given item, either from the selected variant or the product itself

**Returns**: `string` | `undefined` - The selected subscription frequency for the item  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The item object to get the selected subscription frequency for |
| index | `number` | The index of the subscription frequency to return (defaults to 0) |

## `SmartCart.subscriptionDowngradeDisabled` ⇒ `boolean`

Determine if the SmartCart subscription downgrade functionality is disabled

**Returns**: `boolean` - response\ ## `SmartCart.subscriptionFrequencies` ⇒ `Array.<string>`

Returns the subscription frequencies for the product or the selected variant

**Returns**: `Array.<string>` - The subscription frequencies for the item  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | The item object to get the subscription frequencies for |

## `SmartCart.subscriptionOptionGroupLabel` ⇒ `string`

Get the SwitchToSubscription subscription option group label string

**Returns**: `string` - label  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | rebuy cart item |

## `SmartCart.subscriptionOptionLabel` ⇒ `string` | `number` | `void`

Get the SwitchToSubscription subscription option label string

**Returns**: `string` | `number` | `void` - label | frequency  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | rebuy cart item |
| frequency | `number` | subscription frequency (number of times per interval) |
| interval | `string` | subscription interval (day, week, month, year) |

## `SmartCart.switchToSubscriptionEnabled` ⇒ `boolean`

Determine if the SwitchToSubscription functionality is enabled + available

**Returns**: `boolean` - response\ ## `SmartCart.switchToSubscriptionLabel` ⇒ `string`

Get the SwitchToSubscription label string for the item

**Returns**: `string` - label  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | rebuy cart item |

---

# Tiered Progress Bar Methods (12.0KB)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-tiered-progress-bar.md

## `SmartCart.addFreeProduct` ⇒ `void`

Adds a free gift to the cart

| Param | Type | Description |
| --- | --- | --- |
| product | `object` | The product object |

## `SmartCart.addSingleVariantFreeProduct`

Adds the only available variant of a free gift product to the cart\
(used when there is only one variant available, which is either in variant_ids, or variants array)

| Param | Type | Description |
| --- | --- | --- |
| product | `object` | The product object |

## `SmartCart.calculatePercentageWithNormalTierMinimums` ⇒ `number`

Calculates the progress bar's percentage when there is no Free Shipping On Subscription option enabled / satisfied

**Returns**: `number` - The percentage as a number  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.calculatePercentageWithSubscriptionProduct` ⇒ `number`

Calculates the progress bar's percentage when there is a Free Shipping On Subscription option enabled + satisfied

**Returns**: `number` - The percentage as a number  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.freeProductOptions` ⇒ `Array`

Gets the options for a free gift product - either all variants or selected variants

**Returns**: `Array` - Array of variant objects  

| Param | Type | Description |
| --- | --- | --- |
| product | `object` | The product object (from the earnedProducts array) |

## `SmartCart.freeProductPrompt` ⇒ `string`

Gets text for the Free Product button - based on the product's status

**Returns**: `string` - The text for the button  

| Param | Type | Description |
| --- | --- | --- |
| product | `object` | The product object |

## `SmartCart.freeProductStyles` ⇒ `object` | `void`

Gets the product's background image / styles

**Returns**: `object` | `void` - The styles object  

| Param | Type | Description |
| --- | --- | --- |
| product | `object` | The product object |

## ~~freeProductTileStyle ⇒ `object` | `undefined`~~

***Deprecated***

Gets the product's tile width, based on the number of earned products

**Returns**: `object` | `undefined` - The styles object  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.getBarForLocation` ⇒ `object`

Get progress bar settings based on location

**Returns**: `object` - Progress bar settings object for the current location or default bar  

| Param | Type | Description |
| --- | --- | --- |
| countryCode | `string` | Country code for the current location |

## `SmartCart.getCurrentTier` ⇒ `object` | `null`

Gets current tier

**Returns**: `object` | `null` - Returns a tier object or null  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.getEarnedProducts` ⇒ `Array.<object>`

Gets the list of earned products from the bar

**Returns**: `Array.<object>` - The list of earned products  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.getFreeVariantTitle` ⇒ `string`

Gets the gift product's variant title

**Returns**: `string` - The applied gift variant title  

| Param | Type | Description |
| --- | --- | --- |
| product | `object` | The product object |

## `SmartCart.getGiftAreaTitle` ⇒ `string`

Gets the Gift Area Title to display above the Gift Area

**Returns**: `string` - The Gift Area Title  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.getProductsWithoutSelection` ⇒ `Array.<object>`

Gets the earned gifts in the cart that don't have a variant selected

**Returns**: `Array.<object>` - The earned products in the cart that don't have a variant selected  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.getProgressBarSettings` ⇒ `object` | `null`

Get the progress bar settings object

**Returns**: `object` | `null` - The progress bar settings object | null\ ## `SmartCart.getProgressStepIconSize` ⇒ `object`

Utility helper for getting the style object with configured sizes

**Returns**: `object` - Returns the style object with width and height defined for the image  

| Param | Type | Description |
| --- | --- | --- |
| tier | `object` | The tier object |

## `SmartCart.getSpendToNextTier` ⇒ `number`

Gets the difference between the subtotal and the next tier's minimum

**Returns**: `number` - The difference as a number  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.getTierCompletedText` ⇒ `string`

Get the text for the completed tier

**Returns**: `string` - The completed tier text  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |
| tier | `object` | The tier object |

## `SmartCart.getTierFeedbackText` ⇒ `string`

Get the text for the current tier (either in progress or completed)

**Returns**: `string` - The current tier text  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.getTierLabel` ⇒ `string`

Gets the step label for a given tier

**Returns**: `string` - Returns the label as a string  

| Param | Type | Description |
| --- | --- | --- |
| tier | `object` | The tier object |

## `SmartCart.getTierMinimum` ⇒ `number` | `null`

Gets the minimum threshold for a given tier

**Returns**: `number` | `null` - Returns the minimum threshold as a number or null  

| Param | Type | Description |
| --- | --- | --- |
| tier | `object` | The tier object |

## `SmartCart.getTieredBarProductData` ⇒ `object`

Checks local storage for cached product data, and fetches any missing product data from the API

**Returns**: `object` - The updated progress bar object  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.hasFreeShippingOnSubscription` ⇒ `boolean`

Determine if Free Shipping should be satisfied by a subscription product in the Cart

**Returns**: `boolean` - Boolean indicating whether Free Shipping should be satisfied by a subscription product\ ## `SmartCart.hasGiftSelection` ⇒ `boolean`

Determine if the gift product requires a customer variant selection

**Returns**: `boolean` - Boolean indicating whether the gift product has a variant selection  

| Param | Type | Description |
| --- | --- | --- |
| product | `object` | The gift product object |

## `SmartCart.hasProgressPrompt` ⇒ `boolean` | `string`

Determine if the progress bar has a prompt for the current tier

**Returns**: `boolean` | `string` - A boolean value or a truthy string indicating whether the progress bar has a prompt or not  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.hasTierProgress` ⇒ `boolean`

Determine if there is any progress to show in the progress bar

**Returns**: `boolean` - Boolean indicating whether there is any progress to show\ ## `SmartCart.isGiftItem` ⇒ `boolean`

Determines whether a cart item is a free gift item from the progress bar

**Returns**: `boolean` - Boolean indicating whether the item is a free gift item  

| Param | Type | Description |
| --- | --- | --- |
| item | `object` | Shopify cart item object |

## `SmartCart.isProgressBarEnabled` ⇒ `boolean`

Determine if the progress bar is enabled

**Returns**: `boolean` - Boolean indicating whether the progress bar is enabled or not\ ## `SmartCart.progressBarSubtotal` ⇒ `number`

Gets the current subtotal for the TPB, with some exclusion logic

**Returns**: `number` - the current subtotal (with exclusions)\ ## `SmartCart.progressStepMaxWidth` ⇒ `string`

Utility helper for getting the max width of the tiers for CSS

**Returns**: `string` - Returns the max width as a string (percentage for CSS)  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.progressTierIcon` ⇒ `string`

Utility helper for getting the icon for a given tier

**Returns**: `string` - Returns the icon as an HTML string  

| Param | Type | Description |
| --- | --- | --- |
| tier | `object` | The tier object |

## `SmartCart.progressTierReached` ⇒ `boolean`

Determines if the tier has been reached based on the subtotal

**Returns**: `boolean` - Boolean indicating whether the tier has been reached  

| Param | Type | Description |
| --- | --- | --- |
| tier | `object` | The tier object |

## `SmartCart.removeAllFreeGifts`

Removes all free gifts from the cart

## `SmartCart.removeFreeProduct`

Deselects a free gift from the TPB Gift Area:

* Updates the product status to loading
* Removes the gift from the cart
* Updates the product status to removed
* Adds the gift to the declined gifts cookie

| Param | Type | Description |
| --- | --- | --- |
| product | `object` | The earned product object (from the bar.earnedProducts array) |
| callback | `function` | The callback function to run after the gift has been removed |

## `SmartCart.selectFreeProductVariant`

Handles the selection of a free gift variant in the bar

| Param | Type | Description |
| --- | --- | --- |
| event | `object` | The event object |
| product | `object` | The product object |

## `SmartCart.shouldFilterOutOfStockVariantsFromTier` ⇒ `boolean`

Determines whether Out of Stock variants should be hidden from the progress bar

**Returns**: `boolean` - Boolean indicating whether Out of Stock variants should be hidden for this tier  

| Param | Type | Description |
| --- | --- | --- |
| tier | `object` | The tier object |

## `SmartCart.shouldRenderEarnedGift` ⇒ `boolean`

Determines whether a gift product in the earned products array should be rendered with the bar\
(helpful to prevent rendering out chosen gifts with the bar while in Line Item Mode)

**Returns**: `boolean` - Boolean indicating whether the gift product should be rendered with the bar  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |
| product | `object` | The gift product object |

## `SmartCart.shouldRenderGiftArea` ⇒ `boolean`

Determines whether the Gifts Area should be rendered based on the progress bar settings and earned products state

**Returns**: `boolean` - Boolean indicating whether the Gifts Area should be rendered  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.shouldRenderGiftAreaTitle` ⇒ `boolean`

Determine if the Gift Area Title should be used

**Returns**: `boolean` - Boolean indicating whether the Gift Area Title should be used  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |

## `SmartCart.tierCompleteIcon` ⇒ `string`

Utility helper for getting the icon for a given tier (Complete)

**Returns**: `string` - Returns the icon as an HTML string  

| Param | Type | Description |
| --- | --- | --- |
| tier | `object` | The tier object |

## `SmartCart.tierProgressIcon` ⇒ `string`

Utility helper for getting the icon for a given tier (In Progress)

**Returns**: `string` - Returns the icon as an HTML string  

| Param | Type | Description |
| --- | --- | --- |
| tier | `object` | The tier object |

## `SmartCart.tiersPercentageComplete` ⇒ `string` | `number`

Calculates the progress bar's percentage completed

**Returns**: `string` | `number` - The percentage as a string or number  

| Param | Type | Description |
| --- | --- | --- |
| bar | `object` | The progress bar object |
| returnInt | `boolean` | Indicates whether to return an integer or a string |

## `SmartCart.updateFreeProducts`

Updates the free products in the cart based on the current subtotal.\
This contains the primary logic for the progress bar cart management

---

# Title Methods (717B)

Source: https://developers.rebuyengine.com/reference/smart-cart-methods-title.md

## `SmartCart.getCartTitle` ⇒ `string`

Get the cart title

**Returns**: `string` - the cart title text

**Example**

```javascript
// Get the current cart title
const title = SmartCart.getCartTitle();
console.log(title); // "Your Cart"

// Use in a custom header component
document.querySelector('.my-cart-header').textContent = SmartCart.getCartTitle();
```

---

# Smart Flows Methods (6.0KB)

Source: https://developers.rebuyengine.com/reference/smart-flows-methods.md

## Overview

Smart Flows enables merchants to create dynamic, rule-based customer engagement experiences. Build automated flows that trigger popups, website banners, discounts, and product recommendations based on user behavior, cart state, and other conditions.

### Key Features

- **Rule-based triggers** - Show content based on cart value, user type, date ranges, and more
- **Multiple component types** - Popups, website banners, redirects, Buy X Get Y offers
- **Session persistence** - Track user interactions across page loads using IndexedDB
- **Link-based flows** - Trigger flows via URL parameters for marketing campaigns
- **Preview mode** - Test flows in the admin before going live

## Quick Start

Smart Flows initializes automatically when configured in your Rebuy dashboard. For programmatic access:

```javascript
// Check if Smart Flows is ready
if (Rebuy.SmartFlows.status === 'ready') {
  // Get all available flows
  const flows = Rebuy.SmartFlows.getFlows();
  console.log('Available flows:', flows);
}

// Listen for Smart Flows to be ready
document.addEventListener('rebuy:smartflows.ready', (event) => {
  console.log('Smart Flows initialized');
});
```

### Load a Flow by Short Code

Flows can be loaded dynamically using their short code:

```javascript
// Add a flow by its short code (useful for marketing links)
const flow = await Rebuy.SmartFlows.addFlowByCode('SUMMER2026');

if (flow) {
  console.log('Flow loaded:', flow.name);
  // Process the flow
  Rebuy.SmartFlows.processFlows();
}
```

### Check Session Activity

Access user session data to understand engagement:

```javascript
// Get session activity metrics
const activity = await Rebuy.SmartFlows.session.getSessionActivity();

console.log('Active time:', activity.activeTime, 'ms');
console.log('Is returning user:', activity.isReturningUser);
```

## Methods Reference

Access the Smart Flows module via `window.Rebuy.SmartFlows`.

### `SmartFlows.initialized` : `boolean`
Smart Flows module initialization flag

### `SmartFlows.session` : `SmartFlowSession`
[Smart Flow Session](smart-flows-methods-session.md#session) module for session persistence and state management

### `SmartFlows.status` : `SmartFlowsStatus`
Smart Flows module status. Helps determine when flows are ready to be processed.

`'initializing' | 'redirecting' | 'ready'`

### `SmartFlows.addFlow(flow)` ⇒ `void`
Add a new Smart Flow

| Param | Type | Description |
| --- | --- | --- |
| flow | `SmartFlow` | Smart Flow to add |

### `SmartFlows.addFlowByCode(shortCode)` ⇒ `Promise<(SmartFlow|void)>`
Add a new Smart Flow via shortCode

| Param | Type | Description |
| --- | --- | --- |
| shortCode | `string` | Smart Flow shortCode |

### `SmartFlows.getActiveGlobalFlow()` ⇒ `SmartFlow` | `undefined`
Get the currently active global flow

### `SmartFlows.getFlowById(flowId)` ⇒ `SmartFlow` | `undefined`
Find a Smart Flow by ID

| Param | Type | Description |
| --- | --- | --- |
| flowId | `number` | Smart Flow ID |

### `SmartFlows.getFlowByShortCode(shortCode)` ⇒ `SmartFlow` | `undefined`
Find a Smart Flow by short code

| Param | Type | Description |
| --- | --- | --- |
| shortCode | `string` | Smart Flow shortCode |

### `SmartFlows.getFlows()` ⇒ `Array<SmartFlow>`
Get a list of available flows

NOTE: Useful for filtering or lookups by ID / shortCode

### `SmartFlows.getPreviewFlow()` ⇒ `SmartFlow` | `undefined`
Get the flow currently being previewed

### `SmartFlows.goToModalPage(componentId, pageNumber)` ⇒ `boolean`
Navigate to a specific page in a modal for a given component ID

**Returns**: `boolean` - True if successful, false otherwise

| Param | Type | Description |
| --- | --- | --- |
| componentId | `string` | The ID of the component containing the modal |
| pageNumber | `number` | The page number to navigate to (1-based) |

### `SmartFlows.goToModalProduct(componentId, productId)` ⇒ `boolean`
Navigate to a specific product page in a modal for a given component ID

**Returns**: `boolean` - True if successful, false otherwise

| Param | Type | Description |
| --- | --- | --- |
| componentId | `string` | The ID of the component containing the modal |
| productId | `string` | The product ID to navigate to |

### `SmartFlows.handleLinkBasedFlow()` ⇒ `Promise<void>`
Handle link-based Smart Flow initialization

### `SmartFlows.init(flows)` ⇒ `SmartFlowsModule`
Smart Flow module initialization

| Param | Type | Description |
| --- | --- | --- |
| flows | `Array<SmartFlow>` | Array of Smart Flows to initialize |

### `SmartFlows.processFlows()` ⇒ `void`
Process all available Smart Flows

### `SmartFlows.removeFlow(flowId)` ⇒ `void`
Removes a flow + cleans up associated component observers

| Param | Type | Description |
| --- | --- | --- |
| flowId | `number` | The ID of the flow to remove |

### `SmartFlows.runComponent(component, flow)` ⇒ `void`
Executes a specific Smart Flow component

| Param | Type | Description |
| --- | --- | --- |
| component | `SmartFlowComponent` | Execute a component in the Smart Flow tree |
| flow | `SmartFlow` | Smart Flow being ran |

### `SmartFlows.runFlow(flow)` ⇒ `void`
Run a given Smart Flow, traversing its tree and rendering the first components

| Param | Type | Description |
| --- | --- | --- |
| flow | `SmartFlow` | Smart Flow to run |

### `SmartFlows.setFlows(flows)` ⇒ `void`
Apply the Smart Flows to make available

| Param | Type | Description |
| --- | --- | --- |
| flows | `Array<SmartFlow>` | Array of Smart Flows |

### `SmartFlows.sync()` ⇒ `void`
Sync the active UI component state

## Related

- [Smart Flows Session](./smart-flows-methods-session.md) - Session persistence and state management

<!-- Source: onsite-js/src/onsite/js/modules/SmartFlows/ -->

---

# Smart Flows Session (4.2KB)

Source: https://developers.rebuyengine.com/reference/smart-flows-methods-session.md

## Session

Smart Flow Session Module

Manages session persistence and state management, handling CRUD operations for sessions, flows, and component states.

### `Session.create()` ⇒ `Promise<SessionCreateResult>`
Creates or updates a Smart Flow session

**Returns**: `Promise<SessionCreateResult>` - Object containing the session and metadata

### `Session.get()` ⇒ `Promise<FlowSessionTable>`
Retrieves the current session or creates a new one

**Returns**: `Promise<FlowSessionTable>` - The current session
**Throws**:

- `Error` If session retrieval fails

### `Session.getComponent(flowId, component)` ⇒ `Promise<FlowComponentTable>`
Retrieves a component's state from the database

**Returns**: `Promise<FlowComponentTable>` - The component's session data

| Param | Type | Description |
| --- | --- | --- |
| flowId | `number` | The ID of the flow |
| component | `SmartFlowComponent` | The component to retrieve |

### `Session.getFlow(flowId)` ⇒ `Promise<FlowTable>`
Retrieves or initializes a flow

**Returns**: `Promise<FlowTable>` - The flow data

| Param | Type | Description |
| --- | --- | --- |
| flowId | `number` | The ID of the flow |

### `Session.getSessionActivity()` ⇒ `Promise<{activeTime: number, lastActive: number, isReturningUser: boolean}>`
Retrieves the current session activity metrics with recalculation

**Returns**: `Promise<{activeTime: number, lastActive: number, isReturningUser: boolean}>` - Session activity data

### `Session.init()` ⇒ `Promise<SmartFlowSessionModule>`
Initializes the Smart Flow session and calculates user activity metrics

**Returns**: `Promise<SmartFlowSessionModule>` - The initialized Session module

### `Session.remove([excludeId])` ⇒ `Promise<void>`
Removes session(s) from the database

| Param | Type | Description |
| --- | --- | --- |
| [excludeId] | `string` | Optional ID of session to exclude from deletion |

### `Session.removeComponent(flowId, component)` ⇒ `Promise<void>`
Removes a component from the database

| Param | Type | Description |
| --- | --- | --- |
| flowId | `number` | The ID of the flow |
| component | `SmartFlowComponent` | The component to remove |

### `Session.removeFlow(flowId)` ⇒ `Promise<void>`
Removes a flow and its components from the database

| Param | Type | Description |
| --- | --- | --- |
| flowId | `number` | The ID of the flow to remove |

### `Session.save(session)` ⇒ `Promise<FlowSessionTable>`
Saves session changes to the database

**Returns**: `Promise<FlowSessionTable>` - The updated session

| Param | Type | Description |
| --- | --- | --- |
| session | `FlowSessionTable` | The session to save |

### `Session.saveComponent(flowId, component, state)` ⇒ `Promise<FlowComponentTable>`
Saves component state changes to the database

**Returns**: `Promise<FlowComponentTable>` - The updated component session
**Throws**:

- `Error` If flowId or component.id is invalid

| Param | Type | Description |
| --- | --- | --- |
| flowId | `number` | The ID of the flow |
| component | `SmartFlowComponent` | The component to update |
| state | `object` | The state changes to save |

### `Session.saveFlow(flowId, state)` ⇒ `Promise<FlowTable>`
Saves flow state changes to the database

**Returns**: `Promise<FlowTable>` - The updated flow

| Param | Type | Description |
| --- | --- | --- |
| flowId | `number` | The ID of the flow |
| state | `Partial<FlowTable>` | The state changes to save |

### `Session.update([session])` ⇒ `Promise<FlowSessionTable>`
Updates an existing session or creates a new one

**Returns**: `Promise<FlowSessionTable>` - The updated or new session

| Param | Type | Description |
| --- | --- | --- |
| [session] | `FlowSessionTable` | Optional session to update |

## SessionCreateResult : `Array`
Tuple containing the session and associated metadata

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| session | `FlowSessionTable` | The session object |
| meta | `FlowSessionMeta` | The session metadata |

---

# Widgets Overview (1.6KB)

Source: https://developers.rebuyengine.com/reference/widgets.md

## Overview

Rebuy widgets are the front end user interface that customer interact with to add recommended products to their cart. These are typically used on the Home page, Product page, Cart page and Checkout page. Although they can be installed manually on any page by manually installing the widget html div into the corresponding liquid file. *(2.0 themes can use app blocks to accomplish this)*

Rebuy widgets are built in Vue.js which allows them to be dynamic according to the data that they are provided. You can learn more about the helpful attributes in this [Vue.js guide](https://vuejs.org/guide/introduction.html).

Rebuy's standard widget (Recommended products) has three general layouts (grid, list and line) that can be adjusted via the widget Layout settings according to large, medium and small screens. More on this in Settings.

Rebuy widgets also have a list of methods that can be used in order to provide additional user experience when desired. These functions can be found in the [Methods](widget-methods.md) section of the "Widgets" docs. 

Also, most all elements of a Rebuy widget have a specific Rebuy class attached to it and a parent id so that targeting specific styles for a widget can be achieved *(e.g.`#rebuy-widget-1234 .rebuy-product-info`)*. This example would target the product info container of the widget with id `1234` so that you could add additional padding or margin if desired.

---

# Settings (7.5KB)

Source: https://developers.rebuyengine.com/reference/widget-settings.md

Widget settings can be configured via the user interface on all widget editor pages. Additional logic can be added to dynamically change widget settings in the Advanced options of the widget editor or via widget event listeners. In the Advanced settings you are given callbacks for the lifecycle of the widget. (i.e. Init, Ready, Add, ProductsChange, ect.) where you are typically give the instance of that widget and sometimes the products that it is displaying. 

Here we look over most of the settings and where they live within the Rebuy object.

All the settings below are as if there is a reference to a specific widget such as the snippet below. Or, if using the Advanced callbacks and the widget instance is passed into the callback such as the image below.

```javascript title="Widget instance"
const widget = window.Rebuy.widgets.find((w) => w.id === "1234");
```

![Widget Callbacks with Ready event and console.log example](../assets/images/95cd936-Screenshot_051822_123523_PM.jpg)

## General

In the general setting you can define what type of product should be returned (onetime, subscription or both) as well as action redirects.

```javascript title="Redirects"
widget.data.settings.close_redirect;
widget.data.settings.decline_redirect;
widget.data.settings.redirect;
widget.data.settings.remove_redirect;
widget.data.settings.show_continue_button;
```

## Recommended Products

This is where you can select the data source (rules as to why certain products are displayed according to input criteria) that will be connected to this widget. You also have access to the endpoint information returned from the API request if you need to add additional logic according to specific rules. You can also return product metafields and variant metafields. These will be returned with the product object and can be accessed in a custom template, event callbacks or event listeners. 

![Data Source configuration with Cart AI RECS and metafield options](../assets/images/f8ba83a-Screenshot_050422_090537_AM.jpg)

```javascript title="Data Source"
widget.data.metadata;
```

```javascript title="Metafields"
widget.data.products[index_of_product].metafields;
widget.data.products[index_of_product].variants[index_of_variant].metafields;
```

## Discount

Discounts are a visual only tool. This will need to be paired with a Shopify script to discount the products on the backend. These discounts can also be set on the data source for specific products according to specific rule matches.

![Discount settings with Fixed type and amount input](../assets/images/042f72a-Screenshot_050422_090742_AM.jpg)

```javascript title="Discount"
widget.data.settings.discount;
```

## Timer

A timer can be set to create a sense of urgency for customers to make sure they do not miss out on a special offer. Pairing this with the discount setting and the Limit Number of Views setting under Layout.

![Timer configuration with title, duration, and end action](../assets/images/9f5339d-Screenshot_050422_090708_AM.jpg)

```javascript title="Timer"
widget.data.settings.timer;
```

## Layout

![Layout settings with display type and variant selector options](../assets/images/a9149a2-Screenshot_050422_091115_AM.jpg)

![Responsive display settings for large, medium, and small screens](../assets/images/35c3fce-Screenshot_050422_091047_AM.jpg)

![Product Options with variant display and subscription settings](../assets/images/06a7dd1-Screenshot_050422_091153_AM.jpg)

```javascript title="Layout"
widget.data.settings.display_type;
widget.data.settings.layout;
widget.data.settings.product_options;
widget.data.settings.quantity_inputs;
```

## Placement

The placement selectors use a CSS syntax to attach to an element. This will attach to the first instance of that element so it is best find an element that has a very specific class of id.

![Widget placement settings with manual installation code and breakpoints](../assets/images/4a5f1bf-Screenshot_050422_091252_AM.jpg)

```javascript title="Placement"
widget.data.settings.placement;
```

## Images

Image height and width settings will add fixed height or width to the parent anchor element and dictate the size of all images.

![Product image settings with dimensions and radius options](../assets/images/4caef14-Screenshot_050422_091333_AM.jpg)

```javascript title="Images"
widget.data.settings.images;
```

## Language

Language settings will vary depending on the widget type. 

![Widget language settings for titles and labels](../assets/images/2ab4ca9-Screenshot_050422_091500_AM.jpg)

![Additional language settings for cart and subscription labels](../assets/images/bdbc4f6-Screenshot_050422_091538_AM.jpg)

```javascript title="Language"
widget.data.settings.language;
```

## Styles

The Custom CSS text area allows you to add CSS as needed. This loads in a stylesheet when the widget loads and so make sure to use specific CSS selectors so that the CSS is not applied to other unintended elements. 

!!! warning "Specify Selectors"
    This loads a stylesheet to the page along with the widget. If you are not specific with the selectors than other elements on the page may be affected. Also, make sure to use valid CSS or else this will error.


![Widget styles settings with theme and custom CSS](../assets/images/485f03f-Screenshot_050422_091636_AM.jpg)

```css
#rebuy-widget-12345 .super-title {
	color: "#000";
	font-size: 20px;
	letter-spacing: 2px;
}
```

## Integrations

Enabling these integrations is a two part step. First, is to navigate to the Integrations tab from the left hand menu. Once this has been done then you will need to select that integration on each widget that you would like to show product reviews for. 

![Review platform integrations including Yotpo, Okendo, and Loox](../assets/images/0573261-Screenshot_050422_091757_AM.jpg)

```javascript title="Integrations"
widget.data.settings.integrations;
```

## Advanced

In the advanced options you are given access to the widget instance throughout the widget lifecycle. Some of the callbacks also pass in the products array or item added to the cart. This can be extremely powerful when needing to add custom logic and change widget settings on the fly. 

![Complete list of widget callback events](../assets/images/f0d44b6-Screenshot_050422_092456_AM.jpg)

Widget tracking will add product properties to the product object. We use these properties in order to track sales contributed by these widgets, auto remove items for Gift With Purchase type widgets along with other subtle functionality of the widgets.

![Product Properties tracking settings](../assets/images/af9c33d-Screenshot_050422_092255_AM.jpg)

You can access all of the widget settings and information directly from the widget instance that is passed into the callback.

```javascript title="Settings"
widget.data.settings;
```

## Use Case

You may want a popup widget to display according to some custom logic that is not available by using the connected Data Source for that widget. This could be used in the Ready callback

In this example we are manipulating the popup trigger to "manual" which means that the popup will only show by running the `widget.show();` method. Where, typically the popup widget would show according the the rules of the connected Data Source.

```javascript title="Popup"
widget.data.config.popup_trigger = 'manual';

if ('some custom logic') {
    widget.show();
}
```

![Widget Callbacks with custom JavaScript popup trigger example](../assets/images/54a499b-image.png)

---

# Attributes (1.6KB)

Source: https://developers.rebuyengine.com/reference/widget-attributes.md

Rebuy widget track the items that have been added by those widget by default. This way merchants can track the attributed sales they have made from Rebuy widgets. This can be viewed from the Dashboard or the Reports tab of the Rebuy admin. This will add properties to the product object upon adding to the cart which are all prefixed with an underscore "_" because Shopify hides properties prefixed with an underscore by default.

The attribution types will vary depending on the widget type. An example of widget attribution is such as below.

```javascript title="Properties"
properties: {
  _attribution: "Rebuy Product",
  _source: "Rebuy",
  _widget_id: "12345"
}
```

It is possible to not track these attributions if needed by unselecting the checkboxes in the bottom of the Advanced setting of the widget editor.

!!! warning "Don't Disable Attribution Properties"
    Some widget types use the attributions for custom logic. Such as the Gift with Purchase widget type which automatically adds or removes a product based off the given data source. When the cart changes and the rule matches, the widget will check to make sure that this product is not already in the cart and added by the specific widget. It is possible to create an infinite loop of adding the product if these properties are not enabled.


![Widget editor Advanced settings showing attribution tracking checkboxes](../assets/images/b2c1430-Screenshot_051822_010625_PM.jpg "Widget attribution settings")

---

# Methods (10.8KB)

Source: https://developers.rebuyengine.com/reference/widget-methods.md

The widget methods are scoped to each widget specifically. The widgets are placed in an array nested within the global Rebuy object so when using methods for a specific widget you can use the Array.find() function (example below) or any other array function that you prefer.

This is not a complete list of the globally available function but the ones that we find most helpful.

```javascript title="Find widget"
const widget = window.Rebuy.widgets.find(widget => widget.id === "1234");
```

All methods below are as if there is a reference to a specific widget such as the snippet below or if the code snippet is in one of the widget callbacks from the widget settings page under the Advanced settings such as the image below.

```javascript title="Widget reference"
const widget = window.Rebuy.widgets[0];
```

![Widget Callbacks settings with Ready event example](../assets/images/bc411d8-Screenshot_051822_015838_PM.jpg)

## addSelectedProductsToCart

This function is used with the Product Add-Ons widget. This adds the items that are selected from the widget to the cart.

```javascript
widget.addSelectedProductsToCart(data, callback);
```

## addToCart

Makes a post request to Shopify API to add an item to the cart. The first argument expects a product object.

```javascript
widget.addToCart(product, callback);
```

## addToReChargeCheckout

Used by the Recharge Checkout widget to add the item object passed in as the first argument and will update the checkout UI.

```javascript
widget.addToReChargeCheckout(product, callback);
```

## cartItemIsWidgetItem

Returns a boolean (true) if the item passed in as an argument has been added by the specified widget that is calling the method.

```javascript
widget.cartItemIsWidgetItem(item);
```

## checkout

When this function is called, the customer will be redirected to the checkout page.

```javascript
widget.checkout();
```

## compareAtSubtotal

Used by the **Dynamic Bundle** and **Product Addons** widgets to generate a compare at price if there is a discount for any of the applicable products

```javascript
widget.compareAtSubtotal();
```

## declineOffer

Used by the **Upsell**, **Thanks You Page** and **Switch to Subscription** popup type widgets when the customer does not want to accept the offer from presented.

```javascript
widget.declineOffer(product, callback);
```

## destroy

This function will destroy and remove the widget, including the root div, at the given index. This function calls hide, detachWidget and unbindEvents.

```javascript
widget.destroy(callback);
```

## detachWidget

This function removes the widget from the DOM as well as removes it from the array of widget from window\.Rebuy.widgets.

```javascript
widget.detachWidget();
```

## getCartProductIDs

Returns an array of numbers which are the product ID's of the products in the cart.

```javascript
widget.getCartProductIDs();
```

## getCartVariantIDs

Returns an array of numbers which are the variant ID's of the products in the cart.

```javascript
widget.getCartVariantIDs();
```

## getVariantIDs

Returns an array of numbers which are the variant ID's of the items in the cart. Take an optional boolean (join) as an argument and when true will join as a comma separated string instead of an array of numbers.

```javascript
widget.getVariantIDs(join);
```

## getWidgetProducts

This method will force the widget to fetch new products via the API, and accepts an optional callback function.  This is useful if you'd like to update product or variant IDs associated with the widget and then fetch a new API response.  In practice, you could update the variant ID based on a customer's interaction with the product page form and fetch variant-specific recommendations.

```coffeescript title="JavaScript"
widget.getWidgetProducts(callback):
```

```coffeescript title="Examples"
// Set Shopify variant IDs
widget.data.shopify_variant_ids = [1234567890];

// Fetch new data with the updated variant IDs
widget.getWidgetProducts(()=>{
  console.log("New products fetched!");
});
```

## hasQuantityInputEnabled

Returns a boolean (true) when the widgets quantity input setting is enabled.

```javascript
widget.hasQuantityInputEnabled();
```

## hasTimer

Returns a boolean (true) when the widgets timer setting is enabled.

```javascript
widget.hasTimer();
```

## hide

Used by **Popup** type widgets and will close the widget when this method is called.

```javascript
widget.hide();
```

## isCartBasedWidget

Returns a boolean (true) when the widget is a cart based widget as opposed to a product page widget.

```javascript
widget.isCartBasedWidget();
```

## productIsSelected

Used by the Dynamic Bundle and Product Addons widgets. Returns a boolean (true) when the checkbox is selected.

```javascript
widget.productIsSelected(product);
```

## removeFromCart

Original use case: Used by the Shopify checkout and Recharge checkout widget to remove an item from the cart that has been added by the widget. When in checkout, if an item is added by a Rebuy checkout widget then the item will have a (remove) button below it. This way, if the item was added accidentally the customer does not need to navigate back to the cart page to adjust the item that was added.

```javascript
widget.removeFromCart(product, callback);
```

## render

When this method is called and the widget should display based off the connected rules then it will render by creating a new Vue instance for the widget.

```javascript
widget.render();
```

## selectedProductCount

Used by the Product Addon and Dynamic bundle widget. Returns a number which is the amount of products that are currently selected.

```javascript
widget.selectedProductCount();
```

## shouldDisplay

Returns a boolean (true) if the widget should display according to the connected data source.

```javascript
widget.shouldDisplay();
```

## show

This method will make a **popup** type widget display when it is called. The **popup** widget can be set to trigger manually via the widgets settings object and then could be triggered to display according to custom logic as needed.

```javascript
widget.show();
```

```javascript title="Example"
widget.data.pop_up_trigger = "manual";
if ("some custom logic") {
  widget.show();
}
```

---

## Product & Variant Methods

### getProductIDs

Returns an array of Shopify product IDs associated with the widget. Takes an optional boolean argument; when `true`, returns a comma-separated string instead of an array.

```javascript
widget.getProductIDs();       // [123456, 789012]
widget.getProductIDs(true);   // "123456,789012"
```

### getCollectionIDs

Returns an array of Shopify collection IDs associated with the widget. Takes an optional boolean argument; when `true`, returns a comma-separated string.

```javascript
widget.getCollectionIDs();      // [987654321]
widget.getCollectionIDs(true);  // "987654321"
```

### productAvailable

Returns a boolean indicating whether at least one variant of the product is available for purchase.

```javascript
widget.productAvailable(product);  // true or false
```

### variantAvailable

Returns a boolean indicating whether a specific variant is available for purchase based on inventory policy and quantity.

```javascript
widget.variantAvailable(variant);  // true or false
```

### variantPrice

Returns the price for a variant, accounting for any widget discounts, subscription discounts, and currency localization. If no variant is provided, uses the lowest-priced variant.

```javascript
widget.variantPrice(product, product.selected_variant);
```

### variantCompareAtPrice

Returns the compare-at price for a variant, used to show the original price when a discount is applied.

```javascript
widget.variantCompareAtPrice(product, product.selected_variant);
```

### variantOnSale

Returns a boolean indicating whether a variant is on sale (has a discount or compare-at price higher than current price).

```javascript
widget.variantOnSale(product, product.selected_variant);  // true or false
```

---

## Subscription Methods

### hasSubscription

Returns a boolean indicating whether a product has subscription options available.

```javascript
widget.hasSubscription(product);  // true or false
```

### hasSubscriptionDiscount

Returns a boolean indicating whether a product has a subscription discount configured.

```javascript
widget.hasSubscriptionDiscount(product);  // true or false
```

### toggleSubscription

Toggles the subscription state of a product. If the product has a subscription and is set to one-time, switches to subscription. If already subscribed, switches to one-time.

```javascript
widget.toggleSubscription(product);
```

### selectSubscription

Selects subscription purchase for a product. Optionally accepts a frequency parameter.

```javascript
widget.selectSubscription(product);
widget.selectSubscription(product, 30);  // 30-day frequency
```

### selectOnetime

Selects one-time purchase for a product (disables subscription).

```javascript
widget.selectOnetime(product);
```

---

## Cart Observation

### watchCart

Registers an event listener that triggers when the cart changes. Useful for updating widget products when cart contents change. The callback receives the updated products array.

```javascript
widget.watchCart(function(products) {
  console.log("Cart changed, products updated:", products);
});
```

### unwatchCart

Removes the cart change event listener registered by `watchCart`.

```javascript
widget.unwatchCart();
```

### cartHasProduct

Returns a boolean indicating whether the cart contains a specific product.

```javascript
widget.cartHasProduct(product);  // true or false
```

---

## Bundle & Add-On Methods

### selectProduct

Used by **Dynamic Bundle** and **Product Add-Ons** widgets. Marks a product as selected.

```javascript
widget.selectProduct(product);
```

### unselectProduct

Used by **Dynamic Bundle** and **Product Add-Ons** widgets. Marks a product as unselected.

```javascript
widget.unselectProduct(product);
```

### toggleProductSelect

Toggles the selection state of a product. If selected, unselects it; if unselected, selects it.

```javascript
widget.toggleProductSelect(product);
```

### subtotal

Used by **Dynamic Bundle** and **Product Add-Ons** widgets. Returns the subtotal in cents for all selected products.

```javascript
widget.subtotal();  // 2500 (represents $25.00)
```

### bundleOnSale

Returns a boolean indicating whether the bundle has a discount (subtotal is less than compare-at subtotal).

```javascript
widget.bundleOnSale();  // true or false
```

### bundleSavings

Returns the savings amount in cents (difference between compare-at subtotal and current subtotal).

```javascript
widget.bundleSavings();  // 500 (represents $5.00 savings)
```

---

# Event Listeners (7.9KB)

Source: https://developers.rebuyengine.com/reference/widget-event-listeners.md

These events trigger during the widget lifecycle. Use them to track user interactions, integrate with analytics, or customize widget behavior.

## Init

Triggers on widget initialization.

```javascript
document.addEventListener('rebuy.init', (event) => {
  const { widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |

## Before Ready

Triggers before the widget is ready.

```javascript
document.addEventListener('rebuy.beforeReady', (event) => {
  const { widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |

## Ready

Triggers when the widget is ready for interaction.

```javascript
document.addEventListener('rebuy.ready', (event) => {
  const { widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |

## Before Add

Triggers before a product is added from a widget.

```javascript
document.addEventListener('rebuy.beforeAdd', (event) => {
  const { product, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being added |
| `widget` | object | The widget instance |

## Add

Triggers once a product is added from a widget.

```javascript
document.addEventListener('rebuy.add', (event) => {
  const { product, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was added |
| `widget` | object | The widget instance |

## Before Remove

Triggers before a Gift With Purchase widget removes an item from the cart (when the rule is no longer valid), or when a customer removes a product from checkout.

```javascript
document.addEventListener('rebuy.beforeRemove', (event) => {
  const { product, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being removed |
| `widget` | object | The widget instance |

## Remove

Triggers once a Gift With Purchase widget has removed an item from the cart (when the rule is no longer valid), or when a customer removes a product from checkout.

```javascript
document.addEventListener('rebuy.remove', (event) => {
  const { product, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was removed |
| `widget` | object | The widget instance |

## Before Change

Triggered before a widget makes a **/change** request to the Shopify cart.

```javascript
document.addEventListener('rebuy.beforeChange', (event) => {
  const { item, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `item` | object | The cart item being changed |
| `widget` | object | The widget instance |

## Change

Triggered when a widget runs a **/change** request to the Shopify cart. For example, when a Gift With Purchase widget changes an item to align with updated rules.

```javascript
document.addEventListener('rebuy.change', (event) => {
  const { item, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `item` | object | The cart item that was changed |
| `widget` | object | The widget instance |

## Before Decline

Triggers before declining an up-sell or cross-sell offering.

```javascript
document.addEventListener('rebuy.beforeDecline', (event) => {
  const { product, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being declined |
| `widget` | object | The widget instance |

## Decline

Triggers once an up-sell or cross-sell offering is declined.

```javascript
document.addEventListener('rebuy.decline', (event) => {
  const { product, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was declined |
| `widget` | object | The widget instance |

## View

Triggers when a user clicks on a product or "Learn More" link from the widget (product image, title, or learn more button).

```javascript
document.addEventListener('rebuy.view', (event) => {
  const { product, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being viewed |
| `widget` | object | The widget instance |

## Before Products Change

Triggers before the products being offered change. This happens in cart-based widgets when a customer adds an item, and also on initialization when the widget goes from zero products to having products.

```javascript
document.addEventListener('rebuy.beforeProductsChange', (event) => {
  const { products, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The current products before the change |
| `widget` | object | The widget instance |

## Products Change

Triggers once the products being offered change. This happens in cart-based widgets when a customer adds an item, and also on initialization when the widget goes from zero products to having products.

```javascript
document.addEventListener('rebuy.productsChange', (event) => {
  const { products, widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The new array of products |
| `widget` | object | The widget instance |

## Refresh

Triggers whenever a widget refreshes.

```javascript
document.addEventListener('rebuy.refresh', (event) => {
  const { widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |

## Before Show

Triggers before a popup widget displays itself.

```javascript
document.addEventListener('rebuy.beforeShow', (event) => {
  const { widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |

## Show

Triggers once a popup widget displays itself.

```javascript
document.addEventListener('rebuy.show', (event) => {
  const { widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |

## Before Hide

Triggers before a popup widget hides itself.

```javascript
document.addEventListener('rebuy.beforeHide', (event) => {
  const { widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |

## Hide

Triggers once a popup widget hides itself.

```javascript
document.addEventListener('rebuy.hide', (event) => {
  const { widget } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |

## Related

- [Cart Event Listeners](cart-event-listeners.md) - Events for the cart object
- [Smart Cart Event Listeners](smart-cart-event-listeners.md) - Events for the Smart Cart UI

---

# Widget Custom Templates (110.6KB)

Source: https://developers.rebuyengine.com/reference/widget-custom-templates.md

## Overview

This allows developers the ability to add custom functionality that is currently not achievable by the widget settings themselves. These templates can use any globally accessible functions. Developers can add additional Vue.js/HTML to these templates as needed. As these templates are written in Vue.js they accept and Vue.js attributes such as v-if for conditional rendering.

## Setting up Custom Templates

There are a couple of ways these templates can be used. They can target all widgets of that widget type or, they can target a specific widget if you do not want the custom work to be applied to all widgets of that specific widget type.

Typically developers will create a new snippet named something like "rebuy-templates.liquid" and paste the contents of the code in that file. Then render that snippet in the associated file or in the theme.liquid file if they want the template to be globally accessible.

## Widget Specificity

Rebuy templates can be specified to work for a specific widget or all widgets of that widget type by either including or excluding the widget ID in the opening script tag of the template. In order to make the template work for that specific widget change the id of the script tog to "rebuy-widget-xxxx" where the x's are the Id of the specific widget you would like to customize such as the example below.

```html
<script id="rebuy-widget-1234" type="text/template"></script>
```

## Recommended Template

```html title="Last Updated: October 21, 2025"
<script id="rebuy-recommended-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">

    <div
        class="rebuy-widget-container"
        v-cloak
        v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
        v-on:click.self="hide()">

        <div class="rebuy-widget-content">
            <div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
                <rebuy-icon name="x"></rebuy-icon>
            </div>

            <div class="rebuy-timer" v-if="hasTimer()">
                <p class="rebuy-timer-title" v-if="config.language.timer_title">
                    <span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
                </p>
            </div>

            <h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>

            <h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>

            <div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>

            <div class="rebuy-product-grid" v-bind:class="layoutClasses" tabindex="0" role="list">

                <div
                    v-for="(product, product_index) in products"
                    v-bind:class="[
                        product.handle,
                        'product-id-' + product.id,
                        cartHasProduct(product) ? 'cart-has-item' : '',
                        productTagClasses(product),
                        hasSplideCarousel ? 'splide__slide' : '',
                    ]"
                    aria-label="product"
                    class="rebuy-product-block"
                    role="listitem"
                >

                    <div class="rebuy-product-media">
                        <a
                            class="rebuy-product-image"
                            tabindex="-1"
                            v-bind:href="learnMoreURL(product)"
                            v-bind:style="imageStyles"
                            v-on:click="learnMore(product, $event);"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                            rel="nofollow"
                        >
                            <img v-bind:loading="product_index > 1 ? 'lazy' : 'eager'" v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="itemImageAlt(product, product.selected_variant)">
                        </a>
                    </div>
                    <div class="rebuy-product-info">
                        <h5
                            class="rebuy-product-title"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']">
                            <a
                                v-bind:href="learnMoreURL(product)"
                                class="rebuy-product-title-link"
                                v-on:click="learnMore(product, $event);"
                                v-html="product.title"
                                v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                                v-bind:aria-label="'View ' + product.title"
                                rel="nofollow"
                            ></a>
                        </h5>
                        <div
                            class="rebuy-product-vendor-container"
                            v-if="showProductVendor(product.vendor)"
                        >
                            <a
                                class="rebuy-product-vendor"
                                v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
                                v-html="product.vendor"
                                v-bind:href="vendorURL(product.vendor)"
                                v-bind:aria-label="'View ' + product.vendor + ' products'"
                                rel="nofollow"
                            ></a>
                        </div>
                        <div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
                        <div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
                            <span class="rebuy-star-rating">
                                <span
                                    v-if="product.reviews.star_rating"
                                    class="rebuy-star-rating-value sr-only"
                                    v-html="product.reviews.star_rating + ' stars out of 5 stars'"
                                >
                                </span>
                                <span class="rebuy-star-rating-background"></span>
                                <span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
                            </span>
                            <span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
                        </div>

                        <div class="rebuy-product-price">
                            <div v-if="variantOnSale(product, product.selected_variant)">
                                <span class="rebuy-money sale">
                                    <span class="sr-only">Sale price</span>
                                    <span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                </span>
                                <span class="rebuy-money compare-at">
                                    <span class="sr-only">Original price</span>
                                    <span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                                </span>
                            </div>
                            <div v-if="!(variantOnSale(product, product.selected_variant))">
                                <span class="rebuy-money">
                                    <span class="sr-only">Price</span>
                                    <span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                </span>
                            </div>
                        </div>
                        <div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
                    </div>
                    <div class="rebuy-product-options" v-if="showVariantSelect(product)">
                        <select
                            title="Select product variant"
                            :id="id + '-' + 'select' + '-' + product_index"
                            :class="{ hide : config.view_options.variant_selector === 'buttons' }"
                            class="rebuy-select"
                            v-bind:aria-label="'variant of ' + product.title"
                            v-model="product.selected_variant_id"
                            v-on:change="selectVariant(product)">
                            <option
                                v-for="variant in product.variants"
                                class="rebuy-product-options__option"
                                :class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
                                v-bind:value="variant.id"
                                :disabled="!variantAvailable(variant)"
                                v-html="formatVariantOptionTitle(variant)">
                            </option>
                        </select>

                        <div
                            class="rebuy-product-options__button-swatches-container"
                            :class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
                            >
                            <div
                                v-for="option in product.options"
                                :key="'option-' + product.id + '-' + option.name"
                                class="rebuy-product-options__button-swatches rebuy-size-swatches"
                                >
                                <div
                                    v-for="(value, value_index) in filterOOSOptions(option, product)"
                                    :key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
                                    >
                                    <div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
                                        <input
                                            :name="id + '-color-' + product_index"
                                            :id="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                            :checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
                                            :value="value"
                                            type="radio"
                                            class="rebuy-color-input hide"
                                            v-on:change="selectVariantByOption(product, option.name, value)"
                                            :disabled="isDisabledOptionValue(product, option.name, value)"
                                        />

                                        <label
                                            :for="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                            :style="getMerchantThemeColorAssetStyle(value)"
                                            :title="value"
                                            class="rebuy-color-label"
                                            :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                        >
                                        </label>
                                    </div>

                                    <div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
                                        <input
                                            :name="id + '-' + option.name + '-' + product_index"
                                            :id="id + '-' + option.name + '-' + product_index + '-' + value"
                                            :checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
                                            :value="value"
                                            type="radio"
                                            class="rebuy-size-input hide"
                                            v-on:change="selectVariantByOption(product, option.name, value)"
                                            :disabled="isDisabledOptionValue(product, option.name, value)"
                                        />

                                        <label
                                            :for="id + '-' + option.name + '-' + product_index + '-' + value"
                                            class="rebuy-size-label"
                                            :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                        >
                                            {{ value }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rebuy-product-actions">
                        <div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
                            <label class="rebuy-checkbox-label">
                                <input
                                    class="checkbox-input rebuy-checkbox"
                                    v-model="product.subscription"
                                    v-on:change="toggleSubscription(product)"
                                    type="checkbox"
                                    :aria-label="upgradeToSubscriptionAriaLabel(product)"
                                />
                                <span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
                            </label>
                        </div>

                        <div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
                            <select
                                class="rebuy-select"
                                aria-label="subscription frequency"
                                v-model="product.subscription_frequency"
                                v-on:change="updateSubscriptionFrequency(product)">
                                <option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
                            </select>
                        </div>

                        <div class="product-quantity" v-if="hasQuantityInputEnabled()">
                            <div class="rebuy-select-wrapper">
                                <label class="rebuy-label">Quantity</label>
                                <select
                                    class="rebuy-select"
                                    aria-label="product quantity"
                                    v-model="product.quantity">
                                    <option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
                                </select>
                            </div>
                        </div>

                        <button
                            class="rebuy-button"
                            v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                            v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                            v-bind:aria-label="buttonAriaLabel(product)"
                            v-on:click="addToCart(product)"
                            type="button">
                                <span v-html="buttonLabel(product)"></span>
                        </button>
                    </div>
                </div>

            </div>

            <div class="rebuy-modal-actions" v-if="showContinueButton()">
                <button
                    class="rebuy-button decline"
                    v-on:click="hide()"
                    type="button">
                        <span v-html="continueLabel()"></span>
                </button>
            </div>

            <div class="powered-by-rebuy">
                <a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
                    Powered by Rebuy
                </a>
            </div>

        </div>

    </div>
</div>
</script>
```

## Upsell Template

```html title="Last Updated: October 21, 2025"
<script id="rebuy-upsell-template" type="text/template">
<div class="rebuy-widget"
    v-cloak
    v-on:click="stopPropagation($event)"
    v-bind:id="'rebuy-widget-' + id"
    v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">

    <div
        class="rebuy-widget-container"
        v-cloak
        v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
        v-on:click.self="hide()">

        <div class="rebuy-widget-content">
            <div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
                <rebuy-icon name="x"></rebuy-icon>
            </div>

            <div class="rebuy-timer" v-if="hasTimer()">
                <p class="rebuy-timer-title" v-if="config.language.timer_title">
                    <span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
                </p>
            </div>

            <h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>

            <h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>

            <div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>

            <div class="rebuy-product-grid" v-bind:class="layoutClasses">

                <div
                    class="rebuy-product-block"
                    v-for="(product, product_index) in products"
                    v-bind:class="[
                        product.handle,
                        'product-id-' + product.id,
                        cartHasProduct(product) ? 'cart-has-item' : '',
                        productTagClasses(product),
                        hasSplideCarousel ? 'splide__slide' : '',
                    ]">
                    <div class="rebuy-product-media">
                        <a
                            class="rebuy-product-image"
                            v-bind:href="learnMoreURL(product)"
                            v-bind:style="imageStyles"
                            v-on:click="learnMore(product, $event);"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                            rel="nofollow"
                        >
                            <img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
                        </a>
                    </div>
                    <div class="rebuy-product-info">
                        <h5
                            class="rebuy-product-title"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']">
                            <a
                                v-bind:href="learnMoreURL(product)"
                                class="rebuy-product-title-link"
                                v-on:click="learnMore(product, $event);"
                                v-html="product.title"
                                v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                                v-bind:aria-label="'View ' + product.title"
                                rel="nofollow"
                            ></a>
                        </h5>
                        <div
                            class="rebuy-product-vendor-container"
                            v-if="showProductVendor(product.vendor)"
                        >
                            <a
                                class="rebuy-product-vendor"
                                v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
                                v-html="product.vendor"
                                v-bind:href="vendorURL(product.vendor)"
                                v-bind:aria-label="'View ' + product.vendor + ' products'"
                                rel="nofollow"
                            ></a>
                        </div>
                        <div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
                        <div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
                            <span class="rebuy-star-rating">
                                <span
                                    v-if="product.reviews.star_rating"
                                    class="rebuy-star-rating-value sr-only"
                                    v-html="product.reviews.star_rating + ' stars out of 5 stars'"
                                >
                                </span>
                                <span class="rebuy-star-rating-background"></span>
                                <span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
                            </span>
                            <span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
                        </div>
                        <div class="rebuy-product-price">
                            <div v-if="variantOnSale(product, product.selected_variant)">
                                <span class="rebuy-money sale">
                                    <span class="sr-only">Sale price</span>
                                    <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                </span>
                                <span class="rebuy-money compare-at">
                                    <span class="sr-only">Original price</span>
                                    <span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                                </span>
                            </div>
                            <div v-if="!(variantOnSale(product, product.selected_variant))">
                                <span class="rebuy-money">
                                    <span class="sr-only">Price</span>
                                    <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                </span>
                            </div>
                        </div>
                        <div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
                    </div>
                    <div class="rebuy-product-options" v-if="showVariantSelect(product)">
                        <select
                            :id="id + '-' + 'select' + '-' + product_index"
                            :class="{ hide : settings.view_options.variant_selector == 'buttons' }"
                            class="rebuy-select"
                            v-bind:aria-label="'variant of ' + product.title"
                            v-model="product.selected_variant_id"
                            v-on:change="selectVariant(product)">
                            <option
                                v-for="variant in product.variants"
                                class="rebuy-product-options__option"
                                :class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
                                v-bind:value="variant.id"
                                :disabled="!variantAvailable(variant)"
                                v-html="formatVariantOptionTitle(variant)">
                            </option>
                        </select>

                        <div
                            class="rebuy-product-options__button-swatches-container"
                            :class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
                            >
                            <div
                                v-for="option in product.options"
                                :key="'option-' + product.id + '-' + option.name"
                                class="rebuy-product-options__button-swatches rebuy-size-swatches"
                                >
                                <div
                                v-for="(value, value_index) in filterOOSOptions(option, product)"
                                :key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
                                >
                                    <div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
                                        <input
                                            :name="id + '-color-' + product_index"
                                            :id="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                            :checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
                                            :value="value"
                                            type="radio"
                                            class="rebuy-color-input hide"
                                            v-on:change="selectVariantByOption(product, option.name, value)"
                                            :disabled="isDisabledOptionValue(product, option.name, value)"
                                        />

                                        <label
                                            :for="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                            :style="getMerchantThemeColorAssetStyle(value)"
                                            :title="value"
                                            class="rebuy-color-label"
                                            :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                        >
                                        </label>
                                    </div>

                                    <div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
                                        <input
                                            :name="id + '-' + option.name + '-' + product_index"
                                            :id="id + '-' + option.name + '-' + product_index + '-' + value"
                                            :checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
                                            :value="value"
                                            type="radio"
                                            class="rebuy-size-input hide"
                                            v-on:change="selectVariantByOption(product, option.name, value)"
                                            :disabled="isDisabledOptionValue(product, option.name, value)"
                                        />

                                        <label
                                            :for="id + '-' + option.name + '-' + product_index + '-' + value"
                                            class="rebuy-size-label"
                                            :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                        >
                                            {{ value }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rebuy-product-actions">

                        <div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
                            <label class="rebuy-checkbox-label">
                                <input
                                    class="checkbox-input rebuy-checkbox"
                                    v-model="product.subscription"
                                    v-on:change="toggleSubscription(product)"
                                    type="checkbox"
                                    :aria-label="upgradeToSubscriptionAriaLabel(product)"
                                />
                                <span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
                            </label>
                        </div>

                        <div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
                            <select
                                class="rebuy-select"
                                aria-label="subscription frequency"
                                v-model="product.subscription_frequency"
                                v-on:change="updateSubscriptionFrequency(product)">
                                <option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
                            </select>
                        </div>

                        <div class="product-quantity" v-if="hasQuantityInputEnabled()">
                            <div class="rebuy-select-wrapper">
                                <label class="rebuy-label">Quantity</label>
                                <select
                                    class="rebuy-select"
                                    aria-label="product quantity"
                                    v-model="product.quantity">
                                    <option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
                                </select>
                            </div>
                        </div>

                        <button
                            class="rebuy-button"
                            v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                            v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                            v-bind:alt="'Add ' + product.title + ' to Cart'"
                            v-on:click="addUpsellToCart(product)"
                            type="button">
                                <span v-html="buttonLabel(product)"></span>
                        </button>

                        <button
                            class="rebuy-button decline"
                            v-on:click="declineOffer(product)"
                            type="button">
                                <span v-html="declineLabel(product)"></span>
                        </button>

                    </div>
                </div>

            </div>

            <div class="powered-by-rebuy">
                <a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
                    Powered by Rebuy
                </a>
            </div>

        </div>

    </div>
</div>
</script>
```

## Dynamic Bundle

```html title="Last Updated: October 21, 2025"
<script id="rebuy-dynamic-bundle-template" type="text/template">
<div class="rebuy-widget"
    v-cloak
    v-on:click="stopPropagation($event)"
    v-bind:id="'rebuy-widget-' + id"
    v-bind:class="['widget-type-' + config.type.replace('_','-'), products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">

    <div
        class="rebuy-widget-container"
        v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]">
        <div class="rebuy-widget-content">
            <div class="rebuy-timer" v-if="hasTimer()">
                <h5 class="rebuy-timer-title" v-if="config.language.timer_title">
                    <span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
                </h5>
            </div>

            <h4 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h4>

            <h3 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h3>

            <div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>

            <div class="rebuy-bundle">

                <div class="rebuy-bundle__images">

                    <div class="rebuy-bundle__image" v-for="(product, index) in products" v-if="product.selected" v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product), variantAvailable(product.selected_variant) ? '' : 'rebuy-bundle__image--out-of-stock']">
                        <a
                            class="rebuy-bundle__image-item"
                            v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '' ]"
                            v-bind:href="learnMoreURL(product)"
                            v-bind:style="imageStyles"
                            v-on:click="learnMore(product, $event);"
                            rel="nofollow"
                        >
                            <img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
                        </a>
                        <div class="rebuy-bundle__image-divider">
                            <rebuy-icon name="plus"></rebuy-icon>
                        </div>
                    </div>

                </div>

                <div class="rebuy-bundle__actions" v-if="subtotal() > 0">
                    <div class="rebuy-bundle__actions-price">
                        <strong class="rebuy-bundle__actions-price-label" v-html="config.language.total_price_label"></strong>
                        <p class="rebuy-bundle__actions-price-value" v-if="bundleOnSale()">
                            <span class="rebuy-money sale">
                                <span class="sr-only">Sale price</span>
                                <span v-html="formatMoney(subtotal())"></span>
                            </span>
                            <span class="rebuy-money compare-at">
                                <span class="sr-only">Original price</span>
                                <span v-html="formatMoney(compareAtSubtotal())"></span>
                            </span>
                        </p>
                        <p class="rebuy-bundle__actions-price-value" v-if="!(bundleOnSale())">
                            <span class="rebuy-money">
                                <span class="sr-only">Price</span>
                                <span v-html="formatMoney(subtotal())"></span>
                            </span>
                        </p>
                    </div>

                    <div class="rebuy-bundle__actions-buttons">
                        <button
                            class="rebuy-button"
                            v-on:click="addSelectedProductsToCart()"
                            v-bind:disabled="isBundleIncomplete()"
                            type="button">
                                <span v-html="buttonWidgetLabel()"></span>
                        </button>
                    </div>
                </div>

                <div class="rebuy-bundle__items">

                    <div
                        v-for="(product, product_index) in products"
                        class="rebuy-product-block"
                        v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product), isInputProduct(product) ? 'is-input-product' : '' ,product.selected ? 'is-selected': '', variantAvailable(product.selected_variant) ? '' : 'rebuy-product-block--out-of-stock']"
                    >
                        <div class="rebuy-product-info">
                            <div class="rebuy-product-checkbox" v-if="!bundleRequiresAllItems()">
                                <label class="rebuy-checkbox-label">
                                    <input
                                        class="checkbox-input rebuy-checkbox"
                                        v-model="product.selected"
                                        type="checkbox" />
                                </label>
                            </div>
                            <strong class="rebuy-product-label" v-if="isInputProduct(product)" v-html="'This item:'"></strong>
                            <h5
                                class="rebuy-product-title"
                                v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '']"
                                >
                                <a
                                    v-bind:href="learnMoreURL(product)"
                                    class="rebuy-product-title-link"
                                    v-on:click="learnMore(product, $event);"
                                    v-html="product.title"
                                    v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '']"
                                    v-bind:aria-label="'View ' + product.title"
                                    rel="nofollow"
                                ></a>
                            </h5>
                            <div
                                class="rebuy-product-vendor-container"
                                v-if="showProductVendor(product.vendor)"
                            >
                                <a
                                    class="rebuy-product-vendor"
                                    v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
                                    v-html="product.vendor"
                                    v-bind:href="vendorURL(product.vendor)"
                                    v-bind:aria-label="'View ' + product.vendor + ' products'"
                                    rel="nofollow"
                                ></a>
                            </div>
                            <div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
                            <div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
                                <span class="rebuy-star-rating">
                                    <span
                                        v-if="product.reviews.star_rating"
                                        class="rebuy-star-rating-value sr-only"
                                        v-html="product.reviews.star_rating + ' stars out of 5 stars'"
                                    >
                                    </span>
                                    <span class="rebuy-star-rating-background"></span>
                                    <span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
                                </span>
                                <span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
                            </div>

                            <div class="rebuy-product-price">
                                <div v-if="variantOnSale(product, product.selected_variant)">
                                    <span class="rebuy-money sale">
                                        <span class="sr-only">Sale price</span>
                                        <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                    </span>
                                    <span class="rebuy-money compare-at">
                                        <span class="sr-only">Original price</span>
                                        <span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                                    </span>
                                </div>
                                <div v-if="!(variantOnSale(product, product.selected_variant))">
                                    <span class="rebuy-money">
                                        <span class="sr-only">Price</span>
                                        <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
                        </div>
                        <div class="rebuy-product-options" v-if="showVariantSelect(product)">
                            <select
                                :id="id + '-' + 'select' + '-' + product_index"
                                :class="{ hide : settings.view_options.variant_selector == 'buttons' }"
                                class="rebuy-select"
                                v-bind:aria-label="'variant of ' + product.title"
                                v-model="product.selected_variant_id"
                                v-on:change="selectVariant(product)">
                                <option
                                    v-for="variant in product.variants"
                                    class="rebuy-product-options__option"
                                    :class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
                                    v-bind:value="variant.id"
                                    :disabled="!variantAvailable(variant)"
                                    v-html="formatVariantOptionTitle(variant)">
                                </option>
                            </select>

                            <div
                                class="rebuy-product-options__button-swatches-container"
                                :class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
                                >
                                <div
                                    v-for="option in product.options"
                                    :key="'option-' + product.id + '-' + option.name"
                                    class="rebuy-product-options__button-swatches rebuy-size-swatches"
                                    >
                                    <div
                                        v-for="(value, value_index) in filterOOSOptions(option, product)"
                                        :key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
                                        >
                                        <div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
                                            <input
                                                :name="id + '-color-' + product_index"
                                                :id="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                                :checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
                                                :value="value"
                                                type="radio"
                                                class="rebuy-color-input hide"
                                                v-on:change="selectVariantByOption(product, option.name, value)"
                                                :disabled="isDisabledOptionValue(product, option.name, value)"
                                            />

                                            <label
                                                :for="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                                :style="getMerchantThemeColorAssetStyle(value)"
                                                :title="value"
                                                class="rebuy-color-label"
                                                :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                            >
                                            </label>
                                        </div>

                                        <div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
                                            <input
                                                :name="id + '-' + option.name + '-' + product_index"
                                                :id="id + '-' + option.name + '-' + product_index + '-' + value"
                                                :checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
                                                :value="value"
                                                type="radio"
                                                class="rebuy-size-input hide"
                                                v-on:change="selectVariantByOption(product, option.name, value)"
                                                :disabled="isDisabledOptionValue(product, option.name, value)"
                                            />

                                            <label
                                                :for="id + '-' + option.name + '-' + product_index + '-' + value"
                                                class="rebuy-size-label"
                                                :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                            >
                                                {{ value }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</script>
```

## Product Add Ons

```html title="Last Updated: October 21, 2025"
<script id="rebuy-product-addon-template" type="text/template">
<div class="rebuy-widget"
    v-cloak
    v-on:click="stopPropagation($event)"
    v-bind:id="'rebuy-widget-' + id"
    v-bind:class="['widget-type-' + config.type.replace('_','-'), products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">

    <div class="rebuy-widget-container">
        <div class="rebuy-widget-content">
            <div class="rebuy-timer" v-if="hasTimer()">
                <p class="rebuy-timer-title" v-if="config.language.timer_title">
                    <span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
                </p>
            </div>

            <h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>

            <h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>

            <div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>

            <div class="rebuy-addon">

                <div class="rebuy-addon__items">

                    <div class="rebuy-addon__item" v-for="(product, product_index) in products">

                        <div class="rebuy-addon__item-checkbox">
                            <label class="rebuy-checkbox-label">
                                <input
                                    class="checkbox-input rebuy-checkbox"
                                    v-model="product.selected"
                                    type="checkbox" />
                            </label>
                        </div>

                        <div class="rebuy-addon__item-image" v-on:click="toggleProductSelect(product)" v-bind:style="imageStyles">
                            <img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
                        </div>

                        <div class="rebuy-addon__item-info">
                            <div class="rebuy-addon__item-product-title rebuy-product-title" v-on:click="toggleProductSelect(product)" v-html="product.title" v-bind:alt="'View ' + product.title"></div>
                            <div
                                class="rebuy-product-vendor-container"
                                v-if="showProductVendor(product.vendor)"
                            >
                                <a
                                    class="rebuy-product-vendor"
                                    v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
                                    v-html="product.vendor"
                                    v-bind:href="vendorURL(product.vendor)"
                                    v-bind:aria-label="'View ' + product.vendor + ' products'"
                                    rel="nofollow"
                                ></a>
                            </div>
                            <div class="rebuy-addon__item-variant-title rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
                            <div class="rebuy-addon__item-product-review rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
                                <span class="rebuy-star-rating">
                                    <span
                                        v-if="product.reviews.star_rating"
                                        class="rebuy-star-rating-value sr-only"
                                        v-html="product.reviews.star_rating + ' stars out of 5 stars'"
                                    >
                                    </span>
                                    <span class="rebuy-star-rating-background"></span>
                                    <span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
                                </span>
                                <span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
                            </div>
                            <div class="rebuy-addon__item-product-price rebuy-product-price">
                                <div v-if="variantOnSale(product, product.selected_variant)">
                                    <span class="rebuy-money sale">
                                        <span class="sr-only">Sale price</span>
                                        <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                    </span>
                                    <span class="rebuy-money compare-at">
                                        <span class="sr-only">Original price</span>
                                        <span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                                    </span>
                                </div>
                                <div v-if="!(variantOnSale(product, product.selected_variant))">
                                    <span class="rebuy-money">
                                        <span class="sr-only">Price</span>
                                        <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                    </span>
                                </div>
                            </div>

                            <div class="rebuy-addon__item-product-options rebuy-product-options" v-if="showVariantSelect(product)">
                                <select
                                    :id="id + '-' + 'select' + '-' + product_index"
                                    :class="{ hide : settings.view_options.variant_selector == 'buttons' }"
                                    class="rebuy-select"
                                    v-bind:aria-label="'variant of ' + product.title"
                                    v-model="product.selected_variant_id"
                                    v-on:change="selectVariant(product)">
                                    <option
                                        v-for="variant in product.variants"
                                        class="rebuy-product-options__option"
                                        :class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
                                        v-bind:value="variant.id"
                                        :disabled="!variantAvailable(variant)"
                                        v-html="formatVariantOptionTitle(variant)">
                                    </option>
                                </select>

                                <div
                                    class="rebuy-product-options__button-swatches-container"
                                    :class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
                                    >
                                    <div
                                        v-for="option in product.options"
                                        :key="'option-' + product.id + '-' + option.name"
                                        class="rebuy-product-options__button-swatches rebuy-size-swatches"
                                    >
                                        <div
                                            v-for="(value, value_index) in filterOOSOptions(option, product)"
                                            :key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
                                        >
                                            <div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
                                                <input
                                                    :name="id + '-color-' + product_index"
                                                    :id="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                                    :checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
                                                    :value="value"
                                                    type="radio"
                                                    class="rebuy-color-input hide"
                                                    v-on:change="selectVariantByOption(product, option.name, value)"
                                                    :disabled="isDisabledOptionValue(product, option.name, value)"
                                                />

                                                <label
                                                    :for="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                                    :style="getMerchantThemeColorAssetStyle(value)"
                                                    :title="value"
                                                    class="rebuy-color-label"
                                                    :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                                >
                                                </label>
                                            </div>

                                            <div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
                                                <input
                                                    :name="id + '-' + option.name + '-' + product_index"
                                                    :id="id + '-' + option.name + '-' + product_index + '-' + value"
                                                    :checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
                                                    :value="value"
                                                    type="radio"
                                                    class="rebuy-size-input hide"
                                                    v-on:change="selectVariantByOption(product, option.name, value)"
                                                    :disabled="isDisabledOptionValue(product, option.name, value)"
                                                />

                                                <label
                                                    :for="id + '-' + option.name + '-' + product_index + '-' + value"
                                                    class="rebuy-size-label"
                                                    :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                                >
                                                    {{ value }}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="rebuy-addon__item-product-description rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
                            <div class="rebuy-addon__item-learn-more" v-if="hasLearnMore()">
                                <a
                                    class="rebuy-addon__item-learn-more-link"
                                    v-bind:href="learnMoreURL(product)"
                                    v-on:click="learnMore(product);"
                                    v-html="config.language.learn_more_label"
                                    rel="nofollow"
                                ></a>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="rebuy-addon__subtotal" v-if="subtotal() > 0">
                    <strong class="rebuy-addon__subtotal-label" v-html="config.language.total_price_label"></strong>
                    <div class="rebuy-addon__subtotal-value" v-if="bundleOnSale()">
                        <span class="rebuy-money sale">
                            <span class="sr-only">Sale price</span>
                            <span v-html="formatMoney(subtotal())"></span>
                        </span>
                        <span class="rebuy-money compare-at">
                            <span class="sr-only">Original price</span>
                            <span v-html="formatMoney(compareAtSubtotal())"></span>
                        </span>
                    </div>
                    <div class="rebuy-addon__subtotal-value" v-if="!(bundleOnSale())">
                        <span class="rebuy-money">
                            <span class="sr-only">Price</span>
                            <span v-html="formatMoney(subtotal())"></span>
                        </span>
                    </div>
                </div>

            </div>

        </div>
    </div>

</div>
</script>
```

## Shopify Thank You Page

!!! note "Thank You Page Template Only"
    This is not the Shopify Checkout Page extension. But, this is the Shopify Thank You Page widget. The Shopify Checkout Page extension does not have the ability to use a custom template as Shopify has limited the amount of customization for that feature at the moment.

```html title="Last Updated: October 21, 2025"
<script id="rebuy-thank-you-template" type="text/template">
<div class="rebuy-widget"
    v-cloak
    v-on:click="stopPropagation($event)"
    v-bind:id="'rebuy-widget-' + id"
    v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">

    <div
        class="rebuy-widget-container"
        v-cloak
        v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
        v-on:click.self="hide()">

        <div class="rebuy-widget-content">
            <div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
                <rebuy-icon name="x"></rebuy-icon>
            </div>

            <div class="rebuy-timer" v-if="hasTimer()">
                <p class="rebuy-timer-title" v-if="config.language.timer_title">
                    <span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
                </p>
            </div>

            <h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>

            <h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>

            <div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>

            <div class="rebuy-product-grid" v-bind:class="layoutClasses">

                <div
                class="rebuy-product-block"
                v-for="(product, product_index) in products"
                v-bind:class="[
                    product.handle, 'product-id-' + product.id,
                    cartHasProduct(product) ? 'cart-has-item' : '',
                    productTagClasses(product),
                    hasSplideCarousel ? 'splide__slide' : '',
                ]">
                    <div class="rebuy-product-media">
                        <a
                            class="rebuy-product-image"
                            v-bind:href="learnMoreURL(product)"
                            v-bind:style="imageStyles"
                            v-on:click="learnMore(product);"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                            rel="nofollow"
                        >
                            <img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
                        </a>
                    </div>
                    <div class="rebuy-product-info">
                        <h5
                            class="rebuy-product-title"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']">
                            <a
                                v-bind:href="learnMoreURL(product)"
                                class="rebuy-product-title-link"
                                v-on:click="learnMore(product, $event);"
                                v-html="product.title"
                                v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                                v-bind:aria-label="'View ' + product.title"
                                rel="nofollow"
                            ></a>
                        </h5>
                        <div
                            class="rebuy-product-vendor-container"
                            v-if="showProductVendor(product.vendor)"
                        >
                            <a
                                class="rebuy-product-vendor"
                                v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
                                v-html="product.vendor"
                                v-bind:href="vendorURL(product.vendor)"
                                v-bind:aria-label="'View ' + product.vendor + ' products'"
                                rel="nofollow"
                            ></a>
                        </div>
                        <div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
                        <div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
                            <span class="rebuy-star-rating">
                                <span
                                    v-if="product.reviews.star_rating"
                                    class="rebuy-star-rating-value sr-only"
                                    v-html="product.reviews.star_rating + ' stars out of 5 stars'"
                                >
                                </span>
                                <span class="rebuy-star-rating-background"></span>
                                <span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
                            </span>
                            <span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
                        </div>
                        <div class="rebuy-product-price">
                            <div v-if="variantOnSale(product, product.selected_variant)">
                                <div>
                                    <span class="rebuy-money sale">
                                        <span class="sr-only">Sale price</span>
                                        <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                    </span>

                                    <span class="rebuy-money compare-at">
                                        <span class="sr-only">Original price</span>
                                        <span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                                    </span>
                                </div>

                                <div v-if="shouldShowSavingAmount()">
                                    <span v-if="shouldRenderSavingAmount(product)" class="rebuy-money sale">
                                        <span class="sr-only">Saving Amount</span>
                                        <span v-html="savingAmountLabel(product)"></span>
                                    </span>
                                </div>
                            </div>
                            <div v-if="!(variantOnSale(product, product.selected_variant))">
                                <span class="rebuy-money">
                                    <span class="sr-only">Price</span>
                                    <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                </span>
                            </div>
                        </div>
                        <div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
                    </div>

                    <div class="rebuy-product-options" v-if="showVariantSelect(product)">
                        <select
                            :id="id + '-' + 'select' + '-' + product_index"
                            :class="{ hide : settings.view_options.variant_selector == 'buttons' }"
                            class="rebuy-select"
                            v-bind:aria-label="'variant of ' + product.title"
                            v-model="product.selected_variant_id"
                            v-on:change="selectVariant(product)">
                            <option
                                v-for="variant in product.variants"
                                class="rebuy-product-options__option"
                                :class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
                                v-bind:value="variant.id"
                                :disabled="!variantAvailable(variant)"
                                v-html="formatVariantOptionTitle(variant)">
                            </option>
                        </select>

                        <div
                            class="rebuy-product-options__button-swatches-container"
                            :class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
                            >
                            <div
                                v-for="option in product.options"
                                :key="'option-' + product.id + '-' + option.name"
                                class="rebuy-product-options__button-swatches rebuy-size-swatches"
                                >
                                <div
                                    v-for="(value, value_index) in filterOOSOptions(option, product)"
                                    :key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
                                    >
                                    <div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
                                        <input
                                            :name="id + '-color-' + product_index"
                                            :id="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                            :checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
                                            :value="value"
                                            type="radio"
                                            class="rebuy-color-input hide"
                                            v-on:change="selectVariantByOption(product, option.name, value)"
                                            :disabled="isDisabledOptionValue(product, option.name, value)"
                                        />

                                        <label
                                            :for="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                            :style="getMerchantThemeColorAssetStyle(value)"
                                            :title="value"
                                            class="rebuy-color-label"
                                            :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                        >
                                        </label>
                                    </div>

                                    <div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
                                        <input
                                            :name="id + '-' + option.name + '-' + product_index"
                                            :id="id + '-' + option.name + '-' + product_index + '-' + value"
                                            :checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
                                            :value="value"
                                            type="radio"
                                            class="rebuy-size-input hide"
                                            v-on:change="selectVariantByOption(product, option.name, value)"
                                            :disabled="isDisabledOptionValue(product, option.name, value)"
                                        />

                                        <label
                                            :for="id + '-' + option.name + '-' + product_index + '-' + value"
                                            class="rebuy-size-label"
                                            :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                        >
                                            {{ value }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rebuy-product-actions">

                        <div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
                            <label class="rebuy-checkbox-label">
                                <input
                                    class="checkbox-input rebuy-checkbox"
                                    v-model="product.subscription"
                                    v-on:change="toggleSubscription(product)"
                                    type="checkbox"
                                    :aria-label="upgradeToSubscriptionAriaLabel(product)"
                                />
                                <span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
                            </label>
                        </div>

                        <div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
                            <select
                                class="rebuy-select"
                                aria-label="subscription frequency"
                                v-model="product.subscription_frequency"
                                v-on:change="updateSubscriptionFrequency(product)">
                                <option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
                            </select>
                        </div>

                        <div class="product-quantity" v-if="hasQuantityInputEnabled()">
                            <div class="rebuy-select-wrapper">
                                <label class="rebuy-label">Quantity</label>
                                <select
                                    class="rebuy-select"
                                    aria-label="product quantity"
                                    v-model="product.quantity">
                                    <option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
                                </select>
                            </div>
                        </div>

                        <button
                            class="rebuy-button"
                            v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                            v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                            v-bind:alt="'Add ' + product.title + ' to Cart'"
                            v-on:click="addToCart(product)"
                            type="button">
                                <span v-html="buttonLabel(product)"></span>
                        </button>

                        <div class="rebuy-modal-actions" v-if="showContinueButton()">
                            <button
                                class="rebuy-button decline"
                                v-on:click="declineOffer(product)"
                                type="button">
                                    <span v-html="declineLabel(product)"></span>
                            </button>
                        </div>

                    </div>
                </div>

            </div>

            <div class="powered-by-rebuy">
                <a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
                    Powered by Rebuy
                </a>
            </div>

        </div>

    </div>
</div>
</script>
```

## Switch to Subscription

```html title="Last Updated: October 21, 2025"
<script id="rebuy-switch-to-subscription-template" type="text/template">
<div class="rebuy-widget"
    v-cloak
    v-on:click="stopPropagation($event)"
    v-bind:id="'rebuy-widget-' + id"
    v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">

    <div
        class="rebuy-widget-container"
        v-cloak
        v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
        v-on:click.self="hide()">

        <div class="rebuy-widget-content">
            <div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
                <rebuy-icon name="x"></rebuy-icon>
            </div>

            <div class="rebuy-timer" v-if="hasTimer()">
                <p class="rebuy-timer-title" v-if="config.language.timer_title">
                    <span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
                </p>
            </div>

            <h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>

            <h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>

            <div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>

            <div class="rebuy-product-grid" v-bind:class="layoutClasses">

                <div
                class="rebuy-product-block"
                v-for="product in products"
                v-bind:class="[
                    product.handle, 'product-id-' + product.id,
                    cartHasProduct(product) ? 'cart-has-item' : '',
                    productTagClasses(product),
                    hasSplideCarousel ? 'splide__slide' : '',
                ]">
                    <div class="rebuy-product-media">
                        <a
                            class="rebuy-product-image"
                            v-bind:href="learnMoreURL(product)"
                            v-bind:style="imageStyles"
                            v-on:click="learnMore(product);"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                            rel="nofollow"
                        >
                            <img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
                        </a>
                    </div>
                    <div class="rebuy-product-info">
                        <h5
                            class="rebuy-product-title"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                            >
                            <a
                                v-bind:href="learnMoreURL(product)"
                                class="rebuy-product-title-link"
                                v-on:click="learnMore(product, $event);"
                                v-html="product.title"
                                v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                                v-bind:aria-label="'View ' + product.title"
                                rel="nofollow"
                            ></a>
                        </h5>
                        <div
                            class="rebuy-product-vendor-container"
                            v-if="showProductVendor(product.vendor)"
                        >
                            <a
                                class="rebuy-product-vendor"
                                v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
                                v-html="product.vendor"
                                v-bind:href="vendorURL(product.vendor)"
                                v-bind:aria-label="'View ' + product.vendor + ' products'"
                                rel="nofollow"
                            ></a>
                        </div>
                        <div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
                        <div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
                            <span class="rebuy-star-rating">
                                <span
                                    v-if="product.reviews.star_rating"
                                    class="rebuy-star-rating-value sr-only"
                                    v-html="product.reviews.star_rating + ' stars out of 5 stars'"
                                >
                                </span>
                                <span class="rebuy-star-rating-background"></span>
                                <span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
                            </span>
                            <span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
                        </div>
                        <div class="rebuy-product-price">
                            <div v-if="variantOnSale(product, product.selected_variant)">
                                <span class="rebuy-money sale">
                                    <span class="sr-only">Sale price</span>
                                    <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                </span>
                                <span class="rebuy-money compare-at">
                                    <span class="sr-only">Original price</span>
                                    <span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                                </span>
                            </div>
                            <div v-if="!(variantOnSale(product, product.selected_variant))">
                                <span class="rebuy-money">
                                    <span class="sr-only">Price</span>
                                    <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                </span>
                            </div>
                        </div>
                        <div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
                    </div>

                    <div class="rebuy-product-actions">

                        <div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
                            <label class="rebuy-checkbox-label">
                                <input
                                    class="checkbox-input rebuy-checkbox"
                                    v-model="product.subscription"
                                    v-on:change="toggleSubscription(product)"
                                    type="checkbox"
                                    :aria-label="upgradeToSubscriptionAriaLabel(product)"
                                />
                                <span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
                            </label>
                        </div>

                        <div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
                            <select
                                class="rebuy-select"
                                aria-label="subscription frequency"
                                v-model="product.subscription_frequency"
                                v-on:change="updateSubscriptionFrequency(product)">
                                <option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
                            </select>
                        </div>

                        <button
                            class="rebuy-button"
                            v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                            v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                            v-bind:alt="'Add ' + product.title + ' to Cart'"
                            v-on:click="addUpsellToCart(product)"
                            type="button">
                                <span v-html="buttonLabel(product)"></span>
                        </button>

                        <button
                            class="rebuy-button decline"
                            v-on:click="declineOffer(product)"
                            type="button">
                                <span v-html="declineLabel(product)"></span>
                        </button>

                    </div>
                </div>

            </div>

            <div class="powered-by-rebuy">
                <a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
                    Powered by Rebuy
                </a>
            </div>

        </div>

    </div>
</div>
</script>
```

## Recharge Checkout

```html title="Last Updated: August 27, 2024"
<script id="rebuy-recharge-checkout-template" type="text/template">
  <div class="rebuy-widget checkout-promotion"
      v-cloak
      v-on:click="stopPropagation($event)"
      v-bind:id="'rebuy-widget-' + id"
      v-bind:class="[products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
      <div
          class="checkout-promotion-wrapper"
          v-cloak
          v-bind:class="[visible ? 'is-visible' : 'is-hidden']">
          <div class="checkout-promotion-header" v-if="config.language.title || config.language.subtitle || config.language.description">
              <div class="rebuy-timer" v-if="hasTimer()">
                  <h5 class="rebuy-timer-title" v-if="config.language.timer_title">
                      <span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
                  </h5>
              </div>

              <h2 v-if="config.language.title" class="promo-title" v-html="config.language.title"></h2>
              <h3 v-if="config.language.subtitle" class="promo-subtitle" v-html="config.language.subtitle"></h3>
              <div v-if="config.language.description" class="promo-description" v-html="config.language.description"></div>
          </div>

          <div class="checkout-promotion-body">
              <div
                  class="checkout-promotion-product line-item"
                  v-for="product in products"
                  v-bind:class="[product.handle, 'product-id-' + product.id, rechargeCheckoutHasProduct(product) ? 'has-product' : '', productTagClasses(product)]">
                  <div class="promotion-image">
                      <img
                          v-bind:src="itemImage(product, product.selected_variant, '160x160')"
                          v-bind:alt="product.title">
                  </div>
                  <div class="promotion-info">
                      <h4 class="product-title" v-html="product.title"></h4>
                      <div class="variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
                      <div class="variant-price">
                          <div v-if="variantOnSale(product, product.selected_variant)">
                              <span class="rebuy-money sale">
                                  <span class="sr-only">Sale price</span>
                                  <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                              </span>
                              <span class="rebuy-money compare-at">
                                  <span class="sr-only">Original price</span>
                                  <span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                              </span>
                          </div>
                          <div v-if="!(variantOnSale(product, product.selected_variant))">
                              <span class="rebuy-money">
                                  <span class="sr-only">Price</span>
                                  <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                              </span>
                          </div>
                      </div>
                      <div class="product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
                  </div>
                  <div class="promotion-actions">

                      <div class="product-quantity" v-if="hasQuantityInputEnabled()">
                          <div class="rebuy-select-wrapper">
                              <label class="rebuy-label">Quantity</label>
                              <select
                                  class="rebuy-select"
                                  aria-label="product quantity"
                                  v-model="product.quantity">
                                  <option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
                              </select>
                          </div>
                      </div>

                      <button
                          class="rebuy-button"
                          v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                          v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                          v-on:click="addToCart(product)"
                          type="button">
                              <span v-html="buttonLabel(product)"></span>
                      </button>
                  </div>
                  <div class="promotion-options" v-if="showVariantSelect(product)">
                      <select
                          class="rebuy-select"
                          v-bind:aria-label="'variant of ' + product.title"
                          v-model="product.selected_variant_id"
                          v-on:change="selectVariant(product)">
                          <option v-for="variant in product.variants" v-bind:value="variant.id">{{ variant.title }}</option>
                      </select>
                  </div>

                  <div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
                      <select
                          class="rebuy-select"
                          aria-label="subscription frequency"
                          v-model="product.subscription_frequency"
                          v-on:change="updateSubscriptionFrequency(product)">
                          <option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
                      </select>
                  </div>

                  <div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
                      <label class="rebuy-checkbox-label">
                          <input
                              class="checkbox-input rebuy-checkbox"
                              v-model="product.subscription"
                              v-on:change="toggleSubscription(product)"
                              type="checkbox" />
                          <span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
                      </label>
                  </div>


              </div>
          </div>
      </div>
  </div>
</script>
```

## Pre Purchase

```html title="Last Updated: October 30, 2025"
<script id="rebuy-pre-purchase-template" type="text/template">
<div class="rebuy-widget"
    v-cloak
    v-on:click="stopPropagation($event)"
    v-bind:id="'rebuy-widget-' + id"
    v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden']"
>
    <div
        class="rebuy-widget-container"
        v-cloak
        v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
        v-on:click.self="declinePrepurchaseOffer()">
        <div class="rebuy-widget-content">
            <div class="rebuy-modal-close" v-on:click="declinePrepurchaseOffer()" aria-label="close modal">
                <rebuy-icon name="x"></rebuy-icon>
            </div>
            <div class="rebuy-timer" v-if="hasTimer()">
                <p class="rebuy-timer-title" v-if="config.language.timer_title">
                    <span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
                </p>
            </div>

            <h3 class="super-title" v-if="config.language.super_title" v-html="config.language.super_title"></h3>
            <h4 class="primary-title" v-if="config.language.title" v-html="config.language.title"></h4>
            <div class="description" v-if="config.language.description" v-html="config.language.description"></div>

            <div class="rebuy-product-grid rebuy-pre-purchase-block" v-bind:class="layoutClasses">
                <div
                    class="rebuy-product-block"
                    v-for="(product, product_index) in products"
                    v-bind:class="[
                        product.handle,
                        'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '',
                        productTagClasses(product),
                        hasSplideCarousel ? 'splide__slide' : '',
                    ]">
                    <div class="rebuy-product-media">
                        <a
                            class="rebuy-product-image"
                            v-bind:href="learnMoreURL(product)"
                            v-bind:style="imageStyles"
                            v-on:click="learnMore(product);"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                            rel="nofollow"
                        >
                            <img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
                        </a>
                    </div>
                    <div class="rebuy-product-info">
                        <h5
                            class="rebuy-product-title"
                            v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                            >
                            <a
                                v-bind:href="learnMoreURL(product)"
                                class="rebuy-product-title-link"
                                v-on:click="learnMore(product, $event);"
                                v-html="product.title"
                                v-bind:class="[hasLearnMore() ? 'clickable' : '']"
                                v-bind:aria-label="'View ' + product.title"
                                rel="nofollow"
                            ></a>
                        </h5>
                        <div
                            class="rebuy-product-vendor-container"
                            v-if="showProductVendor(product.vendor)"
                        >
                            <a
                                class="rebuy-product-vendor"
                                v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
                                v-html="product.vendor"
                                v-bind:href="vendorURL(product.vendor)"
                                v-bind:aria-label="'View ' + product.vendor + ' products'"
                                rel="nofollow"
                            ></a>
                        </div>
                        <div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
                        <div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
                            <span class="rebuy-star-rating">
                                <span
                                    v-if="product.reviews.star_rating"
                                    class="rebuy-star-rating-value sr-only"
                                    v-html="product.reviews.star_rating + ' stars out of 5 stars'"
                                >
                                </span>
                                <span class="rebuy-star-rating-background"></span>
                                <span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
                            </span>
                            <span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
                        </div>

                        <div class="rebuy-product-price">
                            <div v-if="variantOnSale(product, product.selected_variant)">
                                <span class="rebuy-money sale">
                                    <span class="sr-only">Sale price</span>
                                    <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                </span>
                                <span class="rebuy-money compare-at">
                                    <span class="sr-only">Original price</span>
                                    <span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                                </span>
                            </div>

                            <div v-if="!(variantOnSale(product, product.selected_variant))">
                                <span class="rebuy-money">
                                    <span class="sr-only">Price</span>
                                    <span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                                </span>
                            </div>
                        </div>

                        <div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
                    </div>

                    <div class="rebuy-product-options" v-if="showVariantSelect(product)">
                        <select
                            title="Select product variant"
                            :id="id + '-' + 'select' + '-' + product_index"
                            :class="{ hide : config.view_options.variant_selector === 'buttons' }"
                            class="rebuy-select"
                            :aria-label="'variant of ' + product.title"
                            v-model="product.selected_variant_id"
                            :disabled="product.status == 'added'"
                            v-on:change="selectVariant(product)"
                        >
                            <option
                                v-for="variant in product.variants"
                                class="rebuy-product-options__option"
                                :class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
                                :value="variant.id"
                                :disabled="!variantAvailable(variant)"
                                v-html="formatVariantOptionTitle(variant)">
                            </option>
                        </select>

                        <div
                            class="rebuy-product-options__button-swatches-container"
                            :class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
                            >
                            <div
                                v-for="option in product.options"
                                :key="'option-' + product.id + '-' + option.name"
                                class="rebuy-product-options__button-swatches rebuy-size-swatches"
                                >
                                <div
                                    v-for="(value, value_index) in filterOOSOptions(option, product)"
                                    :key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
                                    >
                                    <div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
                                        <input
                                            :name="id + '-color-' + product_index"
                                            :id="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                            :checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
                                            :value="value"
                                            type="radio"
                                            class="rebuy-color-input hide"
                                            v-on:change="selectVariantByOption(product, option.name, value)"
                                            :disabled="isDisabledOptionValue(product, option.name, value)"
                                        />

                                        <label
                                            :for="id + '-color-' + product_index + '-' + value + '-' + value_index"
                                            :style="getMerchantThemeColorAssetStyle(value)"
                                            :title="value"
                                            class="rebuy-color-label"
                                            :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                        >
                                        </label>
                                    </div>

                                    <div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
                                        <input
                                            :name="id + '-' + option.name + '-' + product_index"
                                            :id="id + '-' + option.name + '-' + product_index + '-' + value"
                                            :checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
                                            :value="value"
                                            type="radio"
                                            class="rebuy-size-input hide"
                                            v-on:change="selectVariantByOption(product, option.name, value)"
                                            :disabled="isDisabledOptionValue(product, option.name, value)"
                                        />

                                        <label
                                            :for="id + '-' + option.name + '-' + product_index + '-' + value"
                                            class="rebuy-size-label"
                                            :class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
                                        >
                                            {{ value }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rebuy-product-actions">
                        <div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
                            <label class="rebuy-checkbox-label">
                                <input
                                    class="checkbox-input rebuy-checkbox"
                                    v-model="product.subscription"
                                    v-on:change="toggleSubscription(product)"
                                    type="checkbox"
                                    :aria-label="upgradeToSubscriptionAriaLabel(product)"
                                />
                                <span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
                            </label>
                        </div>

                        <div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
                            <select
                                class="rebuy-select"
                                aria-label="subscription frequency"
                                v-model="product.subscription_frequency"
                                v-bind:disabled="product.status == 'added'"
                                v-on:change="updateSubscriptionFrequency(product)">
                                <option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequency }} {{ product.subscription_interval }}</option>
                            </select>
                        </div>
                        <div class="product-quantity" v-if="hasQuantityInputEnabled()">
                            <div class="rebuy-select-wrapper">
                                <label class="rebuy-label">Quantity</label>

                                <select
                                    class="rebuy-select"
                                    aria-label="product quantity"
                                    v-bind:disabled="product.status == 'added'"
                                    v-model="product.quantity">
                                    <option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="rebuy-button-container">
                            <button
                                v-if="product.status != 'added'"
                                class="rebuy-button"
                                v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                                v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                                v-on:click="addToCart(product)"
                                type="button">
                                    <span v-html="buttonLabel(product)"></span>
                            </button>

                            <div class="rebuy-button--selected" v-if="product.status == 'added'" v-on:click="removeFromCart(product)">
                                <button class="rebuy-button dark rebuy-button__remove rebuy-button__upsell-add">
                                    <span v-html="buttonLabel(product)"></span>
                                </button>
                                <button class="rebuy-button dark rebuy-button__text rebuy-button__upsell-remove" v-bind:aria-label="'Remove ' + product.title">
                                    <span>
                                        <rebuy-icon name="x"></rebuy-icon>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom-container">
                <div class="rebuy-button-actions rebuy-pre-purchase-actions">
                    <button
                        v-if="!hasAddedPrepurchase()"
                        class="rebuy-button rebuy-button--mlr-10 decline"
                        v-on:click="declinePrepurchaseOffer()">
                        <span v-html="config.language.decline"></span>
                    </button>
                    <button
                        class="rebuy-button rebuy-button--mlr-10 outline"
                        v-on:click="checkout()">
                        <span v-html="config.language.checkout"></span>
                    </button>
                </div>

                <div class="powered-by-rebuy">
                    <a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
                        Powered by Rebuy
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</script>
```

## Gift With Purchase

```html title="Last Updated: August 27, 2024"
<script id="rebuy-gift-with-purchase-template" type="text/template">
  <div class="rebuy-widget"
      v-cloak
      v-on:click="stopPropagation($event)"
      v-bind:id="'rebuy-widget-' + id">
  </div>
</script>
```

---

# Custom Template (53.5KB)

Source: https://developers.rebuyengine.com/reference/bundle-builder-custom-template.md

## Overview

This allows developers the ability to add custom functionality that is currently not achievable by the bundle builder widget settings. These templates can use any globally accessible functions. Developers can add additional Vue.js/HTML to these templates as needed. As these templates are written in Vue.js they accept and Vue.js attributes such as v-if for conditional rendering.

## Setting up Custom Templates

There are a couple of ways these templates can be used. They can target all widgets of that widget type or, they can target a specific widget if you do not want the custom work to be applied to all widgets of that specific widget type.

Typically developers will create a new snippet named something like "rebuy-templates.liquid" and paste the contents of the code in that file. Then render that snippet in the associated file or in the theme.liquid file if they want the template to be globally accessible.

## Bundle Builder Default Template

```html title="Last Updated: January 27, 2026"
<script id="rebuy-bundle-builder-template" type="text/template">
    <div
        class="rebuy-widget rebuy-bundle-builder"
        v-bind:id="'rebuy-widget-' + id"
    >
        <div
            class="rebuy-bundle-builder__main rebuy-bundle-builder-layout"
            v-bind:class="['rebuy-bundle-builder__layout--' + config.layout.type]"
            ref="stepTabsWrapper"
            >

            <!-- Page Header Section -->
            <div v-if="hasBundleHeaderSection()" class="rebuy-bundle-builder__main-header">
                <h1
                    v-if="getBundleConfigLabel('super_title')"
                    class="rebuy-bundle-builder__main-header-super-title"
                    v-html="getBundleConfigLabel('super_title')"
                >
                </h1>

                <h2
                    v-if="getBundleConfigLabel('title')"
                    class="rebuy-bundle-builder__main-header-title"
                    v-html="getBundleConfigLabel('title')"
                >
                </h2>

                <p
                    v-if="getBundleConfigLabel('description')"
                    class="rebuy-bundle-builder__main-header-description"
                    v-html="getBundleConfigLabel('description')"
                >
                </p>
            </div>
            <!-- /Page Header Section -->

            <!-- Sorting Section -->
            <div v-if="hasBundleBuilderSorting()" class="rebuy-bundle-builder__header-utility-container">
                <select
                    aria-label="Sort By"
                    name="selected_sorting_option"
                    v-model="selected_sorting_option"
                    v-on:change="handleBundleBuilderSortingOptionChange"
                    class="rebuy-bundle-builder__header-utility-sorting rebuy-select"
                >
                    <option disabled value="">Sort By</option>
                    <option v-for="option in sorting_options" :value="option.value" :key="option.value">{{ option.label }}</option>
                </select>
            </div>
            <!-- /Sorting Section -->

            <!-- Page Body Section -->
            <div class="rebuy-bundle-builder__main-body">
                <!-- Steps Section -->
                <div class="rebuy-bundle-builder__steps-container" role="list">
                    <!-- Step Tabs Section -->
                    <div v-if="isBundleBuilderTabLayout()" class="rebuy-bundle-builder__step-tabs rebuy-bundle-builder__step-tabs--sticky">
                        <div class="rebuy-bundle-builder__step-tabs-wrapper">
                            <div
                                v-for="(step, step_index) in config.steps"
                                class="rebuy-bundle-builder__step-tab"
                                v-bind:key="'rebuy-bundle-builder__step-tab-' + step_index"
                                v-bind:class="['rebuy-bundle-builder__step-tab-' + step_index, active_step_index === step_index ? 'active' : '']"
                                v-bind:aria-label="'Select step tab: ' + step.title"
                                role="button"
                                tabindex="0"
                                v-on:click="handleSelectingBundleStep(step_index)"
                                v-on:keydown.enter.space="handleSelectingBundleStep(step_index)"
                            >
                                <h3
                                    v-if="step.title"
                                    v-html="step.title"
                                    class="rebuy-bundle-builder__step-tab-title">
                                </h3>

                                <p
                                    v-if="step.description"
                                    v-html="step.description"
                                    class="rebuy-bundle-builder__step-tab-description">
                                </p>
                            </div>
                        </div>

                        <button
                            v-on:click="scrollToTargetBundleElement('main', id)"
                            class="rebuy-bundle-builder__scroll-to-button"
                            aria-label="scroll to top"
                            >
                            <rebuy-icon name="chevron-up"></rebuy-icon>
                            <span>Top</span>
                        </button>
                    </div>
                    <!-- /Step Tabs Section -->

                    <!-- Step Section -->
                    <div
                        v-for="(step, step_index) in config.steps"
                        class="rebuy-bundle-builder__step-container"
                        v-bind:key="'rebuy-bundle-builder__step-container-' + step_index"
                        v-bind:class="[
                            'rebuy-bundle-builder__step-container-' + step_index,
                            step.unlocked ? '' : 'locked',
                            isBundleBuilderCollapsibleLayout() ? 'rebuy-bundle-builder__step-container--collapsible' : '',
                            !shouldRenderBundleStep(step_index) ? 'rebuy-bundle-builder__step-container--not-active' : 'rebuy-bundle-builder__step-container--active'
                        ]"
                        aria-label="step"
                        role="listitem"
                        >

                        <!-- Step Header Section -->
                        <div v-if="!isBundleBuilderTabLayout()" class="rebuy-bundle-builder__step-header">
                            <div class="rebuy-bundle-builder__step-header-copy-container">
                                <h3
                                    v-if="step.title"
                                    v-html="step.title"
                                    class="rebuy-bundle-builder__step-header-title">
                                </h3>

                                <p
                                    v-if="step.description"
                                    v-html="step.description"
                                    class="rebuy-bundle-builder__step-header-description">
                                </p>
                            </div>

                            <div class="rebuy-bundle-builder__step-header-actions">
                                <div v-if="isBundleBuilderCollapsibleLayout()">
                                    <button
                                        class="rebuy-bundle-builder__step-header-collapse-button"
                                        v-on:click="handleCollapsingBundleStep(step_index)"
                                        v-bind:aria-label="shouldRenderBundleStep(step_index) ? 'Collapse ' + step.title : 'Expand ' + step.title"
                                    >
                                        <rebuy-icon
                                            :name="shouldRenderBundleStep(step_index) ? 'minus' : 'plus'"
                                            class="rebuy-bundle-builder__step-header-collapse-button-icon">
                                        </rebuy-icon>
                                    </button>
                                </div>

                                <button
                                    v-if="!isBundleBuilderCollapsibleLayout()"
                                    v-on:click="scrollToTargetBundleElement('step', id, (step_index - (step_index === 0 ? 0 : 1)))"
                                    :class="[
                                        'rebuy-bundle-builder__scroll-to-button',
                                        step_index === 0 ? 'rebuy-bundle-builder__top-button' : 'rebuy-bundle-builder__prev-button',
                                        'rebuy-bundle-builder__step-button-' + step_index
                                    ]"
                                    aria-label="scroll to top"
                                    >
                                        <rebuy-icon name="chevron-up"></rebuy-icon>
                                        <span v-html="step_index === 0 ? 'Top' : 'Prev'"></span>
                                </button>
                            </div>
                        </div>
                        <!-- /Step Header Section -->

                        <!-- Step Body Section -->
                        <div
                            :role="hasBundleBuilderStepSplideCarousel(step) ? 'region' : 'list'"
                            :aria-roledescription="hasBundleBuilderStepSplideCarousel(step) ? 'carousel' : null"
                            :aria-label="hasBundleBuilderStepSplideCarousel(step) ? (step.title || 'Product carousel') : null"
                            class="rebuy-bundle-builder__step-body rebuy-product-grid start-column rebuy-product-grid-step-100"
                            :class="[getBundleBuilderLayoutClasses(step), 'rebuy-product-grid__step-' + step_index]"
                            >
                            <!-- Step Product Section -->
                            <div
                                v-for="(product, product_index) in step.products"
                                :class="[product.handle, 'product-id-' + product.id, productTagClasses(product), hasBundleBuilderStepSplideCarousel(step) ? 'splide__slide' : '']"
                                class="rebuy-product-block"
                                :aria-label="hasBundleBuilderStepSplideCarousel(step) ? (product.title || 'Product slide') : 'product'"
                                :aria-roledescription="hasBundleBuilderStepSplideCarousel(step) ? 'slide' : null"
                                :role="hasBundleBuilderStepSplideCarousel(step) ? 'group' : 'listitem'"
                                >
                                <div v-if="product.type !== 'placeholder'" class="rebuy-bundle-builder__step-product">
                                    <!-- Product Image Section -->
                                    <div class="rebuy-product-media">
                                        <a
                                            class="rebuy-product-image clickable"
                                            v-bind:href="learnMoreURL(product)"
                                            v-on:click="learnMore(product, $event);"
                                            rel="nofollow"
                                        >
                                            <!-- Preload second img in the background hack, so on hover browser can serve the cached image -->
                                            <img
                                                v-if="product.hover_image"
                                                class="rebuy-style__hidden-block"
                                                v-bind:src="sizeImage(product.hover_image.src, '400x400')"
                                                v-bind:alt="'View ' + product.title"
                                            />

                                            <img
                                                class="rebuy-style__hover-transition"
                                                v-bind:loading="product_index > 1 ? 'lazy' : 'eager'"
                                                v-bind:src="getBundleBuilderProductImage(product)"
                                                v-bind:alt="'View ' + product.title"
                                                v-on:mouseover="handleProductImageHover(product, true)"
                                                v-on:mouseleave="handleProductImageHover(product, false)"
                                            />
                                        </a>
                                    </div>
                                    <!-- /Product Image Section -->

                                    <!-- Product Info Section -->
                                    <div class="rebuy-product-info">
                                        <h5 class="rebuy-product-title clickable">
                                            <a
                                                class="rebuy-product-title clickable"
                                                v-bind:href="learnMoreURL(product)"
                                                v-on:click="learnMore(product, $event);"
                                                v-html="product.title"
                                                v-bind:aria-label="'View ' + product.title"
                                                rel="nofollow">
                                            </a>
                                        </h5>

                                        <div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>

                                        <div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
                                            <span class="rebuy-star-rating">
                                                <span
                                                    v-if="product.reviews.star_rating"
                                                    class="rebuy-star-rating-value sr-only"
                                                    v-html="product.reviews.star_rating + ' stars out of 5 stars'"
                                                >
                                                </span>
                                                <span class="rebuy-star-rating-background"></span>
                                                <span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
                                            </span>
                                            <span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
                                        </div>

                                        <div class="rebuy-product-price">
                                            <div v-if="bundleVariantOnSale(product, product.selected_variant)">
                                                <span class="rebuy-money sale">
                                                    <span class="sr-only">Sale price</span>
                                                    <span tabindex="0" v-html="formatMoney(bundleVariantPrice(product, product.selected_variant))"></span>
                                                </span>
                                                <span class="rebuy-money compare-at">
                                                    <span class="sr-only">Original price</span>
                                                    <span v-html="formatMoney(bundleVariantCompareAtPrice(product, product.selected_variant))"></span>
                                                </span>
                                            </div>
                                            <div v-if="!(bundleVariantOnSale(product, product.selected_variant))">
                                                <span class="rebuy-money">
                                                    <span class="sr-only">Price</span>
                                                    <span tabindex="0" v-html="formatMoney(bundleVariantPrice(product, product.selected_variant))"></span>
                                                </span>
                                            </div>
                                        </div>

                                        <div
                                            v-if="showProductDescription(product)"
                                            class="rebuy-product-description rebuy-bundle-builder__product-description"
                                            v-html="text(product.body_html)">
                                        </div>
                                    </div>
                                    <!-- /Product Info Section -->

                                    <!--  Product Variant Selection Section -->
                                    <div class="rebuy-product-options" v-if="showVariantSelect(product)">
                                        <select
                                            :id="id + '-' + 'select' + '-' + product_index"
                                            class="rebuy-select"
                                            v-bind:aria-label="'variant of ' + product.title"
                                            v-model="product.selected_variant_id"
                                            v-on:change="selectVariant(product)">
                                            <option
                                                v-for="variant in product.variants"
                                                class="rebuy-product-options__option"
                                                :class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
                                                v-bind:value="variant.id"
                                                :disabled="!variantAvailable(variant)"
                                                v-html="formatVariantOptionTitle(variant)">
                                            </option>
                                        </select>
                                    </div>
                                    <!-- /Product Variant Selection Section -->

                                    <!--  Product CTA Section -->
                                    <div class="rebuy-bundle-builder__product-actions rebuy-product-actions">
                                        <button
                                            v-if="hasProductQuickViewEnabled()"
                                            v-on:click="openVariantModal(product, step, step_index)"
                                            class="rebuy-button secondary rebuy-bundle-builder__product-quick-view"
                                            v-html="getBundleConfigLabel('quick_view_label')"
                                        >
                                        </button>

                                        <div class="rebuy-bundle-builder__product-quantity">
                                            <div v-if="foundStepProductInBundleHolder(product.selected_variant_id, step_index)">
                                                <div class="rebuy-bundle-builder__item-quantity-widget">
                                                    <button
                                                        class="rebuy-bundle-builder__item-quantity-widget-button"
                                                        v-on:click="removeLastAddedProductStep(product.selected_variant_id, step_index)"
                                                        v-bind:aria-label="'Decrease quantity of ' + product.title"
                                                        >
                                                        <rebuy-icon name="minus" class="rebuy-grey"></rebuy-icon>
                                                    </button>

                                                    <span
                                                        class="rebuy-bundle-builder__item-quantity-widget-label"
                                                        v-html="getBundleVariantQuantity(product.selected_variant_id, step_index)">
                                                    </span>

                                                    <button
                                                        class="rebuy-bundle-builder__item-quantity-widget-button"
                                                        v-on:click="addProductToBundle(product, step, step_index)"
                                                        v-bind:aria-label="'Increase quantity of ' + product.title"
                                                        v-bind:disabled="shouldDisableProductAddToBundle(product, step, step_index)"
                                                        >
                                                        <rebuy-icon name="plus" class="rebuy-grey"></rebuy-icon>
                                                    </button>
                                                </div>
                                            </div>


                                            <button
                                                v-if="!foundStepProductInBundleHolder(product.selected_variant_id, step_index)"
                                                class="rebuy-button"
                                                v-bind:disabled="shouldDisableProductAddToBundle(product, step, step_index)"
                                                v-bind:aria-label="buttonAriaLabel(product)"
                                                v-on:click="addProductToBundle(product, step, step_index)"
                                            >
                                                <span v-if="!variantAvailable(product.selected_variant)" v-html="getBundleConfigLabel('sold_out')"></span>
                                                <span v-else v-html="getBundleConfigLabel('add_to_bundle', step)"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <!--  /Product CTA Section -->
                                </div>

                                <!--  Product Skeleton Section -->
                                <div
                                    v-if="product.type === 'placeholder'"
                                    class="rebuy-bundle-builder__step-product-skeleton">
                                    <span></span>
                                </div>
                                <!--  /Product Skeleton Section -->

                            </div>
                            <!-- /Step Product Section -->
                        </div>
                        <!-- /Step Body Section -->
                    </div>
                    <!-- /Step Section -->
                </div>
                <!-- /Steps Section -->

                <!-- Product Group Section -->
                <div
                    class="rebuy-bundle-builder__group-container"
                    v-bind:class="[has_container_expanded ? 'expanded' : 'default']">
                    <div class="rebuy-bundle-builder__group-container-inner">
                        <div class="rebuy-bundle-builder__group-container-header">
                            <div class="rebuy-bundle-builder__group-container-header--left">
                                <h3
                                    class="rebuy-bundle-builder__group-container-header-title"
                                    v-html="getBundleConfigLabel('bundle_container_title')"
                                >
                                </h3>

                                <span class="rebuy-bundle-builder__group-container-header-title-count">
                                    <span
                                        class="rebuy-bundle-builder__group-container-header-products_count"
                                        v-html="getBundleContainerHeaderValue('products_count')">
                                    </span>

                                    <span class="rebuy-bundle-builder__group-container-header-divider">/</span>

                                    <span
                                        class="rebuy-bundle-builder__group-container-header-container-length"
                                        v-html="getBundleContainerHeaderValue('container_length')">
                                    </span>
                                </span>
                            </div>

                            <button
                                class="rebuy-bundle-builder__group-container-header-expand"
                                v-on:click="handleExpandingBundleContainer()"
                                :aria-label="hasBundleContainerExpanded() ? 'Collapse bundle container' : 'Expand bundle container'"
                                :aria-expanded="hasBundleContainerExpanded()"
                                >
                                <rebuy-icon v-if="hasBundleContainerExpanded()" name="chevron-down"></rebuy-icon>

                                <rebuy-icon v-if="!hasBundleContainerExpanded()" name="chevron-up"></rebuy-icon>
                            </button>
                        </div>

                        <!-- Bundle Tier Progress Bar -->
                        <div v-if="shouldDisplayBundleTierProgressBar()" class="rebuy-bundle-builder__group-container-progress-bar">
                            <div
                                class="rebuy-bundle-builder__group-progress-step-wrapper rebuy-bundle-builder__progress-step-wrapper"
                                v-bind:class="[ 'count-' + config.discount.tiers.length  ]"
                                >
                                <div
                                    v-for="(tier, tier_index) in config.discount.tiers"
                                    class="rebuy-bundle-builder__progress-step"
                                    v-bind:style="{ left: progressStepPosition(tier) }"
                                    v-bind:class="[
                                        progressTierReached(tier, products) ? 'complete' : '',
                                        'rebuy-bundle-builder__progress-step--' + tier_index
                                    ]"
                                    >

                                    <div
                                        class="rebuy-bundle-builder__progress-step-icon"
                                        v-bind:class="[ 'rebuy-bundle-builder__progress-step-icon-type-' + getBundleTierProgressStepType(tier) ]"
                                    >
                                        <span
                                            v-if="getBundleTierProgressStepType(tier) !== 'none'"
                                            v-html="formatBundleTierValue(tier.discount_value, tier.discount_type)"
                                            class="rebuy-bundle-builder__progress-step-value"
                                            v-bind:class="[ 'rebuy-bundle-builder__progress-step-value-type--' + getBundleTierProgressStepType(tier) ]"
                                            >
                                        </span>
                                    </div>

                                    <span
                                        class="rebuy-bundle-builder__progress-step-label"
                                        v-html="formatBundleTierLabel(tier)">
                                    </span>
                                </div>
                            </div>

                            <div class="rebuy-bundle-builder__progress-bar-wrapper">
                                <div
                                    class="rebuy-bundle-builder__progress-bar-meter"
                                    v-bind:class="[hasTierProgress(products) ? 'has-progress' : 'no-progress']">
                                    <div
                                        class="rebuy-bundle-builder__progress-bar-meter-fill"
                                        v-bind:style="{ width: tiersPercentageComplete(config.discount.tiers, products) }"
                                        role="progressbar"
                                        tabindex="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                        :aria-valuenow="tiersPercentageCompleteNumeric(config.discount.tiers, products)"
                                        aria-label="Bundle tier progress"
                                    >
                                        <span class="sr-only" v-html="'Bundle progress: ' + tiersPercentageComplete(config.discount.tiers, products) + ' complete'"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Bundle Tier Progress Bar -->

                        <!-- Bundle Gifts Selecting Section -->
                        <div v-if="isEligibleDiscountWithGift()" class="rebuy-bundle-builder__group-container-gifts">
                            <h3 class="rebuy-bundle-builder__gift-header" v-html="getBundleDiscountTierLabel('gift_header_message')"></h3>

                            <div
                                v-for="(product, product_index) in eligible_discount.gift_items"
                                v-if="product.data"
                                class="rebuy-bundle-builder__gift-product"
                                v-bind:key="'rebuy-bundle-builder-gift-product--' + product_index"
                            >
                                <div class="rebuy-bundle-builder__gift-product-image">
                                    <img
                                        v-bind:src="itemImage(product.data, product.data.selected_variant, '80x80')"
                                        v-bind:alt="'View ' + product.data.title"
                                    />
                                </div>

                                <div class="rebuy-bundle-builder__gift-product-info-wrapper">
                                    <div class="rebuy-bundle-builder__gift-product-info">
                                        <h3 class="rebuy-bundle-builder__gift-product-title" v-html="product.data.title"></h3>
                                    </div>

                                    <div v-if="product.data.variants.length > 1" class="rebuy-product-options">
                                        <select
                                            :id="id + '-' + 'gift-select' + '-' + product_index"
                                            class="rebuy-select rebuy-bundle-builder__gift-product-select"
                                            v-bind:aria-label="'variant of ' + product.data.title"
                                            v-model="product.data.selected_variant_id"
                                            v-on:change="selectVariant(product.data)">
                                            <option
                                                v-for="variant in product.data.variants"
                                                class="rebuy-product-options__option"
                                                :class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
                                                v-bind:value="variant.id"
                                                :disabled="!variantAvailable(variant)"
                                                v-html="formatVariantOptionTitle(variant)">
                                            </option>
                                        </select>
                                    </div>

                                    <div class="rebuy-bundle-builder__gift-product-actions">
                                        <button
                                            v-if="hasSelectedGiftProduct(product.data)"
                                            class="rebuy-bundle-builder__gift-product-button rebuy-bundle-builder__gift-product-button--remove"
                                            v-on:click="handleRemovingGiftProduct(product.data)"
                                            :aria-label="'Remove gift: ' + product.data.title">
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>

                                        <button
                                            v-if="!hasSelectedGiftProduct(product.data)"
                                            class="rebuy-button rebuy-bundle-builder__gift-product-button rebuy-bundle-builder__gift-product-button--add"
                                            v-on:click="handleAddingGiftProduct(product.data)">
                                            <span v-html="getBundleConfigLabel('select_gift')"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Bundle Gifts Selecting Section -->


                        <!-- Bundle Products Section -->
                        <div
                            class="rebuy-bundle-builder__group-container-body"
                            v-bind:class="[has_container_expanded ? 'expanded' : 'default']">
                            <div
                                class="rebuy-bundle-builder__group-container-body-items"
                                role="list"
                                tabindex="0"
                                aria-label="Selected bundle products"
                            >
                                <div
                                    v-for="(product, product_index) in bundleProducts"
                                    class="rebuy-bundle-builder__product-holder"
                                    :aria-label="product.title || 'Bundle product'"
                                    role="listitem"
                                    >
                                    <div
                                        v-if="product.classification === 'placeholder'"
                                        class="rebuy-bundle-builder__product-holder-template"
                                        >
                                        <div class="rebuy-bundle-builder__product-sign-holder">
                                            <span class="rebuy-bundle-builder__product-holder-icon">
                                                <rebuy-icon name="plus"></rebuy-icon>
                                            </span>
                                        </div>

                                        <div class="rebuy-bundle-builder__product-holder-detail">
                                            <h3
                                                class="rebuy-bundle-builder__product-holder-detail-title"
                                                v-html="getBundleConfigLabel('select_product')">
                                            </h3>

                                            <p
                                                v-if="product.label"
                                                class="rebuy-bundle-builder__product-holder-detail-description"
                                                v-html="product.label">
                                            </p>
                                        </div>
                                    </div>

                                    <div v-if="!product.classification" class="rebuy-bundle-builder__product-holder-data">
                                        <div class="rebuy-bundle-builder__product-holder-info--left">
                                            <!-- Product Image Section -->
                                            <div class="rebuy-bundle-builder__product-holder-media rebuy-product-media">
                                                <img
                                                    v-bind:src="itemImage(product, product.selected_variant, '160x160')"
                                                    v-bind:alt="'View ' + product.title"
                                                />
                                            </div>
                                            <!-- /Product Image Section -->

                                            <!-- Product Info Section -->
                                            <div class="rebuy-bundle-builder__product-holder-info rebuy-product-info">
                                                <h3 class="rebuy-bundle-builder__product-holder-info-title rebuy-product-title" v-html="product.title"></h3>

                                                <p
                                                    v-if="!shouldHideDefaultVariantTitle(product)"
                                                    class="rebuy-bundle-builder__product-holder-info-variant rebuy-variant-title"
                                                    v-html="product.selected_variant.title"
                                                    >
                                                </p>

                                                <div class="rebuy-bundle-builder__product-holder-info-price rebuy-product-price">
                                                    <div v-if="bundleVariantOnSale(product, product.selected_variant, true)">
                                                        <span class="rebuy-money sale">
                                                            <span class="sr-only">Sale price</span>
                                                            <span tabindex="0" v-html="formatMoney(bundleVariantPrice(product, product.selected_variant))"></span>
                                                        </span>
                                                        <span class="rebuy-money compare-at">
                                                            <span class="sr-only">Original price</span>
                                                            <span v-html="formatMoney(bundleVariantCompareAtPrice(product, product.selected_variant))"></span>
                                                        </span>
                                                        <div
                                                            v-if="isFixedDiscountBundle()"
                                                            class="rebuy-bundle-builder__fixed-discount-line-item-message"
                                                            v-html="getBundleConfigLabel('fixed_tier_discount')">
                                                        </div>
                                                    </div>
                                                    <div v-if="!(bundleVariantOnSale(product, product.selected_variant, true))">
                                                        <span class="rebuy-money">
                                                            <span class="sr-only">Price</span>
                                                            <span tabindex="0" v-html="formatMoney(bundleVariantPrice(product, product.selected_variant))"></span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="rebuy-bundle-builder__product-holder-info--right">
                                            <button
                                                class="rebuy-bundle-builder__product-holder-info-delete"
                                                v-on:click="handleRemovingProductFromBundle(product_index)"
                                                :aria-label="'Remove ' + product.title + ' from bundle'"
                                            >
                                                <rebuy-icon name="x"></rebuy-icon>
                                            </button>
                                        </div>
                                        <!-- /Product Info Section -->
                                    </div>
                                </div>
                            </div>
                            <!-- /Bundle Products Section -->

                            <!-- Total Savings Amount -->
                            <div
                                v-if="hasBundleBuilderTotalSavingsEnabled() && getBundleTotalSavingAmount(products) > 0"
                                class="rebuy-bundle-builder__total-savings-container">
                                    <span class="rebuy-bundle-builder__total-savings-label">
                                        Total Savings:
                                    </span>
                                    <span
                                        class="rebuy-bundle-builder__total-savings-amount rebuy-money sale"
                                        v-html="formatMoney(getBundleTotalSavingAmount(products))">
                                    </span>
                            </div>
                            <!-- /Total Savings Amount -->

                            <!-- Subscription Options Section -->
                            <div v-if="hasSelectedEnabledBundleSubscription()" class="rebuy-bundle-builder__subscription-options">
                                <!-- Subscription Radio Box -->
                                <div
                                    class="rebuy-bundle-builder__action-box-cta rebuy-bundle-builder__action-box-subscription"
                                    v-bind:class="[!hasSellingPlansIntervalList() ? 'rebuy-bundle-builder__action-box-cta--disabled' : '' ]">
                                    <div class="rebuy-bundle-builder__action-box-top">
                                        <label class="rebuy-radio-label">
                                            <input
                                                class="radio-input rebuy-radio rebuy-bundle-builder__action-box-radio"
                                                v-model="selected_purchase_type"
                                                value="subscription"
                                                type="radio"
                                                v-bind:disabled="!hasSellingPlansIntervalList()"
                                            />
                                            <span
                                                class="rebuy-bundle-builder__action-box-label"
                                                v-html="getBundleConfigLabel('switch_to_subscription_title')"
                                            >
                                            </span>
                                        </label>

                                        <div class="rebuy-bundle-builder__action-box-price">
                                            <span v-if="bundleHasEligibleDiscount(products) || getSubBundleSubtotalSavingPercent(products)">
                                                <span class="rebuy-money compare-at">
                                                    <span class="sr-only">Original subtotal price</span>
                                                    <span v-html="formatMoney(getBundleSubtotal(products))"></span>
                                                </span>

                                                <span class="rebuy-money sale">
                                                    <span class="sr-only">Sale subtotal price</span>
                                                    <span tabindex="0" v-html="formatMoney(getSubBundleDiscountedSubtotal(products))"></span>
                                                </span>
                                            </span>

                                            <span v-if="!getSubBundleSubtotalSavingPercent(products) && (!bundleHasEligibleDiscount(products) && getBundleSubtotal(products))" class="rebuy-money sale">
                                                <span class="sr-only">Subtotal price</span>
                                                <span tabindex="0" v-html="formatMoney(getBundleSubtotal(products))"></span>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="rebuy-bundle-builder__action-box-bottom">
                                        <p
                                            v-if="getBundleConfigLabel('switch_to_subscription_description')"
                                            class="rebuy-bundle-builder__action-box-description"
                                            v-html="getBundleConfigLabel('switch_to_subscription_description')">
                                        </p>

                                        <div v-if="hasSellingPlansIntervalList()" class="rebuy-bundle-builder__action-box-details">
                                            <select
                                                id="rebuy-bundle-builder-subscription-interval"
                                                class="rebuy-select rebuy-bundle-builder__action-box-select"
                                                v-model="selected_interval"
                                                v-on:change="handleSubscriptionIntervalChange($event)"
                                                aria-label="Select subscription delivery interval"
                                                >
                                                <option
                                                    v-for="(interval, interval_index) in selling_plan_interval_list"
                                                    v-bind:key="'rebuy-bundle-builder-subscription-interval--' + interval_index"
                                                    v-bind:value="interval">
                                                    {{ interval }}
                                                </option>
                                            </select>

                                            <span v-if="getBundleConfigLabel('save_label') && getSubBundleSubtotalSavingPercent(products)" class="rebuy-bundle-builder__action-box-saving">
                                                <span v-html="getBundleConfigLabel('save_label')"></span>
                                                <span v-html="getSubBundleSubtotalSavingPercent(products)"></span>
                                            </span>
                                        </div>

                                        <p
                                            v-if="hasExcludedBundleDiscountEnabled() && getBundleConfigLabel('excluded_bundle_discount_text')"
                                            class="rebuy-bundle-builder__action-box-note"
                                            v-html="getBundleConfigLabel('excluded_bundle_discount_text')">
                                        </p>
                                    </div>
                                </div>
                                <!-- /Subscription Radio Box -->

                                <!-- One-time Radio Box -->
                                <div v-if="!hasBundleBuilderSubscriptionOnlyEnabled()" class="rebuy-bundle-builder__action-box-cta rebuy-bundle-builder__action-box-subscription">
                                    <div class="rebuy-bundle-builder__action-box-top">
                                        <label class="rebuy-radio-label">
                                            <input
                                                class="radio-input rebuy-radio rebuy-bundle-builder__action-box-radio"
                                                v-model="selected_purchase_type"
                                                value="one-time"
                                                type="radio"
                                            />
                                            <span
                                                v-if="getBundleConfigLabel('one_time_title')"
                                                class="rebuy-bundle-builder__action-box-label"
                                                v-html="getBundleConfigLabel('one_time_title')"
                                            >
                                            </span>
                                        </label>

                                        <div class="rebuy-bundle-builder__action-box-price">
                                            <span v-if="bundleHasEligibleDiscount()">
                                                <span class="rebuy-money compare-at">
                                                    <span class="sr-only">Original subtotal price</span>
                                                    <span v-html="formatMoney(getBundleSubtotal(products))"></span>
                                                </span>

                                                <span class="rebuy-money sale">
                                                    <span class="sr-only">Sale subtotal price</span>
                                                    <span tabindex="0" v-html="formatMoney(getBundleDiscountedSubtotal(products))"></span>
                                                </span>
                                            </span>

                                            <span v-if="!bundleHasEligibleDiscount() && getBundleSubtotal(products)" class="rebuy-money sale">
                                                <span class="sr-only">Subtotal price</span>
                                                <span tabindex="0" v-html="formatMoney(getBundleSubtotal(products))"></span>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="rebuy-bundle-builder__action-box-bottom">
                                        <p
                                            v-if="getBundleConfigLabel('one_time_description')"
                                            class="rebuy-bundle-builder__action-box-description"
                                            v-html="getBundleConfigLabel('one_time_description')">
                                        </p>
                                    </div>
                                </div>
                                <!-- /One-time Order Radio Box -->
                            </div>
                        </div>
                        <!-- /Subscription Options Section -->

                        <!-- Add to Cart Section -->
                        <div class="rebuy-bundle-builder__group-container-action">
                            <div class="rebuy-bundle-builder__cta-container">
                                <button
                                    class="rebuy-button"
                                    v-on:click="addSelectedProductsToCart()"
                                    v-bind:disabled="shouldDisableAddBundleToCart(products)"
                                    aria-label="Add all selected products to cart"
                                    >
                                    <span v-html="buttonWidgetLabel()"></span>

                                    <span v-if="!hasSelectedEnabledBundleSubscription()">
                                        <span v-if="bundleHasEligibleDiscount()">
                                            <span class="rebuy-money sale">
                                                <span class="sr-only">Sale subtotal price</span>
                                                <span tabindex="0" v-html="formatMoney(getBundleDiscountedSubtotal(products))"></span>
                                            </span>

                                            <span class="rebuy-money compare-at">
                                                <span class="sr-only">Original subtotal price</span>
                                                <span v-html="formatMoney(getBundleSubtotal(products))"></span>
                                            </span>
                                        </span>

                                        <span v-if="!bundleHasEligibleDiscount() && getBundleSubtotal(products)" class="rebuy-money sale">
                                            <span class="sr-only">Subtotal price</span>
                                            <span tabindex="0" v-html="formatMoney(getBundleSubtotal(products))"></span>
                                        </span>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- /Add to Cart Section -->
                </div>
                <!-- /Product Group Section -->
            </div>
            <!-- /Body Section -->
        </div>


        <div
            v-if="has_container_expanded"
            class="rebuy-bundle-builder__full-screen-background rebuy-full-screen__background"
            v-on:click="handleExpandingBundleContainer()">
        </div>
    </div>
</script>
```

---

# Event Listeners (2.1KB)

Source: https://developers.rebuyengine.com/reference/bundle-builder-event-listeners.md

## Init

Triggers on Bundle Builder Widget initialization and passes the Bundle Builder Widget instance into the event details.

```javascript
document.addEventListener('rebuy.init', function(event){
    console.log('rebuy.init event', event.detail);
});
```

## Before Ready

Triggers before the Bundle Builder Widget is ready and passes the Bundle Builder Widget instance into the event details.

```javascript
document.addEventListener('rebuy.beforeReady', function(event){
    console.log('rebuy.beforeReady event', event.detail);
});
```

## Ready

Triggers when the Bundle Builder Widget is ready and passes the Bundle Builder Widget instance into the event details.

```javascript
document.addEventListener('rebuy.ready', function(event){
    console.log('rebuy.ready event', event.detail);
});
```

## Add Product To Bundle

Triggers once a product is added from the Bundle Builder Widget to the bundle container. This event passes the product along with the Bundle Builder Widget instance into the event details.

```javascript
document.addEventListener('rebuy.addProductToBundle', function(event){
    console.log('rebuy.addProductToBundle event', event.detail);
});
```

## Remove Product From Bundle

Triggers once a product is removed from the bundle container. This event passes the product to be removed along with the Bundle Builder Widget instance into the event details.

```javascript
document.addEventListener('rebuy.removeProductFromBundle', function(event){
    console.log('rebuy.removeProductFromBundle event', event.detail);
});
```

## Add Bundle To Cart

Triggers once all about-to-be-added products from the bundle container to the Shopify Cart. This event passes all products along with the Bundle Builder Widget instance into the event details.

```javascript
document.addEventListener('rebuy.addBundleToCart', function(event){
    console.log('rebuy.addBundleToCart event', event.detail);
});
```

---

# Utilities Overview (740B)

Source: https://developers.rebuyengine.com/reference/utilities.md

!!! tip "See Full Documentation"
    For complete utility method documentation, see [Utility Methods](utility-methods.md).

The Rebuy JS library provides helpful utility methods for common operations including formatting, product data, and more.

```javascript
// Access utilities
const util = window.Rebuy.util;

// Format money
util.formatMoney(2999); // "$29.99"

// Copy to clipboard
util.copyToClipboard("text to copy");

// Debounce a function
const debouncedFn = util.debounce(myFunction, 300);
```

See [Utility Methods](utility-methods.md) for the complete reference.

---

# Methods (17.8KB)

Source: https://developers.rebuyengine.com/reference/utility-methods.md

## Overview

Rebuy utilities provide helper functions for common operations including money formatting, product data manipulation, object handling, and more. All utilities are available on the global `Rebuy.util` namespace.

```javascript
const util = window.Rebuy.util;
```

---

## Quick Reference

| Category | Methods |
|----------|---------|
| **Formatting** | `formatMoney`, `formatNumber`, `numberWithCommas`, `amountToCents`, `handlize` |
| **Products** | `getStaticProducts`, `findLowestPricedVariant`, `findVariantBasedOnOptions`, `isBundleProduct`, `productImage` |
| **Discounts** | `calculateDiscount` |
| **Objects** | `deepCopy`, `extend` |
| **URLs** | `getLocation`, `generateCartShareUrl` |
| **Clipboard** | `copyToClipboard` |
| **Misc** | `debounce`, `filterArray`, `isRebuyItem`, `randomRange`, `timestamp`, `wait` |

---

## Formatting

### amountToCents

Converts a decimal amount to cents (integer).

```javascript
util.amountToCents(amount);
```

**Parameters**

`amount` · number | string · **Required**
:   The amount to convert.

**Returns**

`number` - The amount in cents.

**Example**

```javascript
Rebuy.util.amountToCents(159.59);
// Output: 15959

Rebuy.util.amountToCents("24.99");
// Output: 2499
```

---

### formatMoney

Formats a cent value as a currency string wrapped in a `<span>` element.

```javascript
util.formatMoney(cents, format);
```

**Parameters**

`cents` · number · **Required**
:   The amount in cents.

`format` · string · Default: shop's money format
:   Custom format string using Shopify's money format syntax.

**Returns**

`string` - HTML span element with formatted money.

**Example**

```javascript
Rebuy.util.formatMoney(1299);
// Output: '<span class="money">$12.99</span>'

Rebuy.util.formatMoney(2499, "${{amount}}");
// Output: '<span class="money">$24.99</span>'
```

---

### formatNumber

Formats a number with thousands separators and decimal places.

```javascript
util.formatNumber(number, decimal_count, thousands_separator, decimal_separator);
```

**Parameters**

`number` · number | string · **Required**
:   The number to format.

`decimal_count` · number · Default: `2`
:   Number of decimal places.

`thousands_separator` · string · Default: `","`
:   Character for thousands separation.

`decimal_separator` · string · Default: `"."`
:   Character for decimal point.

**Returns**

`string` - The formatted number string.

**Example**

```javascript
Rebuy.util.formatNumber(1562, 2, ",", ".");
// Output: '1,562.00'

Rebuy.util.formatNumber(99999.5, 2, " ", ",");
// Output: '99 999,50'
```

---

### numberWithCommas

Formats a number with comma separators.

```javascript
util.numberWithCommas(num);
```

**Parameters**

`num` · number · **Required**
:   The number to format.

**Returns**

`string` - The formatted number with commas.

**Example**

```javascript
Rebuy.util.numberWithCommas(1563);
// Output: '1,563'

Rebuy.util.numberWithCommas(1000000);
// Output: '1,000,000'
```

---

### handlize

Converts a string to a URL-safe handle (slug).

```javascript
util.handlize(str);
```

**Parameters**

`str` · string · **Required**
:   The string to convert.

**Returns**

`string` - A lowercase, hyphenated handle.

**Example**

```javascript
Rebuy.util.handlize("Performance Half Zip Pullover");
// Output: 'performance-half-zip-pullover'

Rebuy.util.handlize("Men's T-Shirt (Large)");
// Output: 'mens-tshirt-large'
```

**Use Cases**

- Creating URL slugs from product titles
- Generating CSS class names from dynamic content
- Matching product handles to Shopify handles

---

## Products

### getStaticProducts

Fetches product data from the Rebuy `/products/static` endpoint. Returns full Shopify product data with support for contextual pricing and filtering options.

```javascript
await util.getStaticProducts(params);
```

**Parameters**

`params` · object
:   Query parameters for the request.

| Property | Type | Description |
|----------|------|-------------|
| `ids` | string[] | Shopify product IDs to fetch |
| `handles` | string[] | Shopify product handles to fetch |
| `shopify_product_ids` | string[] | Product IDs to filter from results |
| `shopify_collection_id` | string | Collection ID to filter products |
| `country_code` | string | ISO country code for contextual pricing (e.g., 'US') |
| `metafields` | string | Set to `'yes'` to include product metafields |
| `limit` | string | Number of results to return (default: 5) |
| `bust_cache` | string | Set to `'yes'` to force a fresh response |

**Returns**

`Promise<object>` - Response containing `data` array of product objects.

**Example**

```javascript
// Fetch specific products by IDs
const response = await Rebuy.util.getStaticProducts({
  ids: ['8234567890123', '8234567890456']
});
console.log(response.data);
// Output: [{ id: 8234567890123, title: 'Product 1', ... }, ...]

// Fetch products with contextual pricing for Canada
const caProducts = await Rebuy.util.getStaticProducts({
  ids: ['8234567890123'],
  country_code: 'CA',
  metafields: 'yes'
});

// Fetch products from a collection
const collectionProducts = await Rebuy.util.getStaticProducts({
  shopify_collection_id: '123456789012',
  limit: '10'
});
```

**Use Cases**

- Loading product data for custom widgets
- Fetching product details for comparison features
- Getting contextual pricing for international customers

!!! note "API Documentation"
    See the [Static Products API](static.md) for full endpoint documentation.

---

### findLowestPricedVariant

Finds the variant with the lowest price from a product's variants array.

```javascript
util.findLowestPricedVariant(product);
```

**Parameters**

`product` · object · **Required**
:   A Rebuy product object containing a `variants` array.

**Returns**

`object` - The variant object with the lowest price, or empty object if no variants.

**Example**

```javascript
const product = {
  title: "Classic T-Shirt",
  variants: [
    { id: 1, title: "Small", price: "24.99" },
    { id: 2, title: "Medium", price: "24.99" },
    { id: 3, title: "Large", price: "29.99" }
  ]
};

const cheapestVariant = Rebuy.util.findLowestPricedVariant(product);
console.log(cheapestVariant);
// Output: { id: 1, title: "Small", price: "24.99" }
```

**Use Cases**

- Displaying "Starting at $X" pricing
- Auto-selecting the most affordable variant
- Price comparison features

---

### findVariantBasedOnOptions

Finds a variant that matches the currently selected product options.

```javascript
util.findVariantBasedOnOptions(product);
```

**Parameters**

`product` · object · **Required**
:   A product object with `variants` array and `option1`, `option2`, `option3` properties set to the selected option values.

**Returns**

`object | null` - The matching variant object, or `null` if no match found.

**Example**

```javascript
const product = {
  option1: "Blue",
  option2: "Medium",
  option3: null,
  variants: [
    { id: 1, option1: "Blue", option2: "Small", option3: null, price: "24.99" },
    { id: 2, option1: "Blue", option2: "Medium", option3: null, price: "24.99" },
    { id: 3, option1: "Red", option2: "Medium", option3: null, price: "24.99" }
  ]
};

const selectedVariant = Rebuy.util.findVariantBasedOnOptions(product);
console.log(selectedVariant);
// Output: { id: 2, option1: "Blue", option2: "Medium", option3: null, price: "24.99" }
```

**Use Cases**

- Custom variant selectors
- Syncing variant selection across multiple option dropdowns
- Programmatic variant selection

---

### isBundleProduct

Checks whether a cart item is a Shopify bundle product.

```javascript
util.isBundleProduct(item);
```

**Parameters**

`item` · object · **Required**
:   A Shopify cart item object.

**Returns**

`boolean` - `true` if the item is a bundle product, `false` otherwise.

**Example**

```javascript
document.addEventListener('rebuy:cart.ready', (event) => {
  const cart = event.detail.cart;

  cart.items.forEach(item => {
    if (Rebuy.util.isBundleProduct(item)) {
      console.log(`${item.title} is a bundle product`);
    }
  });
});
```

**Notes**

- Detects products created via Shopify's Bundles app
- Products using Cart Transform API with only a default variant are not considered bundles

---

### productImage

Resizes a product image URL to a specific size.

```javascript
util.productImage(product, size);
```

**Parameters**

`product` · object · **Required**
:   A product or variant object with an image property.

`size` · string · Default: `"medium"`
:   The desired image size (e.g., `"small"`, `"medium"`, `"large"`, or pixel dimensions like `"300x300"`).

**Returns**

`string` - The resized image URL.

---

## Discounts

### calculateDiscount

Calculates discounted pricing for a product based on discount options.

```javascript
util.calculateDiscount(product, isCompareAtPrice, discountOptions);
```

**Parameters**

`product` · object · **Required**
:   A product object with `selected_variant` containing price information.

`isCompareAtPrice` · boolean · **Required**
:   Whether to use the compare-at price as the baseline.

`discountOptions` · array
:   Array of discount option objects with `discountType` (`'one-time'` or `'subscription'`), `type` (`'percentage'`, `'fixed_amount'`, or `'price'`), and `amount`.

**Returns**

`object` - Calculated discount information:

| Property | Type | Description |
|----------|------|-------------|
| `compareAtPrice` | number | Original/compare price |
| `discountedPrice` | number | Final discounted price |
| `savingAmount` | number | Amount saved (percentage or fixed) |
| `type` | string | Discount type used |
| `shouldShowDiscountedPrice` | boolean | Whether to display the discount |
| `onetimeDiscountObject` | object | One-time discount details |
| `subscriptionDiscountObject` | object | Subscription discount details |

**Example**

```javascript
const product = {
  selected_variant: {
    price: "49.99",
    compare_at_price: "59.99"
  }
};

const discountOptions = [
  { discountType: 'one-time', type: 'percentage', amount: 10 }
];

const result = Rebuy.util.calculateDiscount(product, true, discountOptions);
console.log(result);
// Output: {
//   compareAtPrice: "59.99",
//   discountedPrice: "44.99",
//   savingAmount: 25,  // ~25% off compare price
//   type: "percentage",
//   shouldShowDiscountedPrice: true,
//   ...
// }
```

---

## Objects

### deepCopy

Creates a deep clone of an object or array using JSON serialization.

```javascript
util.deepCopy(referenceValue);
```

**Parameters**

`referenceValue` · any · **Required**
:   The value to clone (object, array, or primitive).

**Returns**

`any` - A deep copy of the input value.

**Example**

```javascript
const original = {
  product: { title: "T-Shirt", variants: [{ id: 1, price: "24.99" }] }
};

const copy = Rebuy.util.deepCopy(original);
copy.product.title = "Modified T-Shirt";

console.log(original.product.title);
// Output: 'T-Shirt' (unchanged)
console.log(copy.product.title);
// Output: 'Modified T-Shirt'
```

!!! warning "Limitations"
    Uses `JSON.parse(JSON.stringify())` internally, so functions, `undefined`, `Symbol`, and circular references are not preserved.

---

### extend

Merges multiple objects together, with optional deep merge support.

```javascript
util.extend(deep, target, ...sources);
```

**Parameters**

`deep` · boolean
:   If `true` as first argument, performs deep merge. Otherwise, first argument is the target object.

`target` · object · **Required**
:   The target object to merge into.

`...sources` · object
:   Source objects to merge from (later objects override earlier ones).

**Returns**

`object` - The merged object.

**Example**

```javascript
// Shallow merge
const defaults = { theme: 'light', limit: 5 };
const options = { limit: 10 };
const config = Rebuy.util.extend({}, defaults, options);
// Output: { theme: 'light', limit: 10 }

// Deep merge
const baseConfig = {
  settings: { display: { columns: 4 }, api: { timeout: 5000 } }
};
const customConfig = {
  settings: { display: { columns: 3 } }
};
const merged = Rebuy.util.extend(true, {}, baseConfig, customConfig);
// Output: { settings: { display: { columns: 3 }, api: { timeout: 5000 } } }
```

**Use Cases**

- Merging default configuration with custom options
- Creating new objects with combined properties
- Deep merging nested configuration objects

---

## URLs

### getLocation

Parses a URL and returns an object with its components.

```javascript
util.getLocation(url);
```

**Parameters**

`url` · string
:   The URL to parse. If omitted, uses `window.location.href`.

**Returns**

`object` - URL components:

| Property | Type | Description |
|----------|------|-------------|
| `hash` | string | URL hash/fragment |
| `host` | string | Hostname with port |
| `hostname` | string | Hostname only |
| `href` | string | Full URL |
| `pathname` | string | URL path |
| `port` | string | Port number |
| `protocol` | string | Protocol (http:, https:) |
| `search` | string | Query string |

**Example**

```javascript
const location = Rebuy.util.getLocation("https://example.com:8080/products/shirt?color=blue#details");
console.log(location);
// Output: {
//   hash: "#details",
//   host: "example.com:8080",
//   hostname: "example.com",
//   href: "https://example.com:8080/products/shirt?color=blue#details",
//   pathname: "/products/shirt",
//   port: "8080",
//   protocol: "https:",
//   search: "?color=blue"
// }
```

---

### generateCartShareUrl

Generates a shareable URL containing the current cart contents.

```javascript
util.generateCartShareUrl();
```

**Returns**

`string` - URL with encoded cart data as a query parameter.

**Example**

```javascript
// When cart contains items
const shareUrl = Rebuy.util.generateCartShareUrl();
console.log(shareUrl);
// Output: 'https://example.com/?rebuy_cart=eyJpdGVtcyI6W3siaWQiOjEyMzQ1Njc4OTAxMjMsInF1YW50aXR5IjoyfV19'

// Copy to clipboard for sharing
await Rebuy.util.copyToClipboard(shareUrl);
```

**Use Cases**

- "Share Cart" functionality
- Abandoned cart recovery links
- Customer service cart reconstruction

!!! note "Requirements"
    Requires Smart Cart to be initialized with items in the cart.

---

## Clipboard

### copyToClipboard

Copies text to the user's clipboard.

```javascript
await util.copyToClipboard(text);
```

**Parameters**

`text` · string · **Required**
:   The text to copy to the clipboard.

**Returns**

`Promise<void>` - Resolves when copy is complete.

**Throws**

`Error` - If copy operation fails.

**Example**

```javascript
// Copy a discount code
try {
  await Rebuy.util.copyToClipboard('SAVE20');
  console.log('Discount code copied!');
} catch (error) {
  console.error('Failed to copy:', error);
}

// Copy cart share URL
const shareUrl = Rebuy.util.generateCartShareUrl();
await Rebuy.util.copyToClipboard(shareUrl);
```

**Notes**

- Uses the modern Clipboard API when available
- Falls back to `document.execCommand('copy')` for older browsers
- May require user interaction (click event) in some browsers

---

## Miscellaneous

### debounce

Creates a debounced function that delays execution until after a specified wait time.

```javascript
util.debounce(fn, wait, immediate);
```

**Parameters**

`fn` · function · **Required**
:   The function to debounce.

`wait` · number · **Required**
:   Milliseconds to wait before executing.

`immediate` · boolean · Default: `false`
:   If `true`, execute on the leading edge instead of trailing.

**Returns**

`function` - The debounced function.

**Example**

```javascript
const searchProducts = Rebuy.util.debounce((query) => {
  console.log('Searching for:', query);
  // API call here
}, 300);

// Only executes once, 300ms after last call
searchProducts('shirt');
searchProducts('shirts');
searchProducts('shirts blue');
// Output after 300ms: 'Searching for: shirts blue'
```

---

### filterArray

Filters an array of objects based on filter criteria.

```javascript
util.filterArray(items, filters, possessive);
```

**Parameters**

`items` · array · **Required**
:   Array of objects to filter.

`filters` · object · **Required**
:   Filter criteria object.

`possessive` · boolean · Default: `false`
:   If `true`, items must match ALL filters.

**Returns**

`array` - Filtered array of items.

---

### isRebuyItem

Checks if a cart item was added via a Rebuy widget.

```javascript
util.isRebuyItem(item);
```

**Parameters**

`item` · object · **Required**
:   A Shopify cart item object.

**Returns**

`boolean` - `true` if the item was added via Rebuy.

**Example**

```javascript
document.addEventListener('rebuy:cart.ready', (event) => {
  const rebuyItems = event.detail.cart.items.filter(item =>
    Rebuy.util.isRebuyItem(item)
  );
  console.log('Items added via Rebuy:', rebuyItems.length);
});
```

---

### randomRange

Generates a random number within a specified range.

```javascript
util.randomRange(min, max);
```

**Parameters**

`min` · number · **Required**
:   Minimum value (inclusive).

`max` · number · **Required**
:   Maximum value (inclusive).

**Returns**

`number` - Random number between min and max.

**Example**

```javascript
const randomDiscount = Rebuy.util.randomRange(5, 20);
console.log(`You got ${randomDiscount}% off!`);
```

---

### timestamp

Returns the current Unix timestamp in seconds.

```javascript
util.timestamp();
```

**Returns**

`number` - Current Unix timestamp.

---

### wait

Executes a callback after a specified delay.

```javascript
util.wait(callback, ms);
```

**Parameters**

`callback` · function · **Required**
:   Function to execute after the delay.

`ms` · number · **Required**
:   Delay in milliseconds.

**Example**

```javascript
Rebuy.util.wait(() => {
  console.log('Executed after delay');
}, 2000);
```

---

## Related

- [Cart Methods](cart-methods.md)
- [Widget Methods](widget-methods.md)
- [Static Products API](static.md)

<!-- Source: onsite-js/src/onsite/js/utilities/ -->

---

# Smart Links Overview (2.7KB)

Source: https://developers.rebuyengine.com/reference/smart-links.md

## Overview

Smart Links create pre-built cart URLs that automatically add products, apply discounts, and redirect customers. Use them in email campaigns, landing pages, and promotional content.

### Key Features

- **Auto-add Products** - Automatically add specific products to cart
- **Discount Codes** - Apply discount codes on arrival
- **Custom Redirects** - Send customers to checkout, cart, or any page
- **Landing Messages** - Display promotional dialogs on arrival
- **Conditional Logic** - Trigger based on cart subtotal thresholds

## URL Structure

Smart Links use the `promo` URL parameter:

```text
https://your-store.myshopify.com/?promo=YOUR_PROMO_KEY
```

The promo key is generated when you create a Smart Link in the Rebuy Admin Dashboard.

### URL Parameters

| Parameter | Description |
|-----------|-------------|
| `promo` | The Smart Link key (required) |
| `promo_clear` | Set to clear any active Smart Link session |

## Use Cases

**Email Campaign**
:   Customer clicks link → products added to cart → redirected to checkout with discount applied.

**Homepage Bundle**
:   Embed link in a CTA button → customer clicks → bundle products added → Smart Cart opens with promotional message.

**Collection Promotion**
:   Link redirects to collection page → Smart Cart shows added items → banner displays discount message.

## JavaScript Access

Access the active Smart Link via JavaScript:

```javascript
// Check if a Smart Link is active
if (Rebuy.SmartLink && Rebuy.SmartLink.key) {
  console.log('Active promo:', Rebuy.SmartLink.key);
}

// Get Smart Link settings
const settings = Rebuy.SmartLink?.settings;
if (settings) {
  console.log('Promo status:', settings.status);
  console.log('Promo items:', settings.items);
}

// Clear the active Smart Link
Rebuy.SmartLink?.destroy();
```

### Properties

| Property | Type | Description |
|----------|------|-------------|
| `key` | string | The promo key from the URL |
| `settings` | object | Configuration from Rebuy Admin |
| `status` | string | Current status (`ready`, `initializing`, `adding`) |

## Creating Smart Links

Smart Links are created and configured in the Rebuy Admin Dashboard. For detailed setup instructions, see [Using Rebuy's Smart Links](https://help.rebuyengine.com/en/articles/6197419-using-rebuy-s-smart-links).

![Storefront with product carousel and Smart Cart showing free shipping progress](../assets/images/9f16605-Cursor_and_All__Rebuy_Demo_Store.png)

<!-- Source: onsite-js/src/onsite/js/modules/SmartLink/SmartLink.js -->

---

# URL Arguments (6.0KB)

Source: https://developers.rebuyengine.com/reference/url-arguments.md

These Smart Links rely on URL arguments in order to achieve a desired outcome. Some of the arguments are optional and some are required for the Smart Link to load in properly. 

## URL Beginning

All Smart Links must start with the example Protocol, Domain and Path where the Domain is the store that the this Smart Link is used for. Preceding the Domain must be the path of /apps/rebuy/cart.

```text
https://{{my-store-domain.com}}/apps/rebuy/cart

// Example of the beginning URL
https://try.rebuyengine.com/apps/rebuy/cart
```

After this path then you can add in the desired arguments. Below is a basic example of adding one item to the cart and redirecting the customer to Shopify Checkout. Below we are specifying the variant ID to be added, the quantity of this variant and where we would like the customer to land once the logic has ran.

Try copying the below into a new tab and see what happens.

```text
https://try.rebuyengine.com/apps/rebuy/cart?variants%5B42005931065577%5D%5Bquantity%5D=1&redirect=shopify_checkout
```

```text
// Decoded URL example
https://try.rebuyengine.com/apps/rebuy/cart?
variants[42005931065577][quantity]=1
&redirect=shopify_checkout
```

## Required Arguments

| Argument | Values                                                     | Result                                                                         |
| :------- | :--------------------------------------------------------- | :----------------------------------------------------------------------------- |
| variants | Array of comma separated integers. e.x. \[123456, 7891011] | The variant ID's that will be added to the cart.                               |
| quantity | Integer e.x. 1                                             | The quantity of the variant to be added.                                       |
| redirect | shopify_checkout, cart or recharge_checkout              | The page that the customer will land on once the logic has finished. \*Will be |

## Optional Arguments

| Arguments         | Values                                                                              | Result                                                                                                                                                                                                                                                                          |
| :---------------- | :---------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| clear_cart       | yes or no                                                                           | If yes, then any items in the customers cart will be removed. If no, then any items that may be in the customers cart will not be removed.                                                                                                                                      |
| smart_cart_show | yes or no                                                                           | If yes and the merchant has the Rebuy Smart Cart enabled then the Smart Cart will open once the customer has been redirected. \*This only works on custom landing pages and the merchant must have the Smart Cart enabled. If no, the Smart Cart will not show once redirected. |
| discount          | String/text. E.x. 20OFF                                                             | A discount code that will be applied once the logic has ran.                                                                                                                                                                                                                    |
| message           | String/text. E.x. "Thanks for shopping with us."                                    | A dismissible banner message that will appear at the top of the screen once the logic has ran.                                                                                                                                                                                  |
| landing_page     | shopify_checkout, cart, recharge_checkout or a subdomain such as /collections/all | \*Note: This will be released soon and will be taking place of the redirect argument, although we will still support the redirect argument. The location that the customer will be redirected to once the logic has ran.                                                        |

## Example

Below is an example with one product being added to cart, the cart being cleared of its original items, a custom page that the customer will land on, the Smart Cart opening once they get there and a dismissible banner message displaying and following them through their session. There are also product properties that are being added to these items which is a bit easier to see in the decoded example further below. 

```text
https://try.rebuyengine.com/apps/rebuy/cart?variants%5B42005931065577%5D%5Bquantity%5D=1&clear_cart=yes&message=Thanks%20for%20shopping%20with%20us%21&redirect=%2Fcollections%2Fall&landing_page=%2Fcollections%2Fall&smart_cart_show=yes
```

```text
// URL decoded
https://try.rebuyengine.com/apps/rebuy/cart?
variants[42120411087081][properties][_attribution]=Rebuy Cart&
variants[42120411087081][properties][_widget_id]=37001&
variants[42120411087081][properties][_source]=Rebuy&
variants[42120411087081][quantity]=2&
variants[42005931065577][properties][_attribution]=Rebuy Permalink&
variants[42005931065577][properties][_source]=Rebuy&
variants[42005931065577][quantity]=1&
clear_cart=yes&
message=Thanks for shopping with us!&
redirect=/collections/all&
landing_page=/collections/all&
smart_cart_show=yes
```

---

# Smart Banner (3.7KB)

Source: https://developers.rebuyengine.com/reference/smart-banner.md

## Overview

Smart Banner displays promotional messages at the top of the page. Messages are set via Smart Links and persist until the customer dismisses the banner.

### Key Features

- **Smart Link integration** - Messages are set automatically when customers visit Smart Link URLs
- **Persistent display** - Banner stays visible across page navigation until dismissed
- **Cookie-based storage** - Message persists via the `_rslm` cookie
- **Customizable template** - Banner appearance can be styled with CSS

## Quick Start

Smart Banner initializes automatically when a Smart Link message cookie is present. The banner appears at the top of the page with the message and a close button.

```javascript
// Check if Smart Banner is ready
if (Rebuy.SmartBanner.status === 'ready') {
  console.log('Banner message:', Rebuy.SmartBanner.message);
}

// Check banner visibility
if (Rebuy.SmartBanner.visible) {
  console.log('Smart Banner is currently displayed');
}
```

### Programmatic Dismissal

Dismiss the banner programmatically when needed:

```javascript
// Dismiss the banner and remove the cookie
Rebuy.SmartBanner.dismissSmartBanner();
```

## How It Works

1. Customer visits a Smart Link URL with a message parameter
2. The message is stored in the `_rslm` cookie
3. Smart Banner reads the cookie and displays the message
4. Customer can dismiss the banner, which removes the cookie

## Properties

### `SmartBanner.visible` : `boolean`

Whether the banner is currently displayed.

### `SmartBanner.message` : `string | null`

The current banner message text. Returns `null` if no message is set.

### `SmartBanner.status` : `string`

Current module status.

| Value | Description |
|-------|-------------|
| `'initializing'` | Module is starting up |
| `'ready'` | Banner is displayed and ready |
| `'disabled'` | No message present or banner was dismissed |

## Methods

### `SmartBanner.init()` ⇒ `Promise<void>`

Initializes the Smart Banner module. Called automatically during Rebuy initialization if a message cookie is present.

```javascript
// Typically called automatically, but can be invoked manually
await Rebuy.SmartBanner.init();
```

### `SmartBanner.getMessage()` ⇒ `string | null`

Retrieves the current banner message from the cookie.

```javascript
const message = Rebuy.SmartBanner.getMessage();
if (message) {
  console.log('Current message:', message);
}
```

### `SmartBanner.dismissSmartBanner()` ⇒ `void`

Dismisses the banner and removes the message cookie. The banner will not reappear until a new Smart Link is visited.

```javascript
// Dismiss the banner
Rebuy.SmartBanner.dismissSmartBanner();
// SmartBanner.visible is now false
// SmartBanner.status is now 'disabled'
```

## Styling

The banner uses the following CSS classes:

| Class | Description |
|-------|-------------|
| `.rebuy-smart-banner` | Main banner container |
| `.rebuy-smart-banner.is-visible` | When banner is shown |
| `.rebuy-smart-banner.is-hidden` | When banner is hidden |
| `.rebuy-smart-banner_message` | Message text container |
| `.rebuy-smart-banner_close` | Close button |

### Example Custom Styles

```css
.rebuy-smart-banner {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  color: white;
  padding: 12px 20px;
  text-align: center;
}

.rebuy-smart-banner_close {
  cursor: pointer;
  opacity: 0.8;
}

.rebuy-smart-banner_close:hover {
  opacity: 1;
}
```

## Related

- [Smart Links](./smart-links.md) - Create links that set banner messages

<!-- Source: onsite-js/src/onsite/js/modules/SmartBanner/ -->

---

# Shopify Selling Plans Overview (617B)

Source: https://developers.rebuyengine.com/reference/shopify-selling-plans.md

# Now Supporting Shopify Selling Plans

For a more general understanding of how Rebuy utilizes Shopify Selling Plans please visit this help doc [here](https://help.rebuyengine.com/en/articles/6712911-enabling-subscription-selling-plans).

---

# Enable Selling Plans (4.2KB)

Source: https://developers.rebuyengine.com/reference/enable-selling-plans.md

# Enable Selling Plan Data from Shopify Directly

Rebuy now supports subscription selling plans from all subscription apps that manage Shopify selling plans! Rebuy will now be pulling in the product selling plan information directly from Shopify. This allows Rebuy to use the selling plan data from all subscription services available through Shopify. Using this method, you can now use subscription features in Rebuy widgets and the Smart Cart. 

To begin, please log in to the Rebuy admin panel, navigate to the "Integrations" tab, and select the "Subscriptions Integration" option.

![Navigating to Integrations in the Rebuy admin sidebar](../assets/images/99ceb13-111.gif)

Once you've reached the subscriptions page, simply switch the integration status to "On" and confirm your desire to enable the subscription feature. After enabling the integration, a confirmation pop-up will appear, and you will also observe a "connected" status displayed on the page.

![Subscriptions integration page with Connect button](../assets/images/556629f-3333.gif)

One final step remains, which is to link your particular subscription provider. To accomplish this, click on "Connect Subscriptions," select your primary subscription provider from the dropdown menu, and then click "Connect." A confirmation pop-up will appear, verifying the successful completion of the integration.

*You have the option to select a secondary subscription provider, but please note that this choice is entirely optional and not necessary for the functionality of your primary provider.*

![Subscriptions integration showing connected status](../assets/images/79c8002-44444.gif)

<br />

Once this process is completed, Rebuy will have access to your subscription plans, enabling the use of the "switch-to-subscription" feature. Consequently, Rebuy will be able to recommend subscriptions for relevant products and activate the "switch-to-subscription" functionality in the following product areas

* Switch to Subscription in Smart Cart
* Switch to Subscription on checkout pages (Checkout Page Widget only)
* Switch to Subscription Pop-ups
* Subscription select on Rebuy carousels

### To learn more, please [click here](https://help.rebuyengine.com/en/articles/6712911-enabling-subscription-integrations).

## Enable Selling Plans in a SandBox Environment

The below code snippet will allow you to enable the return of selling plan data whenever a widget or the Smart Cart has subscription features enabled. This allows you to test these features in a sandbox environment such as a development theme. It is suggested to wrap this snippet in a script tag and place at the bottom of the body of your theme.liquid file. 

```javascript
document.addEventListener('rebuy.loaded', function(event){
  
  // Tell Rebuy to pull in selling plan data when available
  window.Rebuy.shop.shopify_selling_plans_enabled = true;
});
```

Below are two areas where you can find this selling plan data. In order get this data on the Rebuy Cart object you will need to have the Smart Cart enabled and Switch to Subscription enabled within the Smart Cart.

Alternatively you can run the enrichCart function from the Cart class in the console. Rebuy.Cart.enrichCart();

```javascript
// Product level selling plan groups
Rebuy.Cart.cart.items[0].product.selling_plan_groups;

// Variant seleve selling plan allocations
Rebuy.Cart.cart.items[0].product.selected_variant.selling_plan_allocations;
```

!!! note "Transition from Recharge integration"
    If you are currently using the Recharge integration and have any custom code written around subscriptions then it is suggested to utilize the ability to test in a sandbox environment. This way you can ensure that any custom code will work with the format of data that we are getting back from Shopify directly. There are differences in the data format along with the introduction of selling plan allocations on the variant level. Currently we are not getting any variant level allocations back from the Recharge integration.

---

# Event Listeners (8.1KB)

Source: https://developers.rebuyengine.com/reference/smart-search-event-listeners.md

These events trigger within the Smart Search lifecycle for both Quick View (instant search overlay) and Results Page (dedicated search results page).

## Quick View

Events for the instant search overlay that appears as users type.

### Init

Triggers when Smart Search Quick View settings are found and initialization begins.

```javascript
document.addEventListener('rebuy:smartsearch.quickview.init', (event) => {
  const { smartSearch } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartSearch` | object | The Smart Search instance |

### Before Ready

Triggers just before Smart Search Quick View becomes ready.

```javascript
document.addEventListener('rebuy:smartsearch.quickview.beforeReady', () => {
  // Your logic here
});
```

#### Payload

This event does not include a payload.

### Ready

Triggers when Smart Search Quick View is fully initialized and ready.

```javascript
document.addEventListener('rebuy:smartsearch.quickview.ready', (event) => {
  const { smartSearchQuickView, view } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartSearchQuickView` | object | The Quick View instance |
| `view` | object | The Vue view instance |

### Open

Triggers when the Quick View search overlay opens.

```javascript
document.addEventListener('rebuy:smartsearch.quickview.open', (event) => {
  const { smartSearchQuickView } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartSearchQuickView` | object | The Quick View instance |

### Close

Triggers when the Quick View search overlay closes.

```javascript
document.addEventListener('rebuy:smartsearch.quickview.close', (event) => {
  const { smartSearchQuickView } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartSearchQuickView` | object | The Quick View instance |

### Before Add

Triggers before a product is added to the cart from Quick View.

```javascript
document.addEventListener('rebuy:smartsearch.quickview.beforeAdd', (event) => {
  const { product, smartSearchQuickView } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being added |
| `smartSearchQuickView` | object | The Quick View instance |

### Add

Triggers when a product is added to the cart from Quick View.

```javascript
document.addEventListener('rebuy:smartsearch.quickview.add', (event) => {
  const { product, smartSearchQuickView } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was added |
| `smartSearchQuickView` | object | The Quick View instance |

### View

Triggers when a user clicks on a product from Quick View (image, title, or learn more link).

```javascript
document.addEventListener('rebuy:smartsearch.quickview.view', (event) => {
  const { product, smartSearchQuickView } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being viewed |
| `smartSearchQuickView` | object | The Quick View instance |

### Before Products Change

Triggers before search results are updated based on the search term.

```javascript
document.addEventListener('rebuy:smartsearch.quickview.beforeProductsChange', (event) => {
  const { products, smartSearchQuickView } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The current products before the change |
| `smartSearchQuickView` | object | The Quick View instance |

### Products Change

Triggers when new search results are returned.

```javascript
document.addEventListener('rebuy:smartsearch.quickview.productsChange', (event) => {
  const { products, smartSearchQuickView } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The new array of products |
| `smartSearchQuickView` | object | The Quick View instance |

---

## Results Page

Events for the dedicated search results page.

### Init

Triggers when Smart Search Results Page settings are found and initialization begins.

```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.init', (event) => {
  const { smartSearchResultsPage } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartSearchResultsPage` | object | The Results Page instance |

### Before Ready

Triggers just before Smart Search Results Page becomes ready.

```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.beforeReady', () => {
  // Your logic here
});
```

#### Payload

This event does not include a payload.

### Ready

Triggers when Smart Search Results Page is fully initialized and ready.

```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.ready', (event) => {
  const { smartSearchResultsPage } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartSearchResultsPage` | object | The Results Page instance |

### Before Add

Triggers before a product is added to the cart from the Results Page.

```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.beforeAdd', (event) => {
  const { product, smartSearchResultsPage } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being added |
| `smartSearchResultsPage` | object | The Results Page instance |

### Add

Triggers when a product is added to the cart from the Results Page.

```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.add', (event) => {
  const { product, smartSearchResultsPage } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was added |
| `smartSearchResultsPage` | object | The Results Page instance |

### View

Triggers when a user clicks on a product from the Results Page (image, title, or learn more link).

```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.view', (event) => {
  const { product, smartSearchResultsPage } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being viewed |
| `smartSearchResultsPage` | object | The Results Page instance |

### Before Products Change

Triggers before search results are updated based on the search term.

```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.beforeProductsChange', (event) => {
  const { products, smartSearchResultsPage } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The current products before the change |
| `smartSearchResultsPage` | object | The Results Page instance |

### Products Change

Triggers when new search results are returned.

```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.productsChange', (event) => {
  const { products, smartSearchResultsPage } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The new array of products |
| `smartSearchResultsPage` | object | The Results Page instance |

## Related

- [Widget Event Listeners](widget-event-listeners.md) - Events for recommendation widgets
- [Cart Event Listeners](cart-event-listeners.md) - Events for the cart object

---

# Settings Methods (932B)

Source: https://developers.rebuyengine.com/reference/smart-search-settings-methods.md

All methods below are as if the Smart Search object has a reference variable defined as shown in this code snippet.

```javascript title="Smart Search reference"
const SmartSearch = window.Rebuy.SmartSearch;
```

*This is not a complete list of the globally available function but the ones that we find most helpful.*

<br />

<br />

## Overview

## getQuickViewSettings

Returns the Quick View settings object or error if data not found.

**Kind**: global constant\
**Returns**: `Object | error` ## getCombinedSearchSettings

Returns the entire Combined Search data including Results Page settings and Quick View settings object. Error if data not found.

**Kind**: global constant\
**Returns**: `Object | error`

---

# Quick View (57.8KB)

Source: https://developers.rebuyengine.com/reference/quick-view.md

## Quick View Custom Templates

To use this template, create a new snippet (typically named 'rebuy-quick-view-template') and paste the below code there. Then, in the theme.liquid file, render this snippet with {% render 'rebuy-quick-view-template' %} just above the bottom of the closing body tag.  We wrap the template with {% raw %} {% endraw %} so that the double curly brace syntax of Vue.js does not get parsed as liquid. Sometimes, developers will need to access other liquid snippets. To do this, you can end the raw portion when needed and begin the raw portion once done with liquid code.

When Rebuy loads in it will search to see if there is a custom template in the theme code and if so it will use this instead of the standard template that loads in with Rebuy.

### Quick View Dropdown Template

```html title="Last Updated: January 21, 2026"
{% raw %}
<script id="rebuy-quick-view-dropdown-search-template" type="text/template">
<div id="rebuy-quick-view-dropdown-search" class="rebuy-quick-view-dropdown">
        <div class="rebuy-quick-view-dropdown__container" v-bind:class="[isQuickViewOpen ? 'visible' : '']">
            <div class="rebuy-quick-view-dropdown__input-container">
                <div class="rebuy-quick-view__search-input rebuy-quick-view-dropdown__search-input rebuy-input">
                    <label v-if="searchByCollectionsEnabled" for="search" class="sr-only">Search by Collections</label>
                    <select
                        v-if="searchByCollectionsEnabled"
                        name="search"
                        class="rebuy-select"
                        id="search"
                        v-model="searchByCollection"
                    >
                        <option :value="SEARCH_BY_COLLECTION_DEFAULT">All</option>
                        <option v-for="{ name, id } in searchByCollectionsCollections" :value="id">{{name}}</option>
                    </select>

                    <rebuy-icon name="search" class="rebuy-icon-wrapper--inline"></rebuy-icon>
                    <label for="searchInput" class="sr-only">Enter a Search Term</label>
                    <input
                        id="searchInput"
                        :class="(searchByCollectionsEnabled) && 'right-rounded'"
                        type="text"
                        :placeholder="placeholderText()"
                        :value="searchTerm"
                        @input="($event) => searchTerm = $event.target.value"
                        ref="searchInput"
                        @keydown.enter.stop.prevent="goToSearchPage"
                        @keydown.escape.stop.prevent="closeQuickView"
                    />
                </div>

                <button
                    class="rebuy-quick-view-dropdown__close"
                    type="button"
                    v-on:click="closeQuickView()"
                    aria-label="Close Dropdown"
                >
                    <rebuy-icon name="x"></rebuy-icon>
                </button>
            </div>

            <transition name="rebuy-quick-view-overlay-fade">
                <div
                    v-if="shouldDropdownShow"
                    id="rebuy-quick-view-overlay"
                    class="rebuy-quick-view__overlay rebuy-quick-view__overlay--wide"
                    role="dialog"
                    tabindex="1"
                    aria-labelledby="overlayTitle"
                    aria-describedby="overlayDescription"
                    ref="overlay"
                >
                    <section class="rebuy-quick-view__overlay-body" id="overlayDescription">
                        <div class="rebuy-quick-view__container">
                            <div
                                v-if="!showResults"
                                class="rebuy-quick-view__suggestions rebuy-quick-view-dropdown__suggestions"
                            >
                                <div
                                    v-if="suggestedSearchTermsEnabled && suggestedTerms.length > 0"
                                    class="rebuy-quick-view-dropdown__body-left"
                                    tabindex="0"
                                >
                                    <div class="rebuy-quick-view__search-term-section">
                                        <h3 class="rebuy-quick-view__title">{{suggestedSearchTermsTitle}}</h3>

                                        <ul class="rebuy-quick-view__search-term-section-list-container">
                                            <li
                                                class="rebuy-quick-view__list-item rebuy-quick-view__search-term-section-list-term"
                                                v-for="term in suggestedTerms"
                                                @click="search(term)"
                                                role="button"
                                                tabindex="0"
                                                v-bind:aria-label="suggestedSearchTermLabel(term)"
                                            >
                                                {{term}}
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="rebuy-quick-view-dropdown__body-right">
                                    <div
                                        v-if="suggestedSearchTermsEnabled && suggestedTerms.length > 0"
                                        class="rebuy-quick-view__search-term-section rebuy-quick-view-dropdown__search-term-section--mobile"
                                    >
                                        <h3 class="rebuy-quick-view__title rebuy-quick-view-dropdown__title">
                                            {{suggestedSearchTermsTitle}}
                                        </h3>

                                        <ul class="rebuy-quick-view__list-items rebuy-quick-view-dropdown__search-term-list">
                                            <li class="rebuy-quick-view__list-item rebuy-quick-view-dropdown__search-term" v-for="term in suggestedTerms" @click.stop="search(term)">{{term}}</li>
                                        </ul>
                                    </div>

                                    <div
                                        v-if="suggestedCollectionsEnabled && displayedSuggestedCollections.length > 0"
                                        class="rebuy-quick-view__collection-section"
                                    >
                                        <h3 class="rebuy-quick-view__title rebuy-quick-view-dropdown__title">
                                            {{suggestedCollectionsTitle}}
                                        </h3>

                                        <div class="rebuy-quick-view__list-items rebuy-quick-view__collection-list">
                                            <a
                                                v-for="collection in displayedSuggestedCollections"
                                                class="rebuy-quick-view__list-item rebuy-quick-view__collection"
                                                :href="collectionHref(collection)"
                                            >
                                                {{collection.name}}
                                            </a>

                                            <button
                                                v-if="limitDisplayedCollections && suggestedCollections.length > AMOUNT_FOR_LIMITED_COLLECTIONS"
                                                class="see-more"
                                                @click.stop.prevent="seeMore"
                                            >
                                                See more &mldr;
                                            </button>
                                        </div>
                                    </div>

                                    <div
                                        v-if="suggestedProductsEnabled && suggestedProducts.length > 0"
                                        class="rebuy-quick-view__product-section"
                                    >
                                        <h3 class="rebuy-quick-view__title rebuy-quick-view-dropdown__title">
                                            {{suggestedProductsTitle}}
                                        </h3>

                                        <div
                                            class="rebuy-quick-view__product-list rebuy-quick-view-dropdown__product-list"
                                            :class="productListColumnClass"
                                        >
                                            <div
                                                v-for="(product, index) in suggestedProducts"
                                                :class="productDisplayType"
                                            >
                                                <a
                                                    :href="learnMoreURL(product)"
                                                    @click="learnMore(product, index)"
                                                    class="rebuy-quick-view__image-link rebuy-smart-search__absolute-image-container"
                                                    :class="shouldPositionAbsolute('container')"
                                                    :style="productImageRatio()"
                                                    rel="nofollow"
                                                >
                                                    <img
                                                        v-bind:src="productImage(product, product.selected_variant)"
                                                        v-bind:srcset="generateImgSrcset(product)"
                                                        v-bind:alt="product.name"
                                                        class="rebuy-quick-view_image rebuy-smart-search__absolute-image--zoomed rebuy-smart-search__absolute-image"
                                                        :class="shouldPositionAbsolute('image')"
                                                    />
                                                </a>

                                                <div class="rebuy-quick-view__product-detail">
                                                    <div class="rebuy-product-info">
                                                        <!-- Product Title -->
                                                        <a
                                                            class="rebuy-product-title"
                                                            :href="learnMoreURL(product)"
                                                            @click="learnMore(product, index)"
                                                            rel="nofollow"
                                                        >
                                                            {{product.name}}
                                                        </a>

                                                        <!-- Product Review -->
                                                        <div class="rebuy-product-review" v-if="shouldDisplayQuickViewProductRating(product)" aria-label="product star rating">
                                                            <span class="rebuy-star-rating">
                                                                <span
                                                                    v-if="product.reviews.star_rating"
                                                                    class="rebuy-star-rating-value sr-only"
                                                                    v-html="product.ratings.average + ' stars out of 5 stars'"
                                                                >
                                                                </span>
                                                                <span class="rebuy-star-rating-background"></span>
                                                                <span class="rebuy-star-rating-foreground" v-bind:style="{ width: getProductReviewRatingPercentage(product) }"></span>
                                                            </span>

                                                            <span class="rebuy-review-count" v-html="getProductReviewCountHtml(product)"></span>
                                                        </div>

                                                        <!-- Product Price -->
                                                        <div v-if="productOnSale(product)" class="price">
                                                            <span class="rebuy-money sale">
                                                                <span class="sr-only">Sale price</span>
                                                                <span
                                                                    v-html="formatMoney(product.selected_variant.price)"
                                                                ></span>
                                                            </span>

                                                            <span class="rebuy-money compare-at">
                                                                <span class="sr-only">Original price</span>
                                                                <span
                                                                    v-html="formatMoney(product.selected_variant.compareAtPrice)"
                                                                ></span>
                                                            </span>
                                                        </div>

                                                        <div v-else class="price">
                                                            <span class="rebuy-money">
                                                                <span class="sr-only">Price</span>
                                                                <span
                                                                    v-html="formatMoney(product.selected_variant.price)"
                                                                ></span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="rebuy-product-options"
                                                        v-if="shouldShowVariantSelector(product)"
                                                    >
                                                        <select
                                                            title="Select product variant"
                                                            id="rebuy-smart-search-results-variant-select"
                                                            class="rebuy-select"
                                                            v-bind:aria-label="'variant of ' + product.name"
                                                            v-model="product.selected_variant_id"
                                                            v-on:change="selectVariant(product)"
                                                        >
                                                            <option
                                                                v-for="variant in product.variants"
                                                                v-bind:value="variant.id"
                                                                v-html="variant.name"
                                                            ></option>
                                                        </select>
                                                    </div>

                                                    <div
                                                        class="rebuy-product-actions"
                                                        v-if="shouldShowAddToCart(product)"
                                                    >
                                                        <button
                                                            class="rebuy-button rebuy-quick-view__product-cta"
                                                            v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                                                            v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                                                            v-bind:aria-label="buttonAriaLabel(product)"
                                                            v-on:click="addToCart(product)"
                                                            type="button"
                                                        >
                                                            <span v-html="buttonLabel(product)"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-else class="rebuy-quick-view-dropdown__results">
                                <div
                                    class="rebuy-quick-view__keywords-section"
                                    v-if="keywordSuggestionsWithSearchTerm.length > 0"
                                >
                                    <p class="rebuy-quick-view__keyword-title">Suggested Searches</p>

                                    <div class="rebuy-quick-view__keyword-list">
                                        <p
                                            v-for="keyword in keywordSuggestionsWithSearchTerm"
                                            class="rebuy-quick-view__keyword"
                                            @click.stop="search(keyword)"
                                        >
                                            {{keyword}}
                                        </p>
                                    </div>
                                </div>

                                <div
                                    class="rebuy-quick-view__collection-section"
                                    v-if="this.matchingCollectionsEnabled && collections.length > 0"
                                >
                                    <p class="rebuy-quick-view__title">{{this.matchingCollectionsTitle}}</p>

                                    <div v-if="quickViewSearchLoading" class="rebuy-quick-view__collection-list">
                                        <div
                                            v-for="loadingCollection in new Array(breakpointColumns)"
                                            class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__collection"
                                        />
                                    </div>

                                    <div v-else class="rebuy-quick-view__collection-list">
                                        <a
                                            v-for="collection in displayedMatchingCollections"
                                            class="rebuy-quick-view__collection"
                                            :href="collectionHref(collection)"
                                        >
                                            {{collection.name}}
                                        </a>

                                        <button
                                            v-if="limitDisplayedCollections && collections.length > AMOUNT_FOR_LIMITED_COLLECTIONS"
                                            class="see-more"
                                            @click.stop.prevent="seeMore"
                                        >
                                            See more &mldr;
                                        </button>
                                    </div>
                                </div>

                                <div
                                    class="rebuy-quick-view__product-section"
                                    v-if="this.matchingProductsEnabled && products.length > 0"
                                >
                                    <p class="rebuy-quick-view__title">{{this.matchingProductsTitle}}</p>

                                    <div
                                        v-if="quickViewSearchLoading"
                                        class="rebuy-quick-view__product-list"
                                        :class="productListColumnClass"
                                    >
                                        <div
                                            v-for="product in Array(breakpointColumns)"
                                            class="rebuy-quick-view__product"
                                            :class="skeletonLayout()"
                                        >
                                            <div
                                                class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__product-image"
                                            />

                                            <div class="rebuy-quick-view-skeleton__product-details">
                                                <div
                                                    class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__product-name"
                                                />
                                                <div
                                                    class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__product-price"
                                                />
                                            </div>

                                        </div>
                                    </div>

                                    <div
                                        v-else-if="!quickViewSearchLoading"
                                        class="rebuy-quick-view__product-list"
                                        :class="productListColumnClass"
                                    >
                                        <div v-for="(product, index) in products" :class="productDisplayType">
                                            <a
                                                :href="learnMoreURL(product)"
                                                @click="learnMore(product, index)"
                                                class="rebuy-quick-view__image-link rebuy-smart-search__absolute-image-container"
                                                :class="shouldPositionAbsolute('container')"
                                                :style="productImageRatio()"
                                                rel="nofollow"
                                            >
                                                <img
                                                    v-bind:src="productImage(product, product.selected_variant)"
                                                    v-bind:srcset="generateImgSrcset(product)"
                                                    v-bind:alt="'Image of ' + product.name"
                                                    class="rebuy-quick-view_image rebuy-smart-search__absolute-image--zoomed rebuy-smart-search__absolute-image"
                                                    :class="shouldPositionAbsolute('image')"
                                                />
                                            </a>

                                            <div class="rebuy-quick-view__product-detail">
                                                <div class="rebuy-product-info">
                                                    <!-- Product Title -->
                                                    <a
                                                        class="rebuy-product-title"
                                                        :href="learnMoreURL(product)"
                                                        @click="learnMore(product, index)"
                                                        rel="nofollow"
                                                    >
                                                        {{product.name}}
                                                    </a>

                                                    <!-- Product Review -->
                                                    <div class="rebuy-product-review" v-if="shouldDisplayQuickViewProductRating(product)" aria-label="product star rating">
                                                        <span class="rebuy-star-rating">
                                                            <span
                                                                v-if="product.reviews.star_rating"
                                                                class="rebuy-star-rating-value sr-only"
                                                                v-html="product.ratings.average + ' stars out of 5 stars'"
                                                            >
                                                            </span>
                                                            <span class="rebuy-star-rating-background"></span>
                                                            <span class="rebuy-star-rating-foreground" v-bind:style="{ width: getProductReviewRatingPercentage(product) }"></span>
                                                        </span>

                                                        <span class="rebuy-review-count" v-html="getProductReviewCountHtml(product)"></span>
                                                    </div>

                                                    <div v-if="productOnSale(product)" class="price">
                                                        <span class="rebuy-money sale">
                                                            <span class="sr-only">Sale price</span>
                                                            <span
                                                                v-html="formatMoney(product.selected_variant.price)"
                                                            ></span>
                                                        </span>

                                                        <span class="rebuy-money compare-at">
                                                            <span class="sr-only">Original price</span>
                                                            <span
                                                                v-html="formatMoney(product.selected_variant.compareAtPrice)"
                                                            ></span>
                                                        </span>
                                                    </div>

                                                    <div v-else class="price">
                                                        <span class="rebuy-money">
                                                            <span class="sr-only">Price</span>
                                                            <span
                                                                v-html="formatMoney(product.selected_variant.price)"
                                                            ></span>
                                                        </span>
                                                    </div>
                                                </div>

                                                <!-- Product Options -->
                                                <div
                                                    class="rebuy-product-options"
                                                    v-if="shouldShowVariantSelector(product)"
                                                >
                                                    <select
                                                        title="Select product variant"
                                                        id="rebuy-smart-search-results-variant-select"
                                                        class="rebuy-select"
                                                        v-bind:aria-label="'variant of ' + product.name"
                                                        v-model="product.selected_variant_id"
                                                        v-on:change="selectVariant(product)"
                                                    >
                                                        <option
                                                            v-for="variant in product.variants"
                                                            v-bind:value="variant.id"
                                                            v-html="variant.name"
                                                        ></option>
                                                    </select>
                                                </div>

                                                <!-- Add-to-cart -->
                                                <div class="rebuy-product-actions" v-if="shouldShowAddToCart(product)">
                                                    <button
                                                        class="rebuy-button rebuy-quick-view__product-cta"
                                                        v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                                                        v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                                                        v-bind:aria-label="buttonAriaLabel(product)"
                                                        v-on:click="addToCart(product)"
                                                        type="button"
                                                    >
                                                        <span v-html="buttonLabel(product)"></span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div
                                    v-if="!quickViewSearchLoading && products.length === 0 && collections.length === 0"
                                    class="rebuy-quick-view__no-results"
                                >
                                    <p>No Results For [<span>{{searchTerm}}</span>]</p>
                                </div>
                            </div>
                        </div>

                        <div v-if="shouldShowPoweredByRebuy()" class="powered-by-rebuy">
                            <a v-bind:href="'https://rebuyengine.com/?shop=' + shop()" target="_blank" rel="noopener">
                                Powered by Rebuy
                            </a>
                        </div>
                    </section>
                </div>
            </transition>
        </div>
    </div>
</script>
{% endraw %}
```

<br />

### Quick View Flyout Template

```html title="Last Updated: January 21, 2026"
{% raw %}
<script id="rebuy-quick-view-flyout-search-template" type="text/template">
    <div
        id="rebuy-quick-view-flyout-search"
        class="rebuy-quick-view-sidebar"
        :class="{ 'is-visible': isQuickViewOpen }"
        role="dialog"
        aria-modal="true"
        :aria-hidden="!isQuickViewOpen ? 'true' : 'false'"
    >
        <div class="rebuy-quick-view-flyout__flyout" :class="[{ 'is-visible': isQuickViewOpen }, flyoutModeSide]">
            <div class="rebuy-quick-view__container rebuy-quick-view-flyout__flyout-container">
                <div class="rebuy-quick-view__search-header rebuy-quick-view-flyout__search-header">
                    <button
                        type="button"
                        class="rebuy-quick-view__close-button"
                        @click.stop="closeQuickView"
                        aria-label="Close Cart"
                    >
                        <rebuy-icon name="x"></rebuy-icon>
                    </button>

                    <form
                        class="rebuy-quick-view__search-input rebuy-quick-view-flyout__search-input rebuy-input"
                        @submit.stop.prevent="goToSearchPage"
                        >
                        <label v-if="searchByCollectionsEnabled" for="search" class="sr-only">Search by Collections</label>
                        <select
                            v-if="searchByCollectionsEnabled"
                            name="search"
                            id="search"
                            v-model="searchByCollection"
                        >
                            <option :value="SEARCH_BY_COLLECTION_DEFAULT">All</option>
                            <option v-for="{ name, id } in searchByCollectionsCollections" :value="id">{{name}}</option>
                        </select>

                        <rebuy-icon name="search" class="rebuy-icon-wrapper--inline"></rebuy-icon>
                        <label for="searchInput" class="sr-only">Enter a Search Term</label>
                        <input
                            id="searchInput"
                            :class="(searchByCollectionsEnabled)"
                            type="text"
                            :placeholder="placeholderText()"
                            :value="searchTerm"
                            @input="($event) => searchTerm = $event.target.value"
                            ref="searchInput"
                            @keydown.escape.stop.prevent="closeQuickView"
                        />
                    </form>
                </div>

                <div class="rebuy-quick-view__body rebuy-quick-view-flyout__body">
                    <div v-if="!showResults" class="rebuy-quick-view__suggestions-vertical">
                        <div
                            v-if="suggestedCollectionsEnabled && suggestedCollections.length > 0"
                            class="rebuy-quick-view__collection-section"
                        >
                            <h3 class="rebuy-quick-view__subject-title">{{suggestedCollectionsTitle}}</h3>

                            <div class="rebuy-quick-view__collection-list">
                                <a
                                    v-for="collection in displayedSuggestedCollections"
                                    class="rebuy-quick-view__collection"
                                    :href="collectionHref(collection)"
                                >
                                    {{collection.name}}
                                </a>

                                <button
                                    v-if="limitDisplayedCollections && suggestedCollections.length > AMOUNT_FOR_LIMITED_COLLECTIONS"
                                    class="see-more"
                                    @click.stop.prevent="seeMore"
                                >
                                    See more &mldr;
                                </button>
                            </div>
                        </div>

                        <div
                            v-if="suggestedSearchTermsEnabled && suggestedTerms.length > 0"
                            class="rebuy-quick-view__search-term-section"
                        >
                            <h3 class="rebuy-quick-view__subject-title">{{suggestedSearchTermsTitle}}</h3>

                            <ul class="rebuy-quick-view__list-items">
                                <li
                                    class="rebuy-quick-view__list-item"
                                    v-for="term in suggestedTerms"
                                    @click.stop="search(term)"
                                >
                                    {{term}}
                                </li>
                            </ul>
                        </div>

                        <div
                            v-if="suggestedProductsEnabled && suggestedProducts.length > 0"
                            class="rebuy-quick-view__product-section"
                        >
                            <h3 class="rebuy-quick-view__subject-title">{{suggestedProductsTitle}}</h3>

                            <div
                                class="rebuy-quick-view__product-list rebuy-quick-view-flyout__product-list"
                                :class="productListColumnClass"
                            >
                                <div v-for="(product, index) in suggestedProducts" :class="productDisplayType">
                                    <a
                                        :href="learnMoreURL(product)"
                                        @click="learnMore(product, index)"
                                        class="rebuy-quick-view__image-link rebuy-smart-search__absolute-image-container"
                                        :class="shouldPositionAbsolute('container')"
                                        :style="productImageRatio()"
                                        rel="nofollow"
                                    >
                                        <img
                                            v-bind:src="productImage(product, product.selected_variant)"
                                            v-bind:srcset="generateImgSrcset(product)"
                                            v-bind:alt="'Image of ' + product.name"
                                            class="rebuy-quick-view_image rebuy-smart-search__absolute-image--zoomed rebuy-smart-search__absolute-image"
                                            :class="shouldPositionAbsolute('image')"
                                        />
                                    </a>

                                    <div class="rebuy-quick-view__product-detail">
                                        <div class="rebuy-product-info">
                                            <!-- Product Title -->
                                            <a
                                                class="rebuy-product-title"
                                                :href="learnMoreURL(product)"
                                                @click="learnMore(product, index)"
                                                rel="nofollow"
                                            >
                                                {{product.name}}
                                            </a>

                                            <!-- Product Review -->
                                            <div class="rebuy-product-review" v-if="shouldDisplayQuickViewProductRating(product)" aria-label="product star rating">
                                                <span class="rebuy-star-rating">
                                                    <span
                                                        v-if="product.reviews.star_rating"
                                                        class="rebuy-star-rating-value sr-only"
                                                        v-html="product.ratings.average + ' stars out of 5 stars'"
                                                    >
                                                    </span>
                                                    <span class="rebuy-star-rating-background"></span>
                                                    <span class="rebuy-star-rating-foreground" v-bind:style="{ width: getProductReviewRatingPercentage(product) }"></span>
                                                </span>

                                                <span class="rebuy-review-count" v-html="getProductReviewCountHtml(product)"></span>
                                            </div>

                                            <div v-if="productOnSale(product)" class="price">
                                                <span class="rebuy-money sale">
                                                    <span class="sr-only">Sale price</span>
                                                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                                                </span>

                                                <span class="rebuy-money compare-at">
                                                    <span class="sr-only">Original price</span>
                                                    <span
                                                        v-html="formatMoney(product.selected_variant.compareAtPrice)"
                                                    ></span>
                                                </span>
                                            </div>

                                            <div v-else class="price">
                                                <span class="rebuy-money">
                                                    <span class="sr-only">Price</span>
                                                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="rebuy-product-options" v-if="shouldShowVariantSelector(product)">
                                            <select
                                                title="Select product variant"
                                                id="rebuy-smart-search-results-variant-select"
                                                class="rebuy-select"
                                                v-bind:aria-label="'variant of ' + product.name"
                                                v-model="product.selected_variant_id"
                                                v-on:change="selectVariant(product)"
                                            >
                                                <option
                                                    v-for="variant in product.variants"
                                                    v-bind:value="variant.id"
                                                    v-html="variant.name"
                                                ></option>
                                            </select>
                                        </div>

                                        <div class="rebuy-product-actions" v-if="shouldShowAddToCart(product)">
                                            <button
                                                class="rebuy-button rebuy-quick-view__product-cta"
                                                v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                                                v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                                                v-bind:aria-label="buttonAriaLabel(product)"
                                                v-on:click="addToCart(product)"
                                                type="button"
                                            >
                                                <span v-html="buttonLabel(product)"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-else class="rebuy-quick-view__results">
                        <div
                            class="rebuy-quick-view__keywords-section"
                            v-if="keywordSuggestionsWithSearchTerm.length > 0"
                        >
                            <p class="rebuy-quick-view__keyword-title">Suggested Searches</p>

                            <div class="rebuy-quick-view__keyword-list">
                                <p
                                    v-for="keyword in keywordSuggestionsWithSearchTerm"
                                    class="rebuy-quick-view__keyword"
                                    @click.stop="search(keyword)"
                                >
                                    {{keyword}}
                                </p>
                            </div>
                        </div>

                        <div
                            class="rebuy-quick-view__collection-section"
                            v-if="this.matchingCollectionsEnabled && collections.length > 0"
                        >
                            <p class="rebuy-quick-view__title">{{this.matchingCollectionsTitle}}</p>

                            <div v-if="quickViewSearchLoading" class="rebuy-quick-view__collection-list">
                                <div class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__collection" />

                                <div class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__collection" />
                            </div>

                            <div v-if="!quickViewSearchLoading" class="rebuy-quick-view__collection-list">
                                <a
                                    v-for="collection in displayedMatchingCollections"
                                    class="rebuy-quick-view__collection"
                                    :class="productListColumnClass"
                                    :href="collectionHref(collection)"
                                >
                                    {{collection.name}}
                                </a>

                                <button
                                    v-if="limitDisplayedCollections && collections.length > AMOUNT_FOR_LIMITED_COLLECTIONS"
                                    class="see-more"
                                    @click.stop.prevent="seeMore"
                                >
                                    See more &mldr;
                                </button>
                            </div>
                        </div>

                        <div
                            class="rebuy-quick-view__product-section"
                            v-if="this.matchingProductsEnabled && products.length > 0"
                        >
                            <p class="rebuy-quick-view__title">{{this.matchingProductsTitle}}</p>

                            <div
                                class="rebuy-quick-view__product-list rebuy-quick-view__product-grid-column-2"
                                v-if="quickViewSearchLoading"
                            >
                                <div class="rebuy-quick-view__product">
                                    <div class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__product-image" />
                                    <div class="rebuy-quick-view-skeleton__product-details">
                                        <div
                                            class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__product-name"
                                        />
                                        <div
                                            class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__product-price"
                                        />
                                    </div>
                                </div>

                                <div class="rebuy-quick-view__product">
                                    <div class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__product-image" />
                                    <div class="rebuy-quick-view-skeleton__product-details">
                                        <div
                                            class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__product-name"
                                        />
                                        <div
                                            class="rebuy-quick-view-skeleton rebuy-quick-view-skeleton__product-price"
                                        />
                                    </div>
                                </div>
                            </div>

                            <div
                                v-if="!quickViewSearchLoading"
                                class="rebuy-quick-view__product-list rebuy-quick-view-flyout__product-list"
                                :class="productListColumnClass"
                            >
                                <div v-for="(product, index) in products" :class="productDisplayType">
                                    <a
                                        :href="learnMoreURL(product)"
                                        @click="learnMore(product, index)"
                                        class="rebuy-quick-view__image-link rebuy-smart-search__absolute-image-container"
                                        :class="shouldPositionAbsolute('container')"
                                        :style="productImageRatio()"
                                        rel="nofollow"
                                    >
                                        <img
                                            v-bind:src="productImage(product, product.selected_variant)"
                                            v-bind:srcset="generateImgSrcset(product)"
                                            v-bind:alt="'Image of ' + product.name"
                                            class="rebuy-quick-view_image rebuy-smart-search__absolute-image--zoomed rebuy-smart-search__absolute-image"
                                            :class="shouldPositionAbsolute('image')"
                                        />
                                    </a>

                                    <div class="rebuy-quick-view__product-detail">
                                        <div class="rebuy-product-info">
                                            <!-- Product Title -->
                                            <a
                                                class="rebuy-product-title"
                                                :href="learnMoreURL(product)"
                                                @click="learnMore(product, index)"
                                                rel="nofollow"
                                            >
                                                {{product.name}}
                                            </a>

                                            <!-- Product Review -->
                                            <div class="rebuy-product-review" v-if="shouldDisplayQuickViewProductRating(product)" aria-label="product star rating">
                                                <span class="rebuy-star-rating">
                                                    <span
                                                        v-if="product.reviews.star_rating"
                                                        class="rebuy-star-rating-value sr-only"
                                                        v-html="product.ratings.average + ' stars out of 5 stars'"
                                                    >
                                                    </span>
                                                    <span class="rebuy-star-rating-background"></span>
                                                    <span class="rebuy-star-rating-foreground" v-bind:style="{ width: getProductReviewRatingPercentage(product) }"></span>
                                                </span>

                                                <span class="rebuy-review-count" v-html="getProductReviewCountHtml(product)"></span>
                                            </div>

                                            <div v-if="productOnSale(product)" class="price">
                                                <span class="rebuy-money sale">
                                                    <span class="sr-only">Sale price</span>
                                                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                                                </span>

                                                <span class="rebuy-money compare-at">
                                                    <span class="sr-only">Original price</span>
                                                    <span
                                                        v-html="formatMoney(product.selected_variant.compareAtPrice)"
                                                    ></span>
                                                </span>
                                            </div>

                                            <div v-else class="price">
                                                <span class="rebuy-money">
                                                    <span class="sr-only">Price</span>
                                                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                                                </span>
                                            </div>
                                        </div>

                                        <!-- Product Options -->
                                        <div class="rebuy-product-options" v-if="shouldShowVariantSelector(product)">
                                            <select
                                                title="Select product variant"
                                                id="rebuy-smart-search-results-variant-select"
                                                class="rebuy-select"
                                                v-bind:aria-label="'variant of ' + product.name"
                                                v-model="product.selected_variant_id"
                                                v-on:change="selectVariant(product)"
                                            >
                                                <option
                                                    v-for="variant in product.variants"
                                                    v-bind:value="variant.id"
                                                    v-html="variant.name"
                                                ></option>
                                            </select>
                                        </div>

                                        <!-- Add-to-cart -->
                                        <div class="rebuy-product-actions" v-if="shouldShowAddToCart(product)">
                                            <button
                                                class="rebuy-button rebuy-quick-view__product-cta"
                                                v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                                                v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                                                v-bind:aria-label="buttonAriaLabel(product)"
                                                v-on:click="addToCart(product)"
                                                type="button"
                                            >
                                                <span v-html="buttonLabel(product)"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div
                            v-if="!quickViewSearchLoading && products.length === 0 && collections.length === 0"
                            class="rebuy-quick-view__no-results"
                        >
                            <p>No Results For [<span>{{searchTerm}}</span>]</p>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="shouldShowPoweredByRebuy()" class="powered-by-rebuy">
                <a v-bind:href="'https://rebuyengine.com/?shop=' + shop()" target="_blank" rel="noopener">
                    Powered by Rebuy
                </a>
            </div>
        </div>

        <div class="rebuy-quick-view-flyout__background" v-on:click="closeQuickView">
            <span></span>
        </div>

        <div class="rebuy-quick-view-flyout__live-region sr-only" aria-live="polite"></div>
    </div>
</script>
{% endraw %}

```

**NOTE:** Quick View templates change regularly, so check back often to ensure that you have updated to the newest version and can take advantage of the most up-to-date Smart Search Quick View features and functionality.

---

# Quick View Methods (7.3KB)

Source: https://developers.rebuyengine.com/reference/quick-view-methods.md

All methods below are as if the Smart Search object has a reference variable defined as shown in this code snippet.

```javascript
const QuickView = window.Rebuy.SmartSearch.quickView.view;
```

## Lifecycle Methods

### `created()`

Initializes the component, sets up event listeners, debounced handlers, and loads collections if search by collections is enabled.

### `mounted()`

Sets up click event listeners for search triggers, adjusts dropdown height, and initializes overlay functionality.

### `destroyed()`

Cleans up event listeners, aborts pending requests, and removes DOM event handlers.

## Core Functionality

### `openQuickView(event)`

Opens the quick view search interface, sets focus, and triggers search session tracking.

### `closeQuickView()`

Closes the quick view, restores body scroll, removes focus trapping, and restores previous active element.

### `clickaway(event)`

Handles clicks outside the quick view to close it when appropriate.

## Search Functionality

### `search(searchTerm)`

Sets the search term and focuses the search input.

### `debounceQuickSearch(query)`

Performs the actual search API call with debouncing, handles both lexical and hybrid search modes.

### `checkTermForKeyword(searchTerm)`

Checks if the search term matches any configured keywords and sets redirect URL if found.

### `goToSearchPage()`

Redirects to search results page or keyword redirect URL if configured.

### `trackSearchTerm()`

Tracks search events and user behavior analytics.

### `onSearchFocus()`

Legacy method for search focus handling (currently empty).

## Collection Management

### `getCollections(currentPage, limit)`

Fetches collections from the API for search by collection functionality.

### `seeMore()`

Expands the displayed collections beyond the limited view.

### `collectionHref(collection)`

Generates the URL for a collection page.

## Product Display

### `shouldDisplayQuickViewProductRating(product)`

Determines if product ratings should be displayed based on settings.

### `productOnSale(product)`

Checks if a product is on sale by comparing prices.

### `productImage(product, variant)`

Returns the appropriate product image URL for display.

### `learnMore(product, index)`

Handles navigation to product detail page with tracking.

### `learnMoreURL(product)`

Generates the URL for product detail page with discovery parameters.

## Cart Functionality

### `shouldShowAddToCart()`

Determines if add to cart functionality should be displayed.

### `shouldShowVariantSelector(product)`

Checks if variant selector should be shown for a product.

### `selectVariant(product)`

Updates the selected variant for a product and refreshes the display.

### `selectOptionsForVariant(product)`

Sets the selected options based on the chosen variant.

### `variantAvailable(variant)`

Checks if a variant is available for purchase.

### `buttonLabel(product)`

Returns the appropriate button text based on product status and settings.

### `buttonAriaLabel(product)`

Generates accessibility label for add to cart button.

### `addToCart(product)`

Adds the selected product variant to the cart with tracking.

## UI and Layout

### `configureBreakpoints()`

Sets responsive breakpoints based on screen width for column layout.

### `adjustDropdownHeight()`

Adjusts the dropdown height based on viewport size.

### `productImageRatio()`

Sets the aspect ratio for product images based on layout settings.

### `suggestedSearchTermLabel(term)`

Generates accessibility label for suggested search terms.

## Utility Methods

### `amount(price)`

Formats price as a number with proper decimal formatting.

### `formatMoney(amount)`

Formats monetary amounts using the Money utility.

### `placeholderText()`

Returns the search input placeholder text from settings.

### `shouldShowPoweredByRebuy()`

Determines if "Powered by Rebuy" branding should be displayed.

### `shop()`

Returns the current shop domain.

### `shouldPositionAbsolute(type)`

Returns CSS classes for absolute positioning based on product layout.

### `skeletonLayout()`

Returns the appropriate skeleton loading class based on product layout.

## Wrapped Utility Methods

### `generateImgSrcset`

Wrapped utility for generating responsive image srcset attributes.

### `getProductReviewCountHtml`

Wrapped utility for generating HTML for product review counts.

### `getProductReviewRatingPercentage`

Wrapped utility for calculating product review rating percentages.

## Watchers

### `showResults`

Resets collection display limit when showing results.

### `searchTerm`

Triggers search when term length exceeds 2 characters.

### `searchByCollection`

Triggers search when collection filter changes.

### `isQuickViewOpen`

Handles focus management when quick view opens/closes.

## Computed Properties

### `editorLayout`

Returns the editor layout configuration.

### `searchByCollectionsEnabled`

Checks if search by collections feature is enabled.

### `isDropdownEnabled`

Checks if dropdown layout is enabled.

### `isFlyoutEnabled`

Checks if flyout layout is enabled.

### `flyoutModeSide`

Returns the flyout mode side configuration.

### `showResults`

Determines if search results should be displayed.

### `productListColumnClass`

Returns CSS classes for product grid columns.

### `productDisplayType`

Returns CSS class for product display layout.

### `suggestedSearchTermsTitle`

Returns the title for suggested search terms section.

### `suggestedSearchTermsEnabled`

Checks if suggested search terms feature is enabled.

### `suggestedTerms`

Returns the list of suggested search terms.

### `suggestedCollectionsTitle`

Returns the title for suggested collections section.

### `suggestedCollectionsEnabled`

Checks if suggested collections feature is enabled.

### `suggestedCollections`

Returns the list of suggested collections.

### `displayedSuggestedCollections`

Returns limited or full list of suggested collections.

### `suggestedProductsTitle`

Returns the title for suggested products section.

### `suggestedProductsEnabled`

Checks if suggested products feature is enabled.

### `suggestedProducts`

Returns the list of suggested products.

### `autoCompleteTermsEnabled`

Checks if autocomplete terms feature is enabled.

### `matchingProductsTitle`

Returns the title for matching products section.

### `matchingProductsEnabled`

Checks if matching products feature is enabled.

### `matchingCollectionsTitle`

Returns the title for matching collections section.

### `matchingCollectionsEnabled`

Checks if matching collections feature is enabled.

### `displayedMatchingCollections`

Returns limited or full list of matching collections.

### `shouldDropdownShow`

Determines if the dropdown should be displayed.

### `keywordSuggestionsWithSearchTerm`

Returns keywords that match the current search term.

### `suggestionsCount`

Returns the number of suggestions to display.

### `columnSpacing`

Returns the column spacing configuration.

---

Quick View Search dynamically presents products, collections, and additional search terms as the shopper inputs text into the search bar, adapting in real-time to additional input. Enhancing User Experience for Improved Conversions. Craft search experiences to enhance product discovery, provide recommendations, and ultimately elevate conversions and revenue.

---

# Results Page (221.3KB)

Source: https://developers.rebuyengine.com/reference/results-page.md

## Results Page Custom Templates

To use this template, create a new snippet (typically named 'rebuy-results-page-template') and paste the below code there. Then, in the theme.liquid file, render this snippet with {% render 'rebuy-results-page-template' %} just above the bottom of the closing body tag.  We wrap the template with {% raw %} {% endraw %} so that the double curly brace syntax of Vue.js does not get parsed as liquid. Sometimes, developers will need to access other liquid snippets. To do this, you can end the raw portion when needed and begin the raw portion once done with liquid code.

When Rebuy loads in it will search to see if there is a custom template in the theme code and if so it will use this instead of the standard template that loads in with Rebuy.

### Results Page Dropdown Template

```html title="Last Updated: January 21, 2026"
{% raw %}
<script id="rebuy-smart-search-results-dropdown-template" type="text/template">
    <div id="rebuy-smart-search-results-dropdown">
        <div v-if="shouldShowResultsPage()">
            <div class="rebuy-smart-search-results-page__header-section">
                <div
                    v-if="resultsPage.searchQuery && shouldShowSearchBar()"
                    class="rebuy-smart-search-results-page__input-section rebuy-smart-search-results-page-dropdown__input-section"
                >
                    <label for="rebuy-smart-search-results-page-dropdown__input" class="sr-only">Search for products</label>

                    <div class="rebuy-smart-search-results-page__input-search-container">
                        <input
                            type="text"
                            class="rebuy-smart-search-results-page-dropdown__input rebuy-input"
                            :placeholder="placeholderText()"
                            id="rebuy-smart-search-results-page-dropdown__input"
                            v-model="resultsPage.searchQuery.searchTerm"
                            @input="debouncedSearch($event.target.value)"
                            @keydown.enter.stop.prevent="checkKeywordSearch"
                        />

                        <div v-if="resultsPage?.isLoadingSearchTerm" class="rebuy-smart-search-results-page__loader">
                            <span> </span>
                        </div>
                    </div>
                </div>
                <div class="rebuy-smart-search-results-page-dropdown__context rebuy-smart-search-results-page-dropdown__context-section">
                    <h2 class="rebuy-smart-search-results-page-dropdown__result-title" v-html="pageTitle()"></h2>
                </div>
            </div>

            <div
                v-if="resultsPage?.hasLoadedInitialSearchResults"
                class="rebuy-search-filters "
                v-bind:class="[shouldShowAggregatedFilters() ? 'rebuy-search-filters' : 'rebuy-search-filters__end']"
            >
                <div v-if="shouldShowAggregatedFilters()">
                    <h3
                        class="rebuy-smart-search-results-page-dropdown__filter-section-title rebuy-title"
                    >
                        Filters
                    </h3>
                    <!-- Product Filters -->
                    <div class="rebuy-search-filter">
                        <button
                            aria-label="Open product filters dropdown"
                            @click.stop="handleToggleFilterModal('product')"
                            @keydown="(e) => handleKeyboardSubmitPrevent(e)"
                            @keyup="(e) => handleKeyboardSubmit(e, () => { handleToggleFilterModal('product'); })"
                            class="filter-title rebuy-button"
                            tabindex="0"
                        >
                            <p>
                                Product Filters
                                <rebuy-icon :name="resultsPage?.productFiltersVisible ? 'chevron-up' : 'chevron-down'"></rebuy-icon>
                            </p>
                        </button>

                        <div
                            id="filterSelectMenu"
                            v-if="resultsPage?.productFiltersVisible"
                            class="rebuy-filter-select-menu"
                        >
                            <button
                                type="button"
                                class="rebuy-filter-select-menu__close"
                                v-on:click="() => { handleToggleFilterModal('product') }"
                                aria-label="Close Dropdown"
                            >
                                <rebuy-icon name="x"></rebuy-icon>
                            </button>

                            <!--- Selected Filters -->
                            <div
                                v-if="hasSelectedFilters() && shouldShowSelectedFilters()"
                                class="rebuy-smart-search-results-page__selected-filters rebuy-smart-search-results-page-dropdown__selected-filters"
                            >
                                <div
                                    class="rebuy-smart-search-results-page__selected-filters-header rebuy-smart-search-results-page-dropdown__selected-filters-header"
                                >
                                    <h4 class="rebuy-smart-search-results-page-dropdown__filter-list-title">
                                        Selected Filter
                                    </h4>

                                    <button
                                        v-on:click="resetFilters()"
                                        class="rebuy-smart-search-results-page__selected-filters-reset rebuy-smart-search-results-page-dropdown__selected-filters-reset"
                                    >
                                        Reset
                                    </button>
                                </div>

                                <div
                                    class="rebuy-smart-search-results-page__selected-filters-body rebuy-smart-search-results-page-dropdown__selected-filters-body"
                                >
                                    <div
                                        v-if="resultsPage.hasAdjustedPriceFilter"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-dropdown__selected-filter-tag"
                                    >
                                        <span class="rebuy-smart-search-results-page__selected-tag-label">
                                            <span>
                                                <span v-html="shopCurrencySymbol()"> </span>

                                                <span v-html="resultsPage.filterPrice.min"></span>
                                            </span>

                                            <span>-</span>

                                            <span>
                                                <span v-html="shopCurrencySymbol()"> </span>

                                                <span v-html="handleMaximumPriceFilterLabel()"> </span>
                                            </span>
                                        </span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-dropdown__selected-filter-tag-remove"
                                            alt="Remove price filter"
                                            aria-label="Remove price filter"
                                            v-on:click="handleRemovingFilter('price')"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div v-if="hasSelectedFilter('availability')">
                                        <div
                                            class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-dropdown__selected-filter-tag"
                                        >
                                            <span
                                                v-html="handleAvailabilityFilterLabel()"
                                                class="rebuy-smart-search-results-page__selected-tag-label"
                                            ></span>

                                            <button
                                                type="button"
                                                class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-dropdown__selected-filter-tag-remove"
                                                v-bind:aria-label="handleRemovingFilterLabel('availability')"
                                                v-bind:aria-label="handleRemovingFilterLabel('availability')"
                                                v-on:click="handleRemovingFilter('availability')"
                                            >
                                                <rebuy-icon name="x"></rebuy-icon>
                                            </button>
                                        </div>
                                    </div>

                                    <div
                                        v-for="(tag, index) in resultsPage.searchQuery.filters.tags"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-dropdown__selected-filter-tag"
                                    >
                                        <span v-html="tag" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-dropdown__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + tag + ' tag filter'"
                                            v-bind:aria-label="'Remove ' + tag + ' tag filter'"
                                            v-on:click="handleRemovingFilter('product-tags', tag)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(category, index) in resultsPage.searchQuery.filters.categories"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-dropdown__selected-filter-tag"
                                    >
                                        <span v-html="category" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-dropdown__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + category + ' product type filter'"
                                            v-bind:aria-label="'Remove ' + category + ' product type filter'"
                                            v-on:click="handleRemovingFilter('product-type', category)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(vendor, index) in resultsPage.searchQuery.filters.vendors"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-dropdown__selected-filter-tag"
                                    >
                                        <span v-html="vendor" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-dropdown__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + vendor + ' vendor filter'"
                                            v-bind:aria-label="'Remove ' + vendor + ' vendor filter'"
                                            v-on:click="handleRemovingFilter('vendor', vendor)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(option, index) in resultsPage.searchQuery.filters.options"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-dropdown__selected-filter-tag"
                                    >
                                        <span
                                            v-html="formatOptionsFilter(option)"
                                            class="rebuy-smart-search-results-page__selected-tag-label"
                                        ></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-dropdown__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + option + ' option filter'"
                                            v-bind:aria-label="'Remove ' + option + ' option filter'"
                                            v-on:click="handleRemovingFilter('option', option)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <ul
                                class="rebuy-smart-search-results-page__filter-list-container rebuy-smart-search-results-page-dropdown__filter-container"
                            >
                                <li
                                    v-for="(filter, index) in resultsPage.mappedAggregatedFilters"
                                    v-if="filter.enabled"
                                    class="rebuy-filter-select-menu__list-item"
                                >
                                    <div v-if="hasFilterEnabled(filter)">
                                        <div class="rebuy-smart-search-results-page-dropdown__filter-list-header">
                                            <button
                                                class="rebuy-smart-search-results-page-dropdown__filter-list-toggle"
                                                type="button"
                                                v-bind:alt="filter.isExpanded ? 'Close ' + filter.name : 'Open ' + filter.name"
                                                v-bind:aria-label="filter.isExpanded ? 'Close ' + filter.name : 'Open ' + filter.name"
                                                v-on:click="handleToggleFilterExpansion(filter, index)"
                                            >
                                                <h4
                                                    class="rebuy-smart-search-results-page-dropdown__filter-list-title"
                                                    v-html="getFilterName(filter)"
                                                ></h4>

                                                <div v-if="filterDropDownStyle('plusMinus')">
                                                    <rebuy-icon v-if="filter.isExpanded" name="minus"></rebuy-icon>

                                                    <rebuy-icon v-if="!filter.isExpanded" name="plus"></rebuy-icon>
                                                </div>

                                                <div v-if="filterDropDownStyle('chevron')">
                                                    <rebuy-icon name="chevron-down" v-bind:class="[filter.isExpanded ? 'filter-open' : 'filter-close']"></rebuy-icon>
                                                </div>
                                            </button>
                                        </div>

                                        <div v-if="filter.isExpanded">
                                            <!-- Product Tags Filters -->
                                            <ul
                                                v-if="filter.type === 'product-tags'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-tags"
                                            >
                                                <li
                                                    v-for="value in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-dropdown__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-tag-'+  value.tags"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('product-tags', value.tags)"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, value.tags)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-tag-'+ value.tags"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{ formatTagValue(value.tags) }}
                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{value.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Price filter -->
                                            <div
                                                v-if="filter.type === 'price'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-price"
                                            >
                                                <div class="rebuy-smart-search-results-page__filter-price-block">
                                                    <label
                                                        for="rebuy-option-price-from"
                                                        v-html="shopCurrencySymbol()"
                                                        class="rebuy-smart-search-results-page__filter-price-label"
                                                    >
                                                    </label>

                                                    <input
                                                        id="rebuy-option-price-from"
                                                        type="number"
                                                        class="rebuy-input rebuy-smart-search-results-page__filter-price-input"
                                                        placeholder="From"
                                                        v-bind:value="resultsPage.filterPrice.min"
                                                        min="0"
                                                        :max="resultsPage.filterPrice.max"
                                                        v-on:change="handleUpdateSearchQuery('price', 'min', {
                                                        min: resultsPage.filterPrice.min,
                                                        max: resultsPage.filterPrice.max,
                                                        price: $event.target.valueAsNumber,
                                                    })"
                                                    />
                                                </div>

                                                <div class="rebuy-smart-search-results-page__filter-price-dash">-</div>

                                                <div class="rebuy-smart-search-results-page__filter-price-block">
                                                    <label
                                                        for="rebuy-option-price-to"
                                                        v-html="shopCurrencySymbol()"
                                                        class="rebuy-smart-search-results-page__filter-price-label"
                                                    >
                                                    </label>

                                                    <input
                                                        id="rebuy-option-price-to"
                                                        type="number"
                                                        class="rebuy-input rebuy-smart-search-results-page__filter-price-input"
                                                        placeholder="To"
                                                        v-bind:value="resultsPage.filterPrice.max"
                                                        :min="resultsPage.filterPrice.min"
                                                        v-on:change="handleUpdateSearchQuery('price', 'max', {
                                                        min: resultsPage.filterPrice.min,
                                                        max: resultsPage.filterPrice.max,
                                                        price: $event.target.valueAsNumber,
                                                    })"
                                                    />
                                                </div>
                                            </div>

                                            <!-- Vendor Filters -->
                                            <ul
                                                v-if="filter.type === 'vendor'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-vendor"
                                            >
                                                <li
                                                    v-for="(value, index) in filter.values"
                                                    :key="index"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-dropdown__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-vendor-' + value.vendorAsTag"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('vendor', value.vendorAsTag)"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, value.vendorAsTag)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-vendor-' + value.vendorAsTag"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{value.vendorAsTag}}

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{value.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Product availability filter-->
                                            <ul
                                                v-if="filter.type === 'availability'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-availability"
                                            >
                                                <li
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-dropdown__filter-list"
                                                >
                                                    <label class="rebuy-radio-label">
                                                        <input
                                                            class="radio-input rebuy-radio"
                                                            v-on:click="handleUpdateSearchQuery('availability', 'available')"
                                                            :checked="hasSelectedFilter('availability', 'available')"
                                                            v-bind:value="true"
                                                            type="radio"
                                                            v-bind:disabled="!hasInStockAvailabilityFilter(filter.values)"
                                                        />
                                                        <span
                                                            class="radio-label"
                                                            v-bind:class="[!hasInStockAvailabilityFilter(filter.values)  ? 'disabled' : '']"
                                                        >
                                                            Available
                                                            <span
                                                                v-if="hasInStockAvailabilityFilter(filter.values) && shouldShowProductFilterCount()"
                                                                v-html="numsOfAvailabilityFilter(filter.values, 'available')"
                                                                class="rebuy-smart-search-results-page__filter-label"
                                                            >
                                                            </span>
                                                        </span>
                                                    </label>
                                                </li>

                                                <li
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-dropdown__filter-list"
                                                >
                                                    <label class="rebuy-radio-label">
                                                        <input
                                                            class="radio-input rebuy-radio"
                                                            v-on:click="handleUpdateSearchQuery('availability', 'soldOut')"
                                                            :checked="hasSelectedFilter('availability', 'soldOut')"
                                                            v-bind:value="false"
                                                            type="radio"
                                                            v-bind:disabled="!hasSoldOutAvailabilityFilter(filter.values)"
                                                        />

                                                        <span
                                                            class="radio-label"
                                                            v-bind:class="[!hasSoldOutAvailabilityFilter(filter.values)  ? 'disabled' : '']"
                                                        >
                                                            Sold Out
                                                            <span
                                                                v-if="hasSoldOutAvailabilityFilter(filter.values) && shouldShowProductFilterCount()"
                                                                class="rebuy-smart-search-results-page__filter-label"
                                                                v-html="numsOfAvailabilityFilter(filter.values, 'soldOut')"
                                                            >
                                                            </span>
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Product-type / Categories-->
                                            <ul
                                                v-if="filter.type === 'product-type'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-type"
                                            >
                                                <li
                                                    v-for="value in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-dropdown__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-product-type-' + value.categories"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('product-type', value.categories)"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, value.categories)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-product-type-' + value.categories"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{value.categories}}

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{value.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Product Option filter-->
                                            <ul
                                                v-if="filter.type === 'product-option'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-option"
                                            >
                                                <li
                                                    v-for="(optionGroupValue, key) in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-product-type-' + key"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('product-options', getProductOptionFilterString(filter, key))"
                                                        v-on:change="handleUpdateSearchQuery('product-options', getProductOptionFilterString(filter, key), key)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-product-type-' + key"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{key}}

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{optionGroupValue.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Product metafield filter-->
                                            <ul
                                                v-if="filter.type === 'product-metafield' || filter.type === 'variant-metafield'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-type"
                                            >
                                                <li
                                                    v-for="metafieldValue in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-dropdown__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-metafield-' + filter.type + '-' + filter.key + '-' + metafieldValue.value"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter(filter.type, getMetafieldFilterString(filter, metafieldValue))"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, getMetafieldFilterString(filter, metafieldValue), metafieldValue.readableValue ?? metafieldValue.value)"
                                                    />

                                                    <label
                                                        :for="'rebuy-metafield-' + filter.type + '-' + filter.key + '-' + metafieldValue.value"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        <span v-html="metafieldValue.readableValue ? metafieldValue.readableValue : metafieldValue.value"></span>

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{metafieldValue.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <div v-if="filter?.key !== 'price' && filter?.values?.length === 0">
                                                <p>No available filters</p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>


                <!-- Needs to be its own condition -->
                <!-- Sort By -->
                <div v-if="shouldShowSortBy()">
                    <div
                        class="rebuy-smart-search-results-page__sort-by rebuy-smart-search-results-page-dropdown__sort-by"
                        v-if="sortByStyle() === 'sortBySelect'"
                    >
                        <label
                            for="rebuy-smart-search-sort-options"
                            class="rebuy-smart-search-results-page-dropdown__sort-by-label"
                            >Sort By</label
                        >
                        <select
                            id="rebuy-smart-search-sort-options"
                            v-model="resultsPage.searchQuery.sortBy.field"
                            class="rebuy-select"
                            v-on:change="($event) => handleUpdateSearchQuery('sort_by', $event.target.value)"
                        >
                            <option
                                v-for="filter in getSortFilters()"
                                v-if="filter.enabled"
                                v-bind:value="filter.key"
                            >
                                {{ filter.label || filter.name }}
                            </option>
                        </select>
                    </div>

                    <div
                        v-if="sortByStyle() === 'sortByDropdown'"
                        class="rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu-container"
                    >
                        <button
                            aria-label="Open product filters dropdown"
                            @click.stop="handleToggleFilterModal('sort')"
                            @keydown="(e) => handleKeyboardSubmitPrevent(e)"
                            @keyup="(e) => handleKeyboardSubmit(e, () => { handleToggleFilterModal('product'); })"
                            class="rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu-trigger"
                        >
                            Sort By:
                            <span class="rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu-title">
                                {{getSortByLabel(resultsPage.searchQuery.sortBy.field)}}
                            </span>
                            <rebuy-icon name="chevron-down" v-bind:class="[resultsPage?.sortFiltersVisible ? 'filter-open' : 'filter-close']"></rebuy-icon>
                        </button>

                        <ul
                            id="sortSelectMenu"
                            v-if="resultsPage?.sortFiltersVisible"
                            class="rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu"
                        >
                            <li
                                v-for="filter in getSortFilters()"
                                v-if="filter.enabled"
                                class="rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu-list-item"
                                :class="{'rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu-list-item--active': resultsPage.searchQuery.sortBy.field === filter.key}"
                                @click="handleUpdateSearchQuery('sort_by', filter.key)"
                            >
                                {{filter.label || filter.name}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--- Results Section -->

            <div class="rebuy-smart-search-results-page__main-section rebuy-smart-search-results-page-dropdown__result-section">
                <div>
                    <h3 class="rebuy-smart-search-results-page-dropdown__result-section-title">Products</h3>

                    <div class="rebuy-smart-search-results-page__container" v-bind:class="[resultsPage.resultsGridColumns, productListColumnClass()]">
                        <!--- Product Skeleton -->

                        <div
                            v-if="!resultsPage?.hasLoadedInitialSearchResults"
                            v-for="product of skeletonProducts"
                            class="rebuy-smart-search-results-page__product-skeleton"
                        >
                            <div class="rebuy-smart-search-results-page__product-skeleton"></div>
                        </div>

                        <!--- End Product Skeleton -->

                        <div
                            v-if="resultsPage?.hasLoadedInitialSearchResults && resultsPage?.searchResults?.products?.length > 0"
                            v-for="(product, index) of resultsPage?.searchResults?.products"
                            :id="'rebuy-product-id-'+ product.id"
                            :key="product.id"
                            class="rebuy-smart-search-results-page__product rebuy-smart-search-results-page-dropdown__product"
                            :style="productImageRatio()"
                        >
                            <!-- Image container -->
                            <a
                                class="rebuy-product-media rebuy-smart-search-results-page__product-media rebuy-smart-search-results-page__product-media rebuy-smart-search-results-page__absolute-image-container"
                                v-bind:href="learnMoreURL(product)"
                                v-bind:alt="'View ' + product.name"
                                v-on:click="learnMore(product, index)"
                            >
                                <div v-if="shouldShowFeaturedBadge(product)" class="rebuy-smart-search-results-page__promoted-tag">
                                    Featured
                                </div>

                                <img
                                    v-bind:src="getProductImage(product, product.selected_variant)"
                                    v-bind:srcset="generateImgSrcset(product)"
                                    class="rebuy-smart-search-results-page__product-image rebuy-smart-search-results-page__absolute-image rebuy-smart-search-results-page__absolute-image--zoomed"
                                    v-bind:alt="'Image of ' + product.name"
                                />
                            </a>

                            <!-- Product Info -->
                            <div class="rebuy-smart-search-results-page__product-detail">

                                <div class="rebuy-product-info">
                                    <!-- Product Title -->
                                    <a
                                        class="rebuy-product-title"
                                        v-bind:href="learnMoreURL(product)"
                                        v-html="product.name"
                                        v-bind:alt="'View ' + product.name"
                                        v-on:click="learnMore(product, index)"
                                    >
                                    </a>

                                    <!-- Product Review -->
                                    <div class="rebuy-product-review" v-if="shouldDisplayResultsPageProductRating(product)" aria-label="product star rating">
                                        <span class="rebuy-star-rating">
                                            <span
                                                v-if="product.reviews.star_rating"
                                                class="rebuy-star-rating-value sr-only"
                                                v-html="product.ratings.average + ' stars out of 5 stars'"
                                            >
                                            </span>
                                            <span class="rebuy-star-rating-background"></span>
                                            <span class="rebuy-star-rating-foreground" v-bind:style="{ width: getProductReviewRatingPercentage(product) }"></span>
                                        </span>

                                        <span class="rebuy-review-count" v-html="getProductReviewCountHtml(product)"></span>
                                    </div>

                                    <!-- Product Price -->
                                    <div class="rebuy-product-price">
                                        <div v-if="productOnSale(product)">
                                            <span class="rebuy-money sale">
                                                <span class="sr-only">Sale price</span>
                                                <span v-html="formatMoney(product.selected_variant.price)"></span>
                                            </span>

                                            <span class="rebuy-money compare-at">
                                                <span class="sr-only">Original price</span>
                                                <span v-html="formatMoney(product.selected_variant.compareAtPrice)"></span>
                                            </span>
                                        </div>

                                        <div v-if="!productOnSale(product)">
                                            <span class="rebuy-money">
                                                <span class="sr-only">Price</span>
                                                <span v-html="formatMoney(product.selected_variant.price)"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Product Options -->
                                <div class="rebuy-product-options" v-if="shouldShowVariantSelector(product)">
                                    <select
                                        title="Select product variant"
                                        id="rebuy-smart-search-results-variant-select"
                                        class="rebuy-select"
                                        v-bind:aria-label="'variant of ' + product.name"
                                        v-model="product.selected_variant_id"
                                        v-on:change="selectVariant(product)"
                                    >
                                        <option
                                            v-for="variant in product.variants"
                                            v-bind:value="variant.id"
                                            v-html="variant.name"
                                        ></option>
                                    </select>
                                </div>

                                <!-- Add-to-cart -->
                                <div class="rebuy-product-actions" v-if="shouldShowAddToCart(product)">
                                    <button
                                        class="rebuy-button rebuy-smart-search-results-page__cta"
                                        v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                                        v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                                        v-bind:aria-label="buttonAriaLabel(product)"
                                        v-on:click="addToCart(product)"
                                        type="button"
                                    >
                                        <span v-html="buttonLabel(product)"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div
                        v-if="resultsPage?.hasLoadedInitialSearchResults && (!resultsPage?.searchResults?.products || resultsPage?.searchResults?.products?.length <= 0)"
                    >
                        <p v-html="notFoundMessage()"></p>
                    </div>
                </div>

                <!--- Pagination -->
                <div v-if="handleGeneratingPageList()?.length > 1">
                    <div
                        v-if="shouldRenderDefaultPagination()"
                        class="rebuy-smart-search-results-page__pagination rebuy-smart-search-results-page-sidebar__pagination-section"
                        v-bind:class="shouldDisplayAmountPerPage() ? 'rebuy-smart-search-results-page__range' : ''"
                    >

                        <!--- Range Selection -->
                        <div v-if="shouldDisplayAmountPerPage()" class="rebuy-range-selection">
                            <label
                                class="rebuy-range-selection-label"
                                v-bind:class="isAmountPerPageSelectionDisabled() && 'rebuy-range-selection-disabled'"
                            >
                                Per page
                            </label>
                            <select
                                title="Select products per page"
                                id="rebuy-smart-search-results-per-page-select"
                                class="rebuy-select"
                                v-bind:class="isAmountPerPageSelectionDisabled() && 'rebuy-range-selection-disabled'"
                                aria-label="products per page"
                                v-model="resultsPage.searchQuery.pageSize"
                                v-on:change="handleUpdatePaginationRange($event.target.value)"
                                v-bind:disabled="isAmountPerPageSelectionDisabled()"
                            >
                                <option
                                    v-for="productsPerPage in pageRangeSelection()"
                                    v-bind:value="productsPerPage.value"
                                >
                                    {{productsPerPage.value}}
                                </option>
                            </select>
                        </div>

                        <!--- Page Selection -->
                        <ul
                            v-if="handleGeneratingPageList()?.length > 1"
                            class="rebuy-smart-search-results-page__pagination rebuy-smart-search-results-page-sidebar__pagination"
                        >
                            <li class="rebuy-smart-search-results-page__pagination-label">
                                <button
                                    v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                                    v-on:click="handleUpdatingPageCount('decrement')"
                                    class="rebuy-smart-search-results-page__pagination-page rebuy-smart-search-results-page__pagination-arrow"
                                    v-bind:class="{
                                        'rebuy-smart-search-results-page__pagination-arrow--disabled': parseInt(resultsPage.searchQuery.currentPage) === 1
                                    }"
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z" fill="currentColor"/>
                                    </svg>
                                </button>
                            </li>

                            <li
                                tabindex="0"
                                v-for="(pageNumber, index) in handleGeneratingPageList()"
                                :key="pageNumber + '-pagination-' + index"
                                class="rebuy-smart-search-results-page__pagination-label"
                                v-bind:class="[parseInt(pageNumber) === parseInt(resultsPage.searchQuery.currentPage)  ? 'active' : '']"
                            >
                                <button
                                    v-on:click="handleUpdatingPageCount('manual', pageNumber)"
                                    @keydown="(e) => handleKeyboardSubmitPrevent(e)"
                                    @keyup="(e) => handleKeyboardSubmit(e, () => { handleUpdatingPageCount('manual', pageNumber); })"
                                    class="rebuy-smart-search-results-page__pagination-page"
                                    v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                                >

                                    <span v-if="pageNumber">
                                        {{ pageNumber }}
                                    </span>

                                    <span
                                        v-if="!pageNumber"
                                        class="rebuy-smart-search-results-page__pagination-icon--disabled"
                                        >
                                        <rebuy-icon name="more-horizontal" class="rebuy-button-icon"></rebuy-icon>
                                    </span>
                                </button>
                            </li>

                            <li class="rebuy-smart-search-results-page__pagination-label">
                                <button
                                    v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                                    v-on:click="handleUpdatingPageCount('increment')"
                                    class="rebuy-smart-search-results-page__pagination-page rebuy-smart-search-results-page__pagination-arrow"
                                    v-bind:class="{
                                        'rebuy-smart-search-results-page__pagination-arrow--disabled': parseInt(resultsPage.searchQuery.currentPage) === parseInt(resultsPage.searchResultsHeaderMetaData?.['search-page-total'])
                                    }"
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z" fill="currentColor"/>
                                    </svg>
                                </button>
                            </li>
                        </ul>
                    </div>

                    <!--- Load More button -->
                    <div v-if="shouldRenderLoadMore()" class="rebuy-smart-search-results-page__continuous-scroll">
                        <button
                            v-if="!hasReachedLastPage()"
                            v-on:click="handleUpdatingPageCount('continuous')"
                            class="rebuy-button rebuy-smart-search-results-page__continuous-scroll-button"
                            v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                        >
                            {{ getLoadMoreText() }}
                        </button>
                    </div>

                    <!--- Continuous Scroll loading spinner -->
                    <div v-if="shouldRenderContinuousScroll()" class="rebuy-smart-search-results-page__continuous-scroll">
                        <div v-if="resultsPage?.isLoadingSearchTerm" class="rebuy-smart-search-results-page__continuous-scroll-loader">
                            <span> </span>
                        </div>
                    </div>

                </div>
                <!--- End Pagination -->
            </div>
            <!--- End Results Section -->

            <div v-if="shouldShowPoweredByRebuy()" class="powered-by-rebuy">
                <a v-bind:href="'https://rebuyengine.com/?shop=' + shop()" target="_blank" rel="noopener">
                    Powered by Rebuy
                </a>
            </div>
        </div>
    </div>
</script>
{% endraw %}

```

<br />

### Results Page Sidebar Template

```html title="Last Updated: January 21, 2026"
{% raw %}
<script id="rebuy-smart-search-results-sidebar-template" type="text/template">
    <div id="rebuy-smart-search-results-sidebar">
        <div v-if="shouldShowResultsPage()">
            <!--- Search Input Section -->
            <div class="rebuy-smart-search-results-page__header-section rebuy-smart-search-results-page-sidebar__header-section">
                <div
                    v-if="resultsPage.searchQuery && shouldShowSearchBar()"
                    class="rebuy-smart-search-results-page__input-section rebuy-smart-search-results-page-sidebar__input-section"
                >
                    <label for="rebuy-smart-search-results-page-sidebar__input" class="sr-only">Search for products</label>

                    <div class="rebuy-smart-search-results-page__input-search-container">
                        <label for="searchInput" class="sr-only">Enter a Search Term</label>
                        <input
                            id="searchInput"
                            type="text"
                            class="rebuy-smart-search-results-page-sidebar__input rebuy-input"
                            :placeholder="placeholderText()"
                            id="rebuy-smart-search-results-page-sidebar__input"
                            v-model="resultsPage.searchQuery.searchTerm"
                            @input="debouncedSearch($event.target.value)"
                            @keydown.enter.stop.prevent="checkKeywordSearch"
                        />

                        <div v-if="resultsPage?.isLoadingSearchTerm" class="rebuy-smart-search-results-page__loader">
                            <span> </span>
                        </div>
                    </div>
                </div>

                <div class="rebuy-smart-search-results-page__context-section rebuy-smart-search-results-page-sidebar__context-section">
                    <div class="rebuy-smart-search-results-page-sidebar__context-left">
                        <h2 class="rebuy-smart-search-results-page-sidebar__result-title" v-html="pageTitle()"></h2>
                    </div>

                    <div  v-if="shouldShowSortBy()" class="rebuy-smart-search-results-page-sidebar__context-right">
                        <!-- Sort By Desktop -->
                        <div
                             v-if="getSortFilters().length && sortByStyle() === 'sortBySelect'"
                            class="rebuy-smart-search-results-page__sort-by rebuy-smart-search-results-page-sidebar__sort-by rebuy-smart-search-results-page-sidebar__sort-by--desktop"
                        >
                            <label
                                for="rebuy-smart-search-sort-options"
                                class="rebuy-smart-search-results-page-sidebar__sort-by-label"
                                >Sort By</label
                            >

                            <div class="rebuy-filter-select-menu">
                                <select
                                    id="rebuy-smart-search-sort-options"
                                    class="rebuy-select"
                                    v-model="resultsPage.searchQuery.sortBy.field"
                                    v-on:change="($event) => handleUpdateSearchQuery('sort_by', $event.target.value)"
                                >
                                    <option
                                        v-for="filter in getSortFilters()"
                                        v-if="filter.enabled"
                                        v-bind:value="filter.key"
                                    >
                                        {{ filter.label || filter.name }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div
                            v-if="getSortFilters().length && sortByStyle() === 'sortByDropdown'"
                            class="rebuy-smart-search-results-page-sidebar__dropdown-menu-container rebuy-smart-search-results-page-sidebar__sort-by--desktop"
                        >
                            <button
                                aria-label="Open product filters dropdown"
                                @click.stop="handleToggleFilterModal('sort')"
                                @keydown="(e) => handleKeyboardSubmitPrevent(e)"
                                @keyup="(e) => handleKeyboardSubmit(e, () => { handleToggleFilterModal('product'); })"
                                class="rebuy-smart-search-results-page-sidebar__dropdown-menu-trigger"
                            >
                                Sort By:
                                <span class="rebuy-smart-search-results-page-sidebar__dropdown-menu-title">
                                    {{getSortByLabel(resultsPage.searchQuery.sortBy.field)}}
                                </span>
                                <rebuy-icon name="chevron-down" v-bind:class="[resultsPage?.sortFiltersVisible ? 'filter-open' : 'filter-close']"></rebuy-icon>
                            </button>

                            <ul
                                id="sortSelectMenu"
                                v-if="resultsPage?.sortFiltersVisible"
                                class="rebuy-smart-search-results-page-sidebar__dropdown-menu"
                            >
                                <li
                                    v-for="filter in getSortFilters()"
                                    v-if="filter.enabled"
                                    class="rebuy-smart-search-results-page-sidebar__dropdown-menu-list-item"
                                    :class="{'rebuy-smart-search-results-page-sidebar__dropdown-menu-list-item--active': resultsPage.searchQuery.sortBy.field === filter.key}"
                                    @click="handleUpdateSearchQuery('sort_by', filter.key)"
                                >
                                    {{filter.label || filter.name}}
                                </li>
                            </ul>
                        </div>

                        <!-- Sort By Trigger (for Mobile) -->
                        <div
                            class="rebuy-smart-search-results-page-sidebar__filter-trigger rebuy-smart-search-results-page-sidebar__filter-trigger--mobile"
                        >
                            <button
                                class="rebuy-smart-search-results-page-sidebar__filter-mobile-facets"
                                @click="showFilterFlyout()"
                            >
                                <svg
                                    class="rebuy-smart-search-results-page-sidebar__filter-mobile-facets-icon"
                                    aria-hidden="true"
                                    focusable="false"
                                    role="presentation"
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                >
                                    <path
                                        fill-rule="evenodd"
                                        d="M4.833 6.5a1.667 1.667 0 1 1 3.334 0 1.667 1.667 0 0 1-3.334 0ZM4.05 7H2.5a.5.5 0 0 1 0-1h1.55a2.5 2.5 0 0 1 4.9 0h8.55a.5.5 0 0 1 0 1H8.95a2.5 2.5 0 0 1-4.9 0Zm11.117 6.5a1.667 1.667 0 1 0-3.334 0 1.667 1.667 0 0 0 3.334 0ZM13.5 11a2.5 2.5 0 0 1 2.45 2h1.55a.5.5 0 0 1 0 1h-1.55a2.5 2.5 0 0 1-4.9 0H2.5a.5.5 0 0 1 0-1h8.55a2.5 2.5 0 0 1 2.45-2Z"
                                        fill="currentColor"
                                    ></path>
                                </svg>

                                <span class="rebuy-smart-search-results-page-sidebar__filter-mobile-facets-label"
                                    >Filter and sort</span
                                >
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!--- End Search Input Section -->

            <!--- Main Section -->
            <div class="rebuy-smart-search-results-page__main-section rebuy-smart-search-results-page-sidebar__main-section">
                <!--- Filters Section -->
                <div v-if="shouldShowAggregatedFilters() || hasSelectedFilters()" class="rebuy-smart-search-results-page__filter-section rebuy-smart-search-results-page-sidebar__filter-section">
                    <h3
                        class="rebuy-smart-search-results-page-sidebar__filter-section-title rebuy-title"
                    >
                        Filters
                    </h3>

                    <!--- Selected Filters -->
                    <div
                        v-if="hasSelectedFilters() && shouldShowSelectedFilters()"
                        class="rebuy-smart-search-results-page__selected-filters rebuy-smart-search-results-page-sidebar__selected-filters"
                    >
                        <div
                            class="rebuy-smart-search-results-page__selected-filters-header rebuy-smart-search-results-page-sidebar__selected-filters-header"
                        >
                            <h4 class="rebuy-smart-search-results-page-sidebar__filter-list-title">Selected Filter</h4>

                            <button
                                v-on:click="resetFilters()"
                                class="rebuy-smart-search-results-page__selected-filters-reset rebuy-smart-search-results-page-sidebar__selected-filters-reset"
                            >
                                Reset
                            </button>
                        </div>

                        <div
                            class="rebuy-smart-search-results-page__selected-filters-body rebuy-smart-search-results-page-sidebar__selected-filters-body"
                        >
                            <div
                                v-if="resultsPage.hasAdjustedPriceFilter"
                                class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                            >
                                <span class="rebuy-smart-search-results-page__selected-tag-label">
                                    <span>
                                        <span v-html="shopCurrencySymbol()"> </span>

                                        <span v-html="resultsPage.filterPrice.min"> </span>
                                    </span>

                                    <span>-</span>

                                    <span>
                                        <span v-html="shopCurrencySymbol()"> </span>

                                        <span v-html="handleMaximumPriceFilterLabel()"> </span>
                                    </span>
                                </span>

                                <button
                                    type="button"
                                    class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                    v-bind:alt="handleRemovingFilterLabel('price')"
                                    v-bind:aria-label="handleRemovingFilterLabel('price')"
                                    v-on:click="handleRemovingFilter('price')"
                                >
                                    <rebuy-icon name="x"></rebuy-icon>
                                </button>
                            </div>

                            <div v-if="hasSelectedFilter('availability')">
                                <div
                                    class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                                >
                                    <span
                                        v-html="handleAvailabilityFilterLabel()"
                                        class="rebuy-smart-search-results-page__selected-tag-label"
                                    ></span>

                                    <button
                                        type="button"
                                        class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                        v-bind:alt="handleRemovingFilterLabel('availability')"
                                        v-bind:aria-label="handleRemovingFilterLabel('availability')"
                                        v-on:click="handleRemovingFilter('availability')"
                                    >
                                        <rebuy-icon name="x"></rebuy-icon>
                                    </button>
                                </div>
                            </div>

                            <div
                                v-for="(tag, index) in resultsPage.searchQuery.filters.tags"
                                class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                            >
                                <span v-html="formatTagValue(tag)" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                <button
                                    type="button"
                                    class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                    v-bind:alt="handleRemovingFilterLabel('product-tags', tag)"
                                    v-bind:aria-label="handleRemovingFilterLabel('product-tags', tag)"
                                    v-on:click="handleRemovingFilter('product-tags', tag)"
                                >
                                    <rebuy-icon name="x"></rebuy-icon>
                                </button>
                            </div>

                            <div
                                v-for="(category, index) in resultsPage.searchQuery.filters.categories"
                                class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                            >
                                <span v-html="category" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                <button
                                    type="button"
                                    class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                    v-bind:alt="handleRemovingFilterLabel('product-type', category)"
                                    v-bind:aria-label="handleRemovingFilterLabel('product-type', category)"
                                    v-on:click="handleRemovingFilter('product-type', category)"
                                >
                                    <rebuy-icon name="x"></rebuy-icon>
                                </button>
                            </div>

                            <div
                                v-for="(vendor, index) in resultsPage.searchQuery.filters.vendors"
                                class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                            >
                                <span v-html="vendor" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                <button
                                    type="button"
                                    class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                    v-bind:alt="handleRemovingFilterLabel('vendor', vendor)"
                                    v-bind:aria-label="handleRemovingFilterLabel('vendor', vendor)"
                                    v-on:click="handleRemovingFilter('vendor', vendor)"
                                >
                                    <rebuy-icon name="x"></rebuy-icon>
                                </button>
                            </div>

                            <div
                                v-for="(option, index) in resultsPage.searchQuery.filters.options"
                                class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                            >
                                <span v-html="getReadableFilterValue(option)" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                <button
                                    type="button"
                                    class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                    v-bind:alt="handleRemovingFilterLabel('option', option)"
                                    v-bind:aria-label="handleRemovingFilterLabel('option', option)"
                                    v-on:click="handleRemovingFilter('option', option)"
                                >
                                    <rebuy-icon name="x"></rebuy-icon>
                                </button>
                            </div>

                            <div
                                v-for="(metafieldValue, index) in resultsPage.searchQuery.filters.metafields"
                                class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                            >
                                <span v-html="getReadableFilterValue(metafieldValue)" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                <button
                                    type="button"
                                    class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                    v-bind:alt="handleRemovingFilterLabel('metafields', metafieldValue)"
                                    v-bind:aria-label="handleRemovingFilterLabel('metafields', metafieldValue)"
                                    v-on:click="handleRemovingFilter('metafields', metafieldValue)"
                                >
                                    <rebuy-icon name="x"></rebuy-icon>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Filters Options Desktop -->
                    <div>
                        <ul
                            v-if="resultsPage?.hasLoadedInitialSearchResults"
                            class="rebuy-smart-search-results-page__filter-list-container rebuy-smart-search-results-page-sidebar__filter-container"
                        >
                            <li
                                v-for="(filter, index) in resultsPage.mappedAggregatedFilters"
                                class="rebuy-smart-search-results-page-sidebar__filter-list"
                            >
                                <div
                                    v-if="hasFilterEnabled(filter)"
                                    class="rebuy-smart-search-results-page-sidebar__filter-list-container"
                                >
                                    <div class="rebuy-smart-search-results-page-sidebar__filter-list-header">
                                        <button
                                            class="rebuy-smart-search-results-page-sidebar__filter-list-toggle"
                                            type="button"
                                            v-bind:alt="filter.isExpanded ? 'Close ' + filter.name : 'Open ' + filter.name"
                                            v-bind:aria-label="filter.isExpanded ? 'Close ' + filter.name : 'Open ' + filter.name"
                                            v-on:click="handleToggleFilterExpansion(filter, index)"
                                        >
                                            <h4
                                                class="rebuy-smart-search-results-page-sidebar__filter-list-title"
                                                v-html="getFilterName(filter)"
                                            ></h4>
                                            <div v-if="filterDropDownStyle('plusMinus')">
                                                <rebuy-icon v-if="filter.isExpanded" name="minus"></rebuy-icon>

                                                <rebuy-icon v-if="!filter.isExpanded" name="plus"></rebuy-icon>
                                            </div>

                                            <div v-if="filterDropDownStyle('chevron')">
                                                <rebuy-icon name="chevron-down" v-bind:class="[filter.isExpanded ? 'filter-open' : 'filter-close']"></rebuy-icon>
                                            </div>
                                        </button>
                                    </div>

                                    <div
                                        v-bind:class="[filter.isExpanded ? 'active' : '']"
                                        class="rebuy-smart-search-results-page-sidebar__filter-list-body"
                                    >
                                        <!-- Product tags filter-->
                                        <ul
                                            v-if="filter.type === 'product-tags'"
                                            class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-tags"
                                        >
                                            <li
                                                v-for="value in filter.values"
                                                class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                            >
                                                <input
                                                    :id="'rebuy-option-tag-'+  value.tags"
                                                    type="checkbox"
                                                    class="rebuy-checkbox"
                                                    :checked="hasSelectedFilter('product-tags', value.tags)"
                                                    v-on:change="handleUpdateSearchQuery(filter.type, value.tags)"
                                                />

                                                <label
                                                    :for="'rebuy-option-tag-'+ value.tags"
                                                    class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                >
                                                    {{ formatTagValue(value.tags) }}
                                                    <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                        ({{value.numProducts}})
                                                    </span>
                                                </label>
                                            </li>
                                        </ul>

                                        <!-- Product vendor filter-->
                                        <ul
                                            v-if="filter.type === 'vendor'"
                                            class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-vendor"
                                        >
                                            <li
                                                v-for="(value, index) in filter.values"
                                                :key="index"
                                                class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                            >
                                                <input
                                                    :id="'rebuy-option-vendor-' + value.vendorAsTag"
                                                    type="checkbox"
                                                    class="rebuy-checkbox"
                                                    :checked="hasSelectedFilter('vendor', value.vendorAsTag)"
                                                    v-on:change="handleUpdateSearchQuery(filter.type, value.vendorAsTag)"
                                                />

                                                <label
                                                    :for="'rebuy-option-vendor-' + value.vendorAsTag"
                                                    class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                >
                                                    {{value.vendorAsTag}}

                                                    <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                        ({{value.numProducts}})
                                                    </span>
                                                </label>
                                            </li>
                                        </ul>

                                        <!-- Product availability filter-->
                                        <ul
                                            v-if="filter.type === 'availability'"
                                            class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-availability"
                                        >
                                            <li
                                                class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                            >
                                                <label class="rebuy-radio-label">
                                                    <input
                                                        class="radio-input rebuy-radio"
                                                        v-on:click="handleUpdateSearchQuery('availability', 'available')"
                                                        :checked="hasSelectedFilter('availability', 'available')"
                                                        v-bind:value="true"
                                                        type="radio"
                                                        v-bind:disabled="!hasInStockAvailabilityFilter(filter.values)"
                                                    />
                                                    <span
                                                        class="radio-label"
                                                        v-bind:class="[!hasInStockAvailabilityFilter(filter.values)  ? 'disabled' : '']"
                                                    >
                                                        Available
                                                        <span
                                                            v-if="hasInStockAvailabilityFilter(filter.values) && shouldShowProductFilterCount()"
                                                            v-html="numsOfAvailabilityFilter(filter.values, 'available')"
                                                            class="rebuy-smart-search-results-page__filter-label"
                                                        >
                                                        </span>
                                                    </span>
                                                </label>
                                            </li>

                                            <li
                                                class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                            >
                                                <label class="rebuy-radio-label">
                                                    <input
                                                        class="radio-input rebuy-radio"
                                                        v-on:click="handleUpdateSearchQuery('availability', 'soldOut')"
                                                        :checked="hasSelectedFilter('availability', 'soldOut')"
                                                        v-bind:value="false"
                                                        type="radio"
                                                        v-bind:disabled="!hasSoldOutAvailabilityFilter(filter.values)"
                                                    />

                                                    <span
                                                        class="radio-label"
                                                        v-bind:class="[!hasSoldOutAvailabilityFilter(filter.values)  ? 'disabled' : '']"
                                                    >
                                                        Sold Out
                                                        <span
                                                            v-if="hasSoldOutAvailabilityFilter(filter.values) && shouldShowProductFilterCount()"
                                                            class="rebuy-smart-search-results-page__filter-label"
                                                            v-html="numsOfAvailabilityFilter(filter.values, 'soldOut')"
                                                        >
                                                        </span>
                                                    </span>
                                                </label>
                                            </li>
                                        </ul>

                                        <!-- Product type filter-->
                                        <ul
                                            v-if="filter.type === 'product-type'"
                                            class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-type"
                                        >
                                            <li
                                                v-for="value in filter.values"
                                                class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                            >
                                                <input
                                                    :id="'rebuy-option-product-type-' + value.categories"
                                                    type="checkbox"
                                                    class="rebuy-checkbox"
                                                    :checked="hasSelectedFilter('product-type', value.categories)"
                                                    v-on:change="handleUpdateSearchQuery(filter.type, value.categories)"
                                                />

                                                <label
                                                    :for="'rebuy-option-product-type-' + value.categories"
                                                    class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                >
                                                    {{value.categories}}

                                                    <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                        ({{value.numProducts}})
                                                    </span>
                                                </label>
                                            </li>
                                        </ul>

                                        <!-- Product price filter-->
                                        <div
                                            v-if="filter.type === 'price'"
                                            class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-price"
                                        >
                                            <div class="rebuy-smart-search-results-page__filter-price-block">
                                                <label
                                                    for="rebuy-option-price-from"
                                                    v-html="shopCurrencySymbol()"
                                                    class="rebuy-smart-search-results-page__filter-price-label"
                                                >
                                                </label>

                                                <input
                                                    id="rebuy-option-price-from"
                                                    type="number"
                                                    class="rebuy-input rebuy-smart-search-results-page__filter-price-input"
                                                    placeholder="From"
                                                    v-bind:value="resultsPage.filterPrice.min"
                                                    min="0"
                                                    :max="resultsPage.filterPrice.max"
                                                    v-on:change="handleUpdateSearchQuery('price', 'min', {
                                                    min: resultsPage.filterPrice.min,
                                                    max: resultsPage.filterPrice.max,
                                                    price: $event.target.valueAsNumber,
                                                })"
                                                />
                                            </div>

                                            <div class="rebuy-smart-search-results-page__filter-price-dash">-</div>

                                            <div class="rebuy-smart-search-results-page__filter-price-block">
                                                <label
                                                    for="rebuy-option-price-to"
                                                    v-html="shopCurrencySymbol()"
                                                    class="rebuy-smart-search-results-page__filter-price-label"
                                                >
                                                </label>

                                                <input
                                                    id="rebuy-option-price-to"
                                                    type="number"
                                                    class="rebuy-input rebuy-smart-search-results-page__filter-price-input"
                                                    placeholder="To"
                                                    v-bind:value="resultsPage.filterPrice.max"
                                                    :min="resultsPage.filterPrice.min"
                                                    v-on:change="handleUpdateSearchQuery('price', 'max', {
                                                    min: resultsPage.filterPrice.min,
                                                    max: resultsPage.filterPrice.max,
                                                    price: $event.target.valueAsNumber,
                                                })"
                                                />
                                            </div>
                                        </div>

                                        <!-- Product Option filter-->
                                        <ul
                                            v-if="filter.type === 'product-option'"
                                            class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-option"
                                        >
                                            <li
                                                v-for="(optionGroupValue, key) in filter.values"
                                                class="rebuy-smart-search-results-page__filter-option-list"
                                            >
                                                <input
                                                    :id="'rebuy-option-product-type-' + key"
                                                    type="checkbox"
                                                    class="rebuy-checkbox"
                                                    :checked="hasSelectedFilter('product-options', getProductOptionFilterString(filter, key))"
                                                    v-on:change="handleUpdateSearchQuery('product-options', getProductOptionFilterString(filter, key), key)"
                                                />

                                                <label
                                                    :for="'rebuy-option-product-type-' + key"
                                                    class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                >
                                                    {{key}}

                                                    <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                        ({{optionGroupValue.numProducts}})
                                                    </span>
                                                </label>
                                            </li>
                                        </ul>

                                        <!-- Product metafield filter-->
                                        <ul
                                            v-if="filter.type === 'product-metafield' || filter.type === 'variant-metafield'"
                                            class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-type"
                                        >
                                            <li
                                                v-for="metafieldValue in filter.values"
                                                class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                            >
                                                <input
                                                    :id="'rebuy-metafield-' + filter.type + '-' + filter.key + '-' + metafieldValue.value"
                                                    type="checkbox"
                                                    class="rebuy-checkbox"
                                                    :checked="hasSelectedFilter(filter.type, getMetafieldFilterString(filter, metafieldValue))"
                                                    v-on:change="handleUpdateSearchQuery(filter.type, getMetafieldFilterString(filter, metafieldValue), metafieldValue.readableValue ?? metafieldValue.value)"
                                                />

                                                <label
                                                    :for="'rebuy-metafield-' + filter.type + '-' + filter.key + '-' + metafieldValue.value"
                                                    class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                >
                                                    <span v-html="metafieldValue.readableValue ? metafieldValue.readableValue : metafieldValue.value"></span>

                                                    <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                        ({{metafieldValue.numProducts}})
                                                    </span>
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>

                        <!--- Filter Skeleton -->
                        <div
                            v-if="!resultsPage?.hasLoadedInitialSearchResults"
                            class="rebuy-smart-search-results-page__filter-skeleton rebuy-smart-search-results-page-sidebar__filter-skeleton"
                        >
                            <div></div>
                        </div>
                        <!--- End Filter Skeleton -->
                    </div>
                </div>
                <!--- End Filters Section -->

                <!--- Results Section -->

                <div class="rebuy-smart-search-results-page__results-section rebuy-smart-search-results-page-sidebar__result-section">
                    <div>
                        <h3 class="rebuy-smart-search-results-page-sidebar__result-section-title">Products</h3>

                        <div class="rebuy-smart-search-results-page__container" v-bind:class="[resultsPage.resultsGridColumns, productListColumnClass()]">
                            <!--- Product Skeleton -->

                            <div
                                v-if="!resultsPage?.hasLoadedInitialSearchResults"
                                v-for="product of skeletonProducts"
                                class="rebuy-smart-search-results-page__product-skeleton"
                            >
                                <div class="rebuy-smart-search-results-page__product-skeleton"></div>
                            </div>

                            <!--- End Product Skeleton -->

                            <div
                                v-if="resultsPage?.hasLoadedInitialSearchResults && resultsPage?.searchResults?.products?.length > 0"
                                v-for="(product, index) of resultsPage?.searchResults?.products"
                                :id="'rebuy-product-id-'+ product.id"
                                :key="product.id + '-product-' + index"
                                class="rebuy-smart-search-results-page__product rebuy-smart-search-results-page-sidebar__product"
                                :style="productImageRatio()"
                            >
                                <!-- Image container -->
                                <a
                                    class="rebuy-product-media rebuy-smart-search-results-page__product-media rebuy-smart-search-results-page__absolute-image-container"
                                    v-bind:href="learnMoreURL(product)"
                                    v-on:click="learnMore(product, index)"
                                    v-bind:alt="'View ' + product.name"
                                >
                                    <div v-if="shouldShowFeaturedBadge(product)" class="rebuy-smart-search-results-page__promoted-tag">
                                        Featured
                                    </div>

                                    <img
                                        v-bind:src="getProductImage(product, product.selected_variant)"
                                        v-bind:srcset="generateImgSrcset(product)"
                                        class="rebuy-smart-search-results-page__product-image rebuy-smart-search-results-page__absolute-image rebuy-smart-search-results-page__absolute-image--zoomed"
                                        v-bind:alt="'Image of ' + product.name"
                                    />
                                </a>

                                <!-- Product Info -->
                                <div class="rebuy-smart-search-results-page__product-detail">

                                    <div class="rebuy-product-info">
                                        <!-- Product Title -->
                                        <a
                                            class="rebuy-product-title"
                                            v-bind:href="learnMoreURL(product)"
                                            v-on:click="learnMore(product, index)"
                                            v-html="product.name"
                                            v-bind:alt="'View ' + product.name"
                                        >
                                        </a>

                                        <!-- Product Review -->
                                        <div class="rebuy-product-review" v-if="shouldDisplayResultsPageProductRating(product)" aria-label="product star rating">
                                            <span class="rebuy-star-rating">
                                                <span
                                                    v-if="product.reviews.star_rating"
                                                    class="rebuy-star-rating-value sr-only"
                                                    v-html="product.ratings.average + ' stars out of 5 stars'"
                                                >
                                                </span>
                                                <span class="rebuy-star-rating-background"></span>
                                                <span class="rebuy-star-rating-foreground" v-bind:style="{ width: getProductReviewRatingPercentage(product) }"></span>
                                            </span>

                                            <span class="rebuy-review-count" v-html="getProductReviewCountHtml(product)"></span>
                                        </div>

                                        <!-- Product Price -->
                                        <div class="rebuy-product-price">
                                            <div v-if="productOnSale(product)">
                                                <span class="rebuy-money sale">
                                                    <span class="sr-only">Sale price</span>
                                                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                                                </span>

                                                <span class="rebuy-money compare-at">
                                                    <span class="sr-only">Original price</span>
                                                    <span v-html="formatMoney(product.selected_variant.compareAtPrice)"></span>
                                                </span>
                                            </div>

                                            <div v-if="!productOnSale(product)">
                                                <span class="rebuy-money">
                                                    <span class="sr-only">Price</span>
                                                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Product Options -->
                                    <div class="rebuy-product-options" v-if="shouldShowVariantSelector(product)">
                                        <select
                                            title="Select product variant"
                                            id="rebuy-smart-search-results-variant-select"
                                            class="rebuy-select"
                                            v-bind:aria-label="'variant of ' + product.name"
                                            v-model="product.selected_variant_id"
                                            v-on:change="selectVariant(product)"
                                        >
                                            <option
                                                v-for="variant in product.variants"
                                                v-bind:value="variant.id"
                                                v-html="variant.name"
                                            ></option>
                                        </select>
                                    </div>

                                    <!-- Add-to-cart -->
                                    <div class="rebuy-product-actions" v-if="shouldShowAddToCart(product)">
                                        <button
                                            class="rebuy-button rebuy-smart-search-results-page__cta"
                                            v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                                            v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                                            v-bind:aria-label="buttonAriaLabel(product)"
                                            v-on:click="addToCart(product)"
                                            type="button"
                                        >
                                            <span v-html="buttonLabel(product)"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div
                            v-if="resultsPage?.hasLoadedInitialSearchResults && (!resultsPage?.searchResults?.products || resultsPage?.searchResults?.products?.length <= 0)"
                        >
                            <p v-html="notFoundMessage()"></p>
                        </div>
                    </div>

                    <!--- Pagination -->
                    <div v-if="handleGeneratingPageList()?.length > 1">
                        <div
                            v-if="shouldRenderDefaultPagination()"
                            class="rebuy-smart-search-results-page__pagination rebuy-smart-search-results-page-sidebar__pagination-section"
                            v-bind:class="shouldDisplayAmountPerPage() ? 'rebuy-smart-search-results-page__range' : ''"
                        >

                            <!--- Range Selection -->
                            <div v-if="shouldDisplayAmountPerPage()" class="rebuy-range-selection">
                                <label
                                    class="rebuy-range-selection-label"
                                    v-bind:class="isAmountPerPageSelectionDisabled() && 'rebuy-range-selection-disabled'"
                                >
                                    Per page
                                </label>
                                <select
                                    title="Select products per page"
                                    id="rebuy-smart-search-results-per-page-select"
                                    class="rebuy-select"
                                    v-bind:class="isAmountPerPageSelectionDisabled() && 'rebuy-range-selection-disabled'"
                                    aria-label="products per page"
                                    v-model="resultsPage.searchQuery.pageSize"
                                    v-on:change="handleUpdatePaginationRange($event.target.value)"
                                    v-bind:disabled="isAmountPerPageSelectionDisabled()"
                                >
                                    <option
                                        v-for="productsPerPage in pageRangeSelection()"
                                        v-bind:value="productsPerPage.value"
                                    >
                                        {{productsPerPage.value}}
                                    </option>
                                </select>
                            </div>

                            <!--- Page Selection -->
                            <ul
                                v-if="handleGeneratingPageList()?.length > 1"
                                class="rebuy-smart-search-results-page__pagination rebuy-smart-search-results-page-sidebar__pagination"
                            >
                                <li class="rebuy-smart-search-results-page__pagination-label">
                                    <button
                                        v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                                        v-on:click="handleUpdatingPageCount('decrement')"
                                        class="rebuy-smart-search-results-page__pagination-page rebuy-smart-search-results-page__pagination-arrow"
                                        v-bind:class="{
                                            'rebuy-smart-search-results-page__pagination-arrow--disabled': parseInt(resultsPage.searchQuery.currentPage) === 1
                                        }"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z" fill="currentColor"/>
                                        </svg>
                                    </button>
                                </li>

                                <li
                                    tabindex="0"
                                    v-for="(pageNumber, index) in handleGeneratingPageList()"
                                    :key="pageNumber + '-pagination-' + index"
                                    class="rebuy-smart-search-results-page__pagination-label"
                                    v-bind:class="[parseInt(pageNumber) === parseInt(resultsPage.searchQuery.currentPage)  ? 'active' : '']"
                                >
                                    <button
                                        v-on:click="handleUpdatingPageCount('manual', pageNumber)"
                                        @keydown="(e) => handleKeyboardSubmitPrevent(e)"
                                        @keyup="(e) => handleKeyboardSubmit(e, () => { handleUpdatingPageCount('manual', pageNumber); })"
                                        class="rebuy-smart-search-results-page__pagination-page"
                                        v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                                    >

                                        <span v-if="pageNumber">
                                            {{ pageNumber }}
                                        </span>

                                        <span
                                            v-if="!pageNumber"
                                            class="rebuy-smart-search-results-page__pagination-icon--disabled"
                                            >
                                            <rebuy-icon name="more-horizontal" class="rebuy-button-icon"></rebuy-icon>
                                        </span>
                                    </button>
                                </li>

                                <li class="rebuy-smart-search-results-page__pagination-label">
                                    <button
                                        v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                                        v-on:click="handleUpdatingPageCount('increment')"
                                        class="rebuy-smart-search-results-page__pagination-page rebuy-smart-search-results-page__pagination-arrow"
                                        v-bind:class="{
                                            'rebuy-smart-search-results-page__pagination-arrow--disabled': parseInt(resultsPage.searchQuery.currentPage) === parseInt(resultsPage.searchResultsHeaderMetaData?.['search-page-total'])
                                        }"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z" fill="currentColor"/>
                                        </svg>
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <!--- Load More button -->
                        <div v-if="shouldRenderLoadMore()" class="rebuy-smart-search-results-page__continuous-scroll">
                            <button
                                v-if="!hasReachedLastPage()"
                                v-on:click="handleUpdatingPageCount('continuous')"
                                class="rebuy-button rebuy-smart-search-results-page__continuous-scroll-button"
                                v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                            >
                                {{ getLoadMoreText() }}
                            </button>
                        </div>

                        <!--- Continuous Scroll loading spinner -->
                        <div v-if="shouldRenderContinuousScroll()" class="rebuy-smart-search-results-page__continuous-scroll">
                            <div v-if="resultsPage?.isLoadingSearchTerm" class="rebuy-smart-search-results-page__continuous-scroll-loader">
                                <span> </span>
                            </div>
                        </div>

                    </div>
                    <!--- End Pagination -->
                </div>

                <!--- End Results Section -->
            </div>
            <!--- End Main Section -->

            <!--- Filter Flyout Section -->
            <div
                id="rebuy-smart-search-results-filter-flyout"
                role="dialog"
                aria-modal="true"
                aria-labelledby="filter-flyout-sidebar"
                v-bind:aria-hidden="!resultsPage.filterVisible ? 'true' : 'false'"
            >
                <div
                    class="rebuy-smart-search-results-page__flyout rebuy-smart-search-results-page__flyout"
                    v-bind:class="[resultsPage.filterVisible ? 'is-visible' : '']"
                >
                    <div class="rebuy-smart-search-results-page__flyout-inner">
                        <div class="rebuy-smart-search-results-page__flyout-header rebuy-smart-search-results-page__flyout-header">
                            <h2 class="rebuy-smart-search-results-page__flyout-header-title" v-html="filterAndSortTitle()"></h2>

                            <button
                                class="rebuy-smart-search-results-page__flyout-close rebuy-smart-search-results-page__flyout-header-close"
                                type="button"
                                v-on:click="hideFilterFlyout()"
                                aria-label="Close Filter Flyout"
                            >
                                <rebuy-icon name="x"></rebuy-icon>
                            </button>
                        </div>

                        <div class="rebuy-smart-search-results-page__flyout-body rebuy-smart-search-results-page__flyout-body">
                            <!--- Selected Filters -->
                            <div
                                v-if="hasSelectedFilters() && shouldShowSelectedFilters()"
                                class="rebuy-smart-search-results-page__selected-filters rebuy-smart-search-results-page__flyout-selected-filters  rebuy-smart-search-results-page-sidebar__selected-filters"
                            >
                                <div
                                    class="rebuy-smart-search-results-page__selected-filters-header rebuy-smart-search-results-page__flyout-selected-filters-header rebuy-smart-search-results-page-sidebar__selected-filters-header"
                                >
                                    <h4 class="rebuy-smart-search-results-page-sidebar__filter-list-title">Selected Filter</h4>

                                    <button
                                        v-on:click="resetFilters()"
                                        class="rebuy-smart-search-results-page__selected-filters-reset rebuy-smart-search-results-page-sidebar__selected-filters-reset"
                                    >
                                        Reset
                                    </button>
                                </div>

                                <div
                                    class="rebuy-smart-search-results-page__selected-filters-body rebuy-smart-search-results-page-sidebar__selected-filters-body"
                                >
                                    <div
                                        v-if="resultsPage.hasAdjustedPriceFilter"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                                    >
                                        <span class="rebuy-smart-search-results-page__selected-tag-label">
                                            <span>
                                                <span v-html="shopCurrencySymbol()"> </span>

                                                <span v-html="resultsPage.filterPrice.min"> </span>
                                            </span>

                                            <span>-</span>

                                            <span>
                                                <span v-html="shopCurrencySymbol()"> </span>

                                                <span v-html="handleMaximumPriceFilterLabel()"> </span>
                                            </span>
                                        </span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                            alt="Remove price filter"
                                            aria-label="Remove price filter"
                                            v-on:click="handleRemovingFilter('price')"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div v-if="hasSelectedFilter('availability')">
                                        <div
                                            class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                                        >
                                            <span
                                                v-html="handleAvailabilityFilterLabel()"
                                                class="rebuy-smart-search-results-page__selected-tag-label"
                                            ></span>

                                            <button
                                                type="button"
                                                class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                                v-bind:aria-label="handleRemovingFilterLabel('availability')"
                                                v-bind:aria-label="handleRemovingFilterLabel('availability')"
                                                v-on:click="handleRemovingFilter('availability')"
                                            >
                                                <rebuy-icon name="x"></rebuy-icon>
                                            </button>
                                        </div>
                                    </div>

                                    <div
                                        v-for="(tag, index) in resultsPage.searchQuery.filters.tags"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                                    >
                                        <span
                                            v-html="formatTagValue(tag)"
                                            class="rebuy-smart-search-results-page__selected-tag-label"
                                        ></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + tag + ' tag filter'"
                                            v-bind:aria-label="'Remove ' + tag + ' tag filter'"
                                            v-on:click="handleRemovingFilter('product-tags', tag)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(category, index) in resultsPage.searchQuery.filters.categories"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                                    >
                                        <span v-html="category" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + category + ' product type filter'"
                                            v-bind:aria-label="'Remove ' + category + ' product type filter'"
                                            v-on:click="handleRemovingFilter('product-type', category)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(vendor, index) in resultsPage.searchQuery.filters.vendors"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                                    >
                                        <span v-html="vendor" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + vendor + ' vendor filter'"
                                            v-bind:aria-label="'Remove ' + vendor + ' vendor filter'"
                                            v-on:click="handleRemovingFilter('vendor', vendor)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(option, index) in resultsPage.searchQuery.filters.options"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                                    >
                                        <span
                                            v-html="getReadableFilterValue(option)"
                                            class="rebuy-smart-search-results-page__selected-tag-label">
                                        </span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                            v-bind:alt="handleRemovingFilterLabel('option', option)"
                                            v-bind:aria-label="handleRemovingFilterLabel('option', option)"
                                            v-on:click="handleRemovingFilter('option', option)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(metafieldValue, index) in resultsPage.searchQuery.filters.metafields"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar__selected-filter-tag"
                                    >
                                        <span v-html="getReadableFilterValue(metafieldValue)" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove"
                                            v-bind:alt="handleRemovingFilterLabel('metafields', metafieldValue)"
                                            v-bind:aria-label="handleRemovingFilterLabel('metafields', metafieldValue)"
                                            v-on:click="handleRemovingFilter('metafields', metafieldValue)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Sort By -->
                            <div
                                v-if="getSortFilters().length && sortByStyle() === 'sortBySelect'"
                                class="rebuy-smart-search-results-page__flyout-sort-by rebuy-smart-search-results-page__sort-by rebuy-smart-search-results-page-sidebar__sort-by rebuy-smart-search-results-page-sidebar__sort-by--mobile"
                            >
                                <label
                                    for="rebuy-smart-search-sort-options"
                                    class="rebuy-smart-search-results-page-sidebar__sort-by-label"
                                    >Sort By</label
                                >

                                <div class="rebuy-filter-select-menu">
                                    <select
                                        id="rebuy-smart-search-sort-options"
                                        v-model="resultsPage.searchQuery.sortBy.field"
                                        class="rebuy-select"
                                        v-on:change="($event) => handleUpdateSearchQuery('sort_by', $event.target.value)"
                                    >
                                        <option
                                            v-for="filter in getSortFilters()"
                                            v-if="filter.enabled"
                                            v-bind:value="filter.key"
                                        >
                                            {{ filter.label || filter.name }}
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div
                                v-if="getSortFilters().length && sortByStyle() === 'sortByDropdown'"
                                class="rebuy-smart-search-results-page-sidebar__dropdown-menu-container"
                            >
                                <button
                                    aria-label="Open product filters dropdown"
                                    @click.stop="handleToggleFilterModal('sort')"
                                    @keydown="(e) => handleKeyboardSubmitPrevent(e)"
                                    @keyup="(e) => handleKeyboardSubmit(e, () => { handleToggleFilterModal('product'); })"
                                    class="rebuy-smart-search-results-page-sidebar__dropdown-menu-trigger"
                                >
                                    Sort By:
                                    <span class="rebuy-smart-search-results-page-sidebar__dropdown-menu-title">
                                        {{getSortByLabel(resultsPage.searchQuery.sortBy.field)}}
                                    </span>
                                    <rebuy-icon name="chevron-down" v-bind:class="[resultsPage?.sortFiltersVisible ? 'filter-open' : 'filter-close']"></rebuy-icon>
                                </button>

                                <ul
                                    id="sortSelectMenu"
                                    v-if="resultsPage?.sortFiltersVisible"
                                    class="rebuy-smart-search-results-page-sidebar__dropdown-menu"
                                >
                                    <li
                                        v-for="filter in getSortFilters()"
                                        v-if="filter.enabled"
                                        class="rebuy-smart-search-results-page-sidebar__dropdown-menu-list-item"
                                        :class="{'rebuy-smart-search-results-page-sidebar__dropdown-menu-list-item--active': resultsPage.searchQuery.sortBy.field === filter.key}"
                                        @click="handleUpdateSearchQuery('sort_by', filter.key)"
                                    >
                                        {{filter.label || filter.name}}
                                    </li>
                                </ul>
                            </div>

                            <!-- Filters -->
                            <ul
                                v-if="resultsPage?.hasLoadedInitialSearchResults && shouldShowAggregatedFilters()"
                                class="rebuy-smart-search-results-page__filter-list-container rebuy-smart-search-results-page-sidebar__filter-container"
                            >
                                <li
                                    v-for="(filter, index) in resultsPage.mappedAggregatedFilters"
                                    class="rebuy-smart-search-results-page-sidebar__filter-list"
                                >
                                    <div
                                        v-if="hasFilterEnabled(filter)"
                                        class="rebuy-smart-search-results-page-sidebar__filter-list-container"
                                    >
                                        <div class="rebuy-smart-search-results-page-sidebar__filter-list-header">
                                            <button
                                                class="rebuy-smart-search-results-page-sidebar__filter-list-toggle"
                                                type="button"
                                                v-bind:alt="filter.isExpanded ? 'Close ' + filter.name : 'Open ' + filter.name"
                                                v-bind:aria-label="filter.isExpanded ? 'Close ' + filter.name : 'Open ' + filter.name"
                                                v-on:click="handleToggleFilterExpansion(filter, index)"
                                            >
                                                <h4
                                                    class="rebuy-smart-search-results-page-sidebar__filter-list-title"
                                                    v-html="getFilterName(filter)"
                                                ></h4>
                                                <div v-if="filterDropDownStyle('plusMinus')">
                                                    <rebuy-icon v-if="filter.isExpanded" name="minus"></rebuy-icon>

                                                    <rebuy-icon v-if="!filter.isExpanded" name="plus"></rebuy-icon>
                                                </div>

                                                <div v-if="filterDropDownStyle('chevron')">
                                                    <rebuy-icon name="chevron-down" v-bind:class="[filter.isExpanded ? 'filter-open' : 'filter-close']"></rebuy-icon>
                                                </div>
                                            </button>
                                        </div>

                                        <div
                                            v-bind:class="[filter.isExpanded ? 'active' : '']"
                                            class="rebuy-smart-search-results-page-sidebar__filter-list-body"
                                        >
                                            <ul
                                                v-if="filter.type === 'product-tags'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-tags"
                                            >
                                                <li
                                                    v-for="value in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-tag-'+  value.tags"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('product-tags', value.tags)"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, value.tags)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-tag-'+ value.tags"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{ formatTagValue(value.tags) }}
                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{value.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <ul
                                                v-if="filter.type === 'availability'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-availability"
                                            >
                                                <li
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                                >
                                                    <label class="rebuy-radio-label">
                                                        <input
                                                            class="radio-input rebuy-radio"
                                                            v-on:click="handleUpdateSearchQuery('availability', 'available')"
                                                            :checked="hasSelectedFilter('availability', 'available')"
                                                            v-bind:value="true"
                                                            type="radio"
                                                            v-bind:disabled="!hasInStockAvailabilityFilter(filter.values)"
                                                        />
                                                        <span
                                                            class="radio-label"
                                                            v-bind:class="[!hasInStockAvailabilityFilter(filter.values)  ? 'disabled' : '']"
                                                        >
                                                            Available
                                                            <span
                                                                v-if="hasInStockAvailabilityFilter(filter.values) &&shouldShowProductFilterCount()"
                                                                v-html="numsOfAvailabilityFilter(filter.values, 'available')"
                                                                class="rebuy-smart-search-results-page__filter-label"
                                                            >
                                                            </span>
                                                        </span>
                                                    </label>
                                                </li>

                                                <li
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                                >
                                                    <label class="rebuy-radio-label">
                                                        <input
                                                            class="radio-input rebuy-radio"
                                                            v-on:click="handleUpdateSearchQuery('availability', 'soldOut')"
                                                            :checked="hasSelectedFilter('availability', 'soldOut')"
                                                            v-bind:value="false"
                                                            type="radio"
                                                            v-bind:disabled="!hasSoldOutAvailabilityFilter(filter.values)"
                                                        />

                                                        <span
                                                            class="radio-label"
                                                            v-bind:class="[!hasSoldOutAvailabilityFilter(filter.values)  ? 'disabled' : '']"
                                                        >
                                                            Sold Out
                                                            <span
                                                                v-if="hasSoldOutAvailabilityFilter(filter.values) && shouldShowProductFilterCount()"
                                                                class="rebuy-smart-search-results-page__filter-label"
                                                                v-html="numsOfAvailabilityFilter(filter.values, 'soldOut')"
                                                            >
                                                            </span>
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <ul
                                                v-if="filter.type === 'vendor'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-vendor"
                                            >
                                                <li
                                                    v-for="(value, index) in filter.values"
                                                    :key="index"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-vendor-' + value.vendorAsTag"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('vendor', value.vendorAsTag)"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, value.vendorAsTag)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-vendor-' + value.vendorAsTag"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{value.vendorAsTag}}

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{value.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <ul
                                                v-if="filter.type === 'product-type'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-type"
                                            >
                                                <li
                                                    v-for="value in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-product-type-' + value.categories"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('product-type', value.categories)"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, value.categories)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-product-type-' + value.categories"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{value.categories}}

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{value.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <div
                                                v-if="filter.type === 'price'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-price"
                                            >
                                                <div class="rebuy-smart-search-results-page__filter-price-block">
                                                    <label
                                                        for="rebuy-option-price-from"
                                                        v-html="shopCurrencySymbol()"
                                                        class="rebuy-smart-search-results-page__filter-price-label"
                                                    >
                                                    </label>

                                                    <input
                                                        id="rebuy-option-price-from"
                                                        type="number"
                                                        class="rebuy-input rebuy-smart-search-results-page__filter-price-input"
                                                        placeholder="From"
                                                        v-bind:value="filter.values.min"
                                                        v-bind:min="filter.values.min"
                                                        v-bind:max="filter.values.max"
                                                        v-on:change="handleUpdateSearchQuery('price', 'min', {
                                                        min: filter.values.min,
                                                        max: filter.values.max,
                                                        price: $event.target.value
                                                    })"
                                                    />
                                                </div>

                                                <div class="rebuy-smart-search-results-page__filter-price-dash">-</div>

                                                <div class="rebuy-smart-search-results-page__filter-price-block">
                                                    <label
                                                        for="rebuy-option-price-to"
                                                        v-html="shopCurrencySymbol()"
                                                        class="rebuy-smart-search-results-page__filter-price-label"
                                                    >
                                                    </label>

                                                    <input
                                                        id="rebuy-option-price-to"
                                                        type="number"
                                                        class="rebuy-input rebuy-smart-search-results-page__filter-price-input"
                                                        placeholder="To"
                                                        v-bind:value="filter.values.max"
                                                        v-bind:min="filter.values.min"
                                                        v-bind:max="filter.values.max"
                                                        v-on:change="handleUpdateSearchQuery('price', 'max', {
                                                        min: filter.values.min,
                                                        max: filter.values.max,
                                                        price: $event.target.value
                                                    })"
                                                    />
                                                </div>
                                            </div>

                                            <ul
                                                v-if="filter.type === 'product-option'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-option"
                                            >
                                                <li
                                                    v-for="(optionGroupValue, key) in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-product-type-' + key"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('product-options', getProductOptionFilterString(filter, key))"
                                                        v-on:change="handleUpdateSearchQuery('product-options', getProductOptionFilterString(filter, key), key)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-product-type-' + key"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{key}}

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{optionGroupValue.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <ul
                                                v-if="filter.type === 'product-metafield' || filter.type === 'variant-metafield'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-type"
                                            >
                                                <li
                                                    v-for="metafieldValue in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-metafield-' + filter.type + '-' + filter.key + '-' + metafieldValue.value"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter(filter.type, getMetafieldFilterString(filter, metafieldValue))"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, getMetafieldFilterString(filter, metafieldValue), metafieldValue.readableValue ?? metafieldValue.value)"
                                                    />

                                                    <label
                                                        :for="'rebuy-metafield-' + filter.type + '-' + filter.key + '-' + metafieldValue.value"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        <span v-html="metafieldValue.readableValue ? metafieldValue.readableValue : metafieldValue.value"></span>

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{metafieldValue.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div
                    class="rebuy-smart-search-results-page__background"
                    v-on:click="hideFilterFlyout()"
                    v-bind:class="[resultsPage.filterVisible ? 'is-visible' : '']"
                >
                    <span></span>
                </div>
            </div>
            <!--- End Filter Flyout Section -->

            <div v-if="shouldShowPoweredByRebuy()" class="powered-by-rebuy">
                <a v-bind:href="'https://rebuyengine.com/?shop=' + shop()" target="_blank" rel="noopener">
                    Powered by Rebuy
                </a>
            </div>
        </div>
    </div>
</script>
{% endraw %}

```

<br />

### Results Page Sidebar Flyout Template

```html title="Last Updated: January 21, 2026"
{% raw %}
<script id="rebuy-smart-search-results-sidebar-flyout-filter-template" type="text/template">
    <div id="rebuy-smart-search-results-sidebar-flyout-filter">
        <div v-if="shouldShowResultsPage()">
            <!--- Search Input Section -->
            <div class="rebuy-smart-search-results-page__header-section rebuy-smart-search-results-page-sidebar-flyout__header-section">
                <div
                    v-if="resultsPage.searchQuery && shouldShowSearchBar()"
                    class="rebuy-smart-search-results-page__input-section rebuy-smart-search-results-page-sidebar-flyout__input-section"
                >
                    <label for="rebuy-smart-search-results-page-sidebar-flyout__input" class="sr-only">Search for products</label>

                    <div class="rebuy-smart-search-results-page__input-search-container">
                        <input
                            type="text"
                            class="rebuy-smart-search-results-page-sidebar-flyout__input rebuy-input"
                            :placeholder="placeholderText()"
                            id="rebuy-smart-search-results-page-sidebar-flyout__input"
                            v-model="resultsPage.searchQuery.searchTerm"
                            @input="debouncedSearch($event.target.value)"
                            @keydown.enter.stop.prevent="checkKeywordSearch"
                        />

                        <div v-if="resultsPage?.isLoadingSearchTerm" class="rebuy-smart-search-results-page__loader">
                            <span> </span>
                        </div>
                    </div>
                </div>

                <div class="rebuy-smart-search-results-page__context-section rebuy-smart-search-results-page-sidebar-flyout__context-section">
                    <div class="rebuy-smart-search-results-page-sidebar-flyout__context-left">
                        <h2 class="rebuy-smart-search-results-page-sidebar-flyout__result-title" v-html="pageTitle()"></h2>
                    </div>

                    <div
                        v-if="shouldShowAggregatedFilters() || hasSelectedFilters()"
                        class="rebuy-smart-search-results-page-sidebar-flyout__context-right"
                    >
                        <!-- Sort By Trigger -->
                        <div class="rebuy-smart-search-results-page-sidebar-flyout__filter-trigger">
                            <button
                                class="rebuy-smart-search-results-page-sidebar-flyout__filter-mobile-facets"
                                @click="showFilterFlyout()"
                            >
                                <svg
                                    class="rebuy-smart-search-results-page-sidebar-flyout__filter-mobile-facets-icon"
                                    aria-hidden="true"
                                    focusable="false"
                                    role="presentation"
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                >
                                    <path
                                        fill-rule="evenodd"
                                        d="M4.833 6.5a1.667 1.667 0 1 1 3.334 0 1.667 1.667 0 0 1-3.334 0ZM4.05 7H2.5a.5.5 0 0 1 0-1h1.55a2.5 2.5 0 0 1 4.9 0h8.55a.5.5 0 0 1 0 1H8.95a2.5 2.5 0 0 1-4.9 0Zm11.117 6.5a1.667 1.667 0 1 0-3.334 0 1.667 1.667 0 0 0 3.334 0ZM13.5 11a2.5 2.5 0 0 1 2.45 2h1.55a.5.5 0 0 1 0 1h-1.55a2.5 2.5 0 0 1-4.9 0H2.5a.5.5 0 0 1 0-1h8.55a2.5 2.5 0 0 1 2.45-2Z"
                                        fill="currentColor"
                                    ></path>
                                </svg>

                                <span class="rebuy-smart-search-results-page-sidebar-flyout__filter-mobile-facets-label"
                                    >Filter and sort</span
                                >
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!--- End Search Input Section -->

            <!--- Main Section -->
            <div class="rebuy-smart-search-results-page__main-section rebuy-smart-search-results-page-sidebar-flyout__main-section">
                <!--- Results Section -->
                <div class="rebuy-smart-search-results-page__results-section rebuy-smart-search-results-page-sidebar-flyout__result-section">
                    <div>
                        <h3 class="rebuy-smart-search-results-page-sidebar-flyout__result-section-title">Products</h3>

                        <div class="rebuy-smart-search-results-page__container" v-bind:class="[resultsPage.resultsGridColumns, productListColumnClass()]">
                            <!--- Product Skeleton -->

                            <div
                                v-if="!resultsPage?.hasLoadedInitialSearchResults"
                                v-for="product of skeletonProducts"
                                class="rebuy-smart-search-results-page__product-skeleton"
                            >
                                <div class="rebuy-smart-search-results-page__product-skeleton"></div>
                            </div>

                            <!--- End Product Skeleton -->

                            <div
                                v-if="resultsPage?.hasLoadedInitialSearchResults && resultsPage?.searchResults?.products?.length > 0"
                                v-for="(product, index) of resultsPage?.searchResults?.products"
                                :id="'rebuy-product-id-'+ product.id"
                                :key="product.id"
                                class="rebuy-smart-search-results-page__product rebuy-smart-search-results-page-sidebar-flyout__product"
                                :style="productImageRatio()"
                            >
                                <!-- Image container -->
                                <a
                                    class="rebuy-product-media rebuy-smart-search-results-page__product-media rebuy-smart-search-results-page__product-media rebuy-smart-search-results-page__absolute-image-container"
                                    v-bind:href="learnMoreURL(product)"
                                    v-on:click="learnMore(product, index)"
                                    v-bind:alt="'View ' + product.name"
                                >
                                    <div v-if="shouldShowFeaturedBadge(product)" class="rebuy-smart-search-results-page__promoted-tag">
                                        Featured
                                    </div>

                                    <img
                                        v-bind:src="getProductImage(product, product.selected_variant)"
                                        v-bind:srcset="generateImgSrcset(product)"
                                        class="rebuy-smart-search-results-page__product-image rebuy-smart-search-results-page__absolute-image rebuy-smart-search-results-page__absolute-image--zoomed"
                                        v-bind:alt="'Image of ' + product.name"
                                    />
                                </a>

                                <!-- Product Info -->
                                <div class="rebuy-smart-search-results-page__product-detail">
                                    <div class="rebuy-product-info">
                                        <!-- Product Title -->
                                        <a
                                            class="rebuy-product-title"
                                            v-bind:href="learnMoreURL(product)"
                                            v-on:click="learnMore(product, index)"
                                            v-html="product.name"
                                            v-bind:alt="'View ' + product.name"
                                        >
                                        </a>

                                        <!-- Product Review -->
                                        <div class="rebuy-product-review" v-if="shouldDisplayResultsPageProductRating(product)" aria-label="product star rating">
                                            <span class="rebuy-star-rating">
                                                <span
                                                    v-if="product.reviews.star_rating"
                                                    class="rebuy-star-rating-value sr-only"
                                                    v-html="product.ratings.average + ' stars out of 5 stars'"
                                                >
                                                </span>
                                                <span class="rebuy-star-rating-background"></span>
                                                <span class="rebuy-star-rating-foreground" v-bind:style="{ width: getProductReviewRatingPercentage(product) }"></span>
                                            </span>

                                            <span class="rebuy-review-count" v-html="getProductReviewCountHtml(product)"></span>
                                        </div>

                                        <!-- Product Price -->
                                        <div class="rebuy-product-price">
                                            <div v-if="productOnSale(product)">
                                                <span class="rebuy-money sale">
                                                    <span class="sr-only">Sale price</span>
                                                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                                                </span>

                                                <span class="rebuy-money compare-at">
                                                    <span class="sr-only">Original price</span>
                                                    <span v-html="formatMoney(product.selected_variant.compareAtPrice)"></span>
                                                </span>
                                            </div>

                                            <div v-if="!productOnSale(product)">
                                                <span class="rebuy-money">
                                                    <span class="sr-only">Price</span>
                                                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Product Options -->
                                    <div class="rebuy-product-options" v-if="shouldShowVariantSelector(product)">
                                        <select
                                            title="Select product variant"
                                            id="rebuy-smart-search-results-variant-select"
                                            class="rebuy-select"
                                            v-bind:aria-label="'variant of ' + product.name"
                                            v-model="product.selected_variant_id"
                                            v-on:change="selectVariant(product)"
                                        >
                                            <option
                                                v-for="variant in product.variants"
                                                v-bind:value="variant.id"
                                                v-html="variant.name"
                                            ></option>
                                        </select>
                                    </div>

                                    <!-- Add-to-cart -->
                                    <div class="rebuy-product-actions" v-if="shouldShowAddToCart(product)">
                                        <button
                                            class="rebuy-button rebuy-smart-search-results-page__cta"
                                            v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
                                            v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
                                            v-bind:aria-label="buttonAriaLabel(product)"
                                            v-on:click="addToCart(product)"
                                            type="button"
                                        >
                                            <span v-html="buttonLabel(product)"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div
                            v-if="resultsPage?.hasLoadedInitialSearchResults && (!resultsPage?.searchResults?.products || resultsPage?.searchResults?.products?.length <= 0)"
                        >
                            <p v-html="notFoundMessage()"></p>
                        </div>
                    </div>

                    <!--- Pagination -->
                    <div v-if="handleGeneratingPageList()?.length > 1">
                    <div
                        v-if="shouldRenderDefaultPagination()"
                        class="rebuy-smart-search-results-page__pagination rebuy-smart-search-results-page-sidebar__pagination-section"
                        v-bind:class="shouldDisplayAmountPerPage() ? 'rebuy-smart-search-results-page__range' : ''"
                    >

                            <!--- Range Selection -->
                            <div v-if="shouldDisplayAmountPerPage()" class="rebuy-range-selection">
                                <label
                                    class="rebuy-range-selection-label"
                                    v-bind:class="isAmountPerPageSelectionDisabled() && 'rebuy-range-selection-disabled'"
                                >
                                    Per page
                                </label>
                                <select
                                    title="Select products per page"
                                    id="rebuy-smart-search-results-per-page-select"
                                    class="rebuy-select"
                                    v-bind:class="isAmountPerPageSelectionDisabled() && 'rebuy-range-selection-disabled'"
                                    aria-label="products per page"
                                    v-model="resultsPage.searchQuery.pageSize"
                                    v-on:change="handleUpdatePaginationRange($event.target.value)"
                                    v-bind:disabled="isAmountPerPageSelectionDisabled()"
                                >
                                    <option
                                        v-for="productsPerPage in pageRangeSelection()"
                                        v-bind:value="productsPerPage.value"
                                    >
                                        {{productsPerPage.value}}
                                    </option>
                                </select>
                            </div>

                            <!--- Page Selection -->
                            <ul
                                v-if="handleGeneratingPageList()?.length > 1"
                                class="rebuy-smart-search-results-page__pagination rebuy-smart-search-results-page-sidebar__pagination"
                            >
                                <li class="rebuy-smart-search-results-page__pagination-label">
                                    <button
                                        v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                                        v-on:click="handleUpdatingPageCount('decrement')"
                                        class="rebuy-smart-search-results-page__pagination-page rebuy-smart-search-results-page__pagination-arrow"
                                        v-bind:class="{
                                            'rebuy-smart-search-results-page__pagination-arrow--disabled': parseInt(resultsPage.searchQuery.currentPage) === 1
                                        }"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z" fill="currentColor"/>
                                        </svg>
                                    </button>
                                </li>

                                <li
                                    tabindex="0"
                                    v-for="(pageNumber, index) in handleGeneratingPageList()"
                                    :key="pageNumber + '-pagination-' + index"
                                    class="rebuy-smart-search-results-page__pagination-label"
                                    v-bind:class="[parseInt(pageNumber) === parseInt(resultsPage.searchQuery.currentPage)  ? 'active' : '']"
                                >
                                    <button
                                        v-on:click="handleUpdatingPageCount('manual', pageNumber)"
                                        @keydown="(e) => handleKeyboardSubmitPrevent(e)"
                                        @keyup="(e) => handleKeyboardSubmit(e, () => { handleUpdatingPageCount('manual', pageNumber); })"
                                        class="rebuy-smart-search-results-page__pagination-page"
                                        v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                                    >

                                        <span v-if="pageNumber">
                                            {{ pageNumber }}
                                        </span>

                                        <span
                                            v-if="!pageNumber"
                                            class="rebuy-smart-search-results-page__pagination-icon--disabled"
                                            >
                                            <rebuy-icon name="more-horizontal" class="rebuy-button-icon"></rebuy-icon>
                                        </span>
                                    </button>
                                </li>

                                <li class="rebuy-smart-search-results-page__pagination-label">
                                    <button
                                        v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                                        v-on:click="handleUpdatingPageCount('increment')"
                                        class="rebuy-smart-search-results-page__pagination-page rebuy-smart-search-results-page__pagination-arrow"
                                        v-bind:class="{
                                            'rebuy-smart-search-results-page__pagination-arrow--disabled': parseInt(resultsPage.searchQuery.currentPage) === parseInt(resultsPage.searchResultsHeaderMetaData?.['search-page-total'])
                                        }"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z" fill="currentColor"/>
                                        </svg>
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <!--- Load More button -->
                        <div v-if="shouldRenderLoadMore()" class="rebuy-smart-search-results-page__continuous-scroll">
                            <button
                                v-if="!hasReachedLastPage()"
                                v-on:click="handleUpdatingPageCount('continuous')"
                                class="rebuy-button rebuy-smart-search-results-page__continuous-scroll-button"
                                v-bind:disabled="resultsPage?.isLoadingSearchTerm"
                            >
                                {{ getLoadMoreText() }}
                            </button>
                        </div>

                        <!--- Continuous Scroll loading spinner -->
                        <div v-if="shouldRenderContinuousScroll()" class="rebuy-smart-search-results-page__continuous-scroll">
                            <div v-if="resultsPage?.isLoadingSearchTerm" class="rebuy-smart-search-results-page__continuous-scroll-loader">
                                <span> </span>
                            </div>
                        </div>

                    </div>
                    <!--- End Pagination -->
                </div>

                <!--- End Results Section -->
            </div>
            <!--- End Main Section -->

            <!--- Filter Flyout Section -->
            <div
                id="rebuy-smart-search-results-filter-flyout"
                role="dialog"
                aria-modal="true"
                aria-labelledby="filter-flyout-sidebar"
                v-bind:aria-hidden="!resultsPage.filterVisible ? 'true' : 'false'"
            >
                <div
                    class="rebuy-smart-search-results-page__flyout rebuy-smart-search-results-page__flyout"
                    v-bind:class="[resultsPage.filterVisible ? 'is-visible' : '']"
                >
                    <div class="rebuy-smart-search-results-page__flyout-inner">
                        <div class="rebuy-smart-search-results-page__flyout-header rebuy-smart-search-results-page__flyout-header">
                            <h2 class="rebuy-smart-search-results-page__flyout-header-title" v-html="filterAndSortTitle()"></h2>

                            <button
                                class="rebuy-smart-search-results-page__flyout-close rebuy-smart-search-results-page__flyout-header-close"
                                type="button"
                                v-on:click="hideFilterFlyout()"
                                aria-label="Close Filter Flyout"
                            >
                                <rebuy-icon name="x"></rebuy-icon>
                            </button>
                        </div>

                        <div class="rebuy-smart-search-results-page__flyout-body rebuy-smart-search-results-page__flyout-body">
                            <!--- Selected Filters -->
                            <div
                                v-if="hasSelectedFilters() && shouldShowSelectedFilters()"
                                class="rebuy-smart-search-results-page__selected-filters rebuy-smart-search-results-page__flyout-selected-filters  rebuy-smart-search-results-page-sidebar-flyout__selected-filters"
                            >
                                <div
                                    class="rebuy-smart-search-results-page__selected-filters-header rebuy-smart-search-results-page__flyout-selected-filters-header rebuy-smart-search-results-page-sidebar-flyout__selected-filters-header"
                                >
                                    <h4 class="rebuy-smart-search-results-page-sidebar-flyout__filter-list-title">Selected Filter</h4>

                                    <button
                                        v-on:click="resetFilters()"
                                        class="rebuy-smart-search-results-page__selected-filters-reset rebuy-smart-search-results-page-sidebar-flyout__selected-filters-reset"
                                    >
                                        Reset
                                    </button>
                                </div>

                                <div
                                    class="rebuy-smart-search-results-page__selected-filters-body rebuy-smart-search-results-page-sidebar-flyout__selected-filters-body"
                                >
                                    <div
                                        v-if="resultsPage.hasAdjustedPriceFilter"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag"
                                    >
                                        <span class="rebuy-smart-search-results-page__selected-tag-label">
                                            <span>
                                                <span v-html="shopCurrencySymbol()"> </span>

                                                <span v-html="resultsPage.filterPrice.min"> </span>
                                            </span>

                                            <span>-</span>

                                            <span>
                                                <span v-html="shopCurrencySymbol()"> </span>

                                                <span v-html="handleMaximumPriceFilterLabel()"> </span>
                                            </span>
                                        </span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag-remove"
                                            alt="Remove price filter"
                                            aria-label="Remove price filter"
                                            v-on:click="handleRemovingFilter('price')"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div v-if="hasSelectedFilter('availability')">
                                        <div
                                            class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag"
                                        >
                                            <span
                                                v-html="handleAvailabilityFilterLabel()"
                                                class="rebuy-smart-search-results-page__selected-tag-label"
                                            ></span>

                                            <button
                                                type="button"
                                                class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag-remove"
                                                v-bind:aria-label="handleRemovingFilterLabel('availability')"
                                                v-bind:aria-label="handleRemovingFilterLabel('availability')"
                                                v-on:click="handleRemovingFilter('availability')"
                                            >
                                                <rebuy-icon name="x"></rebuy-icon>
                                            </button>
                                        </div>
                                    </div>

                                    <div
                                        v-for="(tag, index) in resultsPage.searchQuery.filters.tags"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag"
                                    >
                                        <span
                                            v-html="formatTagValue(tag)"
                                            class="rebuy-smart-search-results-page__selected-tag-label"
                                        ></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + tag + ' tag filter'"
                                            v-bind:aria-label="'Remove ' + tag + ' tag filter'"
                                            v-on:click="handleRemovingFilter('product-tags', tag)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(category, index) in resultsPage.searchQuery.filters.categories"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag"
                                    >
                                        <span v-html="category" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + category + ' product type filter'"
                                            v-bind:aria-label="'Remove ' + category + ' product type filter'"
                                            v-on:click="handleRemovingFilter('product-type', category)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(vendor, index) in resultsPage.searchQuery.filters.vendors"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag"
                                    >
                                        <span v-html="vendor" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag-remove"
                                            v-bind:alt="'Remove ' + vendor + ' vendor filter'"
                                            v-bind:aria-label="'Remove ' + vendor + ' vendor filter'"
                                            v-on:click="handleRemovingFilter('vendor', vendor)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(option, index) in resultsPage.searchQuery.filters.options"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag"
                                    >
                                        <span v-html="getReadableFilterValue(option)" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag-remove"
                                            v-bind:alt="handleRemovingFilterLabel('option', option)"
                                            v-bind:aria-label="handleRemovingFilterLabel('option', option)"
                                            v-on:click="handleRemovingFilter('option', option)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>

                                    <div
                                        v-for="(metafieldValue, index) in resultsPage.searchQuery.filters.metafields"
                                        class="rebuy-smart-search-results-page__selected-filter-tag rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag"
                                    >
                                        <span v-html="getReadableFilterValue(metafieldValue)" class="rebuy-smart-search-results-page__selected-tag-label"></span>

                                        <button
                                            type="button"
                                            class="rebuy-smart-search-results-page__selected-filter-tag-remove rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag-remove"
                                            v-bind:alt="handleRemovingFilterLabel('metafields', metafieldValue)"
                                            v-bind:aria-label="handleRemovingFilterLabel('metafields', metafieldValue)"
                                            v-on:click="handleRemovingFilter('metafields', metafieldValue)"
                                        >
                                            <rebuy-icon name="x"></rebuy-icon>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Sort By -->
                            <div
                                v-if="shouldShowSortBy()"
                                class="rebuy-smart-search-results-page__flyout-sort-by rebuy-smart-search-results-page__sort-by rebuy-smart-search-results-page-sidebar-flyout__sort-by rebuy-smart-search-results-page-sidebar-flyout__sort-by--mobile"
                            >
                                <label
                                    for="rebuy-smart-search-sort-options"
                                    class="rebuy-smart-search-results-page-sidebar-flyout__sort-by-label"
                                    v-if="sortByStyle() === 'sortBySelect'"
                                    >Sort By</label
                                >

                                <div v-if="sortByStyle() === 'sortBySelect'" class="rebuy-filter-select-menu">
                                    <select
                                        id="rebuy-smart-search-sort-options"
                                        class="rebuy-select"
                                        v-model="resultsPage.searchQuery.sortBy.field"
                                        v-on:change="($event) => handleUpdateSearchQuery('sort_by', $event.target.value)"
                                    >
                                        <option
                                            v-for="filter in getSortFilters()"
                                            v-if="filter.enabled"
                                            v-bind:value="filter.key"
                                        >
                                            {{ filter.label || filter.name }}
                                        </option>
                                    </select>
                                </div>

                                <div
                                    v-if="sortByStyle() === 'sortByDropdown'"
                                    class="rebuy-smart-search-results-page-dropdown__dropdown-menu-container"
                                >
                                    <button
                                        aria-label="Open product filters dropdown"
                                        @click.stop="handleToggleFilterModal('sort')"
                                        @keydown="(e) => handleKeyboardSubmitPrevent(e)"
                                        @keyup="(e) => handleKeyboardSubmit(e, () => { handleToggleFilterModal('product'); })"
                                        class="rebuy-smart-search-results-page-dropdown__dropdown-menu-trigger"
                                    >
                                        Sort By:
                                        <span class="rebuy-smart-search-results-page-dropdown__dropdown-menu-title">
                                            {{getSortByLabel(resultsPage.searchQuery.sortBy.field)}}
                                        </span>
                                        <rebuy-icon name="chevron-down" v-bind:class="[resultsPage?.sortFiltersVisible ? 'filter-open' : 'filter-close']"></rebuy-icon>
                                    </button>

                                    <ul
                                        id="sortSelectMenu"
                                        v-if="resultsPage?.sortFiltersVisible"
                                        class="rebuy-smart-search-results-page-dropdown__dropdown-menu"
                                    >
                                        <li
                                            v-for="filter in getSortFilters()"
                                            v-if="filter.enabled"
                                            class="rebuy-smart-search-results-page-dropdown__dropdown-menu-list-item"
                                            :class="{'rebuy-smart-search-results-page-dropdown__dropdown-menu-list-item--active': resultsPage.searchQuery.sortBy.field === filter.key}"
                                            @click="handleUpdateSearchQuery('sort_by', filter.key)"
                                        >
                                            {{filter.label || filter.name}}
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Filters -->
                            <ul
                                v-if="resultsPage?.hasLoadedInitialSearchResults && resultsPage?.mappedAggregatedFilters?.length > 0"
                                class="rebuy-smart-search-results-page__filter-list-container rebuy-smart-search-results-page-sidebar-flyout__filter-container"
                            >
                                <li
                                    v-for="(filter, index) in resultsPage.mappedAggregatedFilters"
                                    class="rebuy-smart-search-results-page-sidebar-flyout__filter-list"
                                >
                                    <div
                                        v-if="hasFilterEnabled(filter)"
                                        class="rebuy-smart-search-results-page-sidebar-flyout__filter-list-container"
                                    >
                                        <div class="rebuy-smart-search-results-page-sidebar-flyout__filter-list-header">
                                            <button
                                                class="rebuy-smart-search-results-page-sidebar-flyout__filter-list-toggle"
                                                type="button"
                                                v-bind:alt="filter.isExpanded ? 'Close ' + filter.name : 'Open ' + filter.name"
                                                v-bind:aria-label="filter.isExpanded ? 'Close ' + filter.name : 'Open ' + filter.name"
                                                v-on:click="handleToggleFilterExpansion(filter, index)"
                                            >
                                                <h4
                                                    class="rebuy-smart-search-results-page-sidebar-flyout__filter-list-title"
                                                    v-html="getFilterName(filter)"
                                                ></h4>
                                                <div v-if="filterDropDownStyle('plusMinus')">
                                                    <rebuy-icon v-if="filter.isExpanded" name="minus"></rebuy-icon>

                                                    <rebuy-icon v-if="!filter.isExpanded" name="plus"></rebuy-icon>
                                                </div>

                                                <div v-if="filterDropDownStyle('chevron')">
                                                    <rebuy-icon name="chevron-down" v-bind:class="[filter.isExpanded ? 'filter-open' : 'filter-close']"></rebuy-icon>
                                                </div>
                                            </button>
                                        </div>

                                        <div
                                            v-bind:class="[filter.isExpanded ? 'active' : '']"
                                            class="rebuy-smart-search-results-page-sidebar-flyout__filter-list-body"
                                        >
                                            <!-- Product tags filter-->
                                            <ul
                                                v-if="filter.type === 'product-tags'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-tags"
                                            >
                                                <li
                                                    v-for="value in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar-flyout__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-tag-'+  value.tags"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('product-tags', value.tags)"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, value.tags)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-tag-'+ value.tags"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{ formatTagValue(value.tags) }}
                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{value.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Product availability filter-->
                                            <ul
                                                v-if="filter.type === 'availability'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-availability"
                                            >
                                                <li
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar-flyout__filter-list"
                                                >
                                                    <label class="rebuy-radio-label">
                                                        <input
                                                            class="radio-input rebuy-radio"
                                                            v-on:click="handleUpdateSearchQuery('availability', 'available')"
                                                            :checked="hasSelectedFilter('availability', 'available')"
                                                            v-bind:value="true"
                                                            type="radio"
                                                            v-bind:disabled="!hasInStockAvailabilityFilter(filter.values)"
                                                        />
                                                        <span
                                                            class="radio-label"
                                                            v-bind:class="[!hasInStockAvailabilityFilter(filter.values)  ? 'disabled' : '']"
                                                        >
                                                            Available
                                                            <span
                                                                v-if="hasInStockAvailabilityFilter(filter.values) && shouldShowProductFilterCount()"
                                                                v-html="numsOfAvailabilityFilter(filter.values, 'available')"
                                                                class="rebuy-smart-search-results-page__filter-label"
                                                            >
                                                            </span>
                                                        </span>
                                                    </label>
                                                </li>

                                                <li
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar-flyout__filter-list"
                                                >
                                                    <label class="rebuy-radio-label">
                                                        <input
                                                            class="radio-input rebuy-radio"
                                                            v-on:click="handleUpdateSearchQuery('availability', 'soldOut')"
                                                            :checked="hasSelectedFilter('availability', 'soldOut')"
                                                            v-bind:value="false"
                                                            type="radio"
                                                            v-bind:disabled="!hasSoldOutAvailabilityFilter(filter.values)"
                                                        />

                                                        <span
                                                            class="radio-label"
                                                            v-bind:class="[!hasSoldOutAvailabilityFilter(filter.values)  ? 'disabled' : '']"
                                                        >
                                                            Sold Out
                                                            <span
                                                                v-if="hasSoldOutAvailabilityFilter(filter.values) && shouldShowProductFilterCount()"
                                                                class="rebuy-smart-search-results-page__filter-label"
                                                                v-html="numsOfAvailabilityFilter(filter.values, 'soldOut')"
                                                            >
                                                            </span>
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Product vendor filter-->
                                            <ul
                                                v-if="filter.type === 'vendor'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-vendor"
                                            >
                                                <li
                                                    v-for="(value, index) in filter.values"
                                                    :key="index"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar-flyout__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-vendor-' + value.vendorAsTag"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('vendor', value.vendorAsTag)"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, value.vendorAsTag)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-vendor-' + value.vendorAsTag"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{value.vendorAsTag}}

                                                        <span v-if="shouldShowProductFilterCount()" v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{value.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Product type filter-->
                                            <ul
                                                v-if="filter.type === 'product-type'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-type"
                                            >
                                                <li
                                                    v-for="value in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar-flyout__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-product-type-' + value.categories"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('product-type', value.categories)"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, value.categories)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-product-type-' + value.categories"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{value.categories}}

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{value.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Product price filter-->
                                            <div
                                                v-if="filter.type === 'price'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-price"
                                            >
                                                <div class="rebuy-smart-search-results-page__filter-price-block">
                                                    <label
                                                        for="rebuy-option-price-from"
                                                        v-html="shopCurrencySymbol()"
                                                        class="rebuy-smart-search-results-page__filter-price-label"
                                                    >
                                                    </label>

                                                    <input
                                                        id="rebuy-option-price-from"
                                                        type="number"
                                                        class="rebuy-input rebuy-smart-search-results-page__filter-price-input"
                                                        placeholder="From"
                                                        v-bind:value="resultsPage.filterPrice.min"
                                                        min="0"
                                                        :max="resultsPage.filterPrice.max"
                                                        v-on:change="handleUpdateSearchQuery('price', 'min', {
                                                            min: resultsPage.filterPrice.min,
                                                            max: resultsPage.filterPrice.max,
                                                            price: $event.target.valueAsNumber,
                                                        })"
                                                    />
                                                </div>

                                                <div class="rebuy-smart-search-results-page__filter-price-dash">-</div>

                                                <div class="rebuy-smart-search-results-page__filter-price-block">
                                                    <label
                                                        for="rebuy-option-price-to"
                                                        v-html="shopCurrencySymbol()"
                                                        class="rebuy-smart-search-results-page__filter-price-label"
                                                    >
                                                    </label>

                                                    <input
                                                        id="rebuy-option-price-to"
                                                        type="number"
                                                        class="rebuy-input rebuy-smart-search-results-page__filter-price-input"
                                                        placeholder="To"
                                                        v-bind:value="resultsPage.filterPrice.max"
                                                        :min="resultsPage.filterPrice.min"
                                                        v-on:change="handleUpdateSearchQuery('price', 'max', {
                                                            min: resultsPage.filterPrice.min,
                                                            max: resultsPage.filterPrice.max,
                                                            price: $event.target.valueAsNumber,
                                                        })"
                                                    />
                                                </div>
                                            </div>

                                            <!-- Product option filter-->
                                            <ul
                                                v-if="filter.type === 'product-option'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-option"
                                            >
                                                <li
                                                    v-for="(optionGroupValue, key) in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list"
                                                >
                                                    <input
                                                        :id="'rebuy-option-product-type-' + key"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter('product-options', getProductOptionFilterString(filter, key))"
                                                        v-on:change="handleUpdateSearchQuery('product-options', getProductOptionFilterString(filter, key), key)"
                                                    />

                                                    <label
                                                        :for="'rebuy-option-product-type-' + key"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        {{key}}

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{optionGroupValue.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>

                                            <!-- Product metafield filter-->
                                            <ul
                                                v-if="filter.type === 'product-metafield' || filter.type === 'variant-metafield'"
                                                class="rebuy-smart-search-results-page__filter-option rebuy-smart-search-results-page__filter-product-type"
                                            >
                                                <li
                                                    v-for="metafieldValue in filter.values"
                                                    class="rebuy-smart-search-results-page__filter-option-list rebuy-smart-search-results-page-sidebar-flyout__filter-list"
                                                >
                                                    <input
                                                        :id="'rebuy-metafield-' + filter.type + '-' + filter.key + '-' + metafieldValue.value"
                                                        type="checkbox"
                                                        class="rebuy-checkbox"
                                                        :checked="hasSelectedFilter(filter.type, getMetafieldFilterString(filter, metafieldValue))"
                                                        v-on:change="handleUpdateSearchQuery(filter.type, getMetafieldFilterString(filter, metafieldValue), metafieldValue.readableValue ?? metafieldValue.value)"
                                                    />

                                                    <label
                                                        :for="'rebuy-metafield-' + filter.type + '-' + filter.key + '-' + metafieldValue.value"
                                                        class="rebuy-smart-search-results-page__filter-option-checkbox-label"
                                                    >
                                                        <span v-html="metafieldValue.readableValue ? metafieldValue.readableValue : metafieldValue.value"></span>

                                                        <span v-if="shouldShowProductFilterCount()" class="rebuy-smart-search-results-page__filter-label">
                                                            ({{metafieldValue.numProducts}})
                                                        </span>
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div
                    class="rebuy-smart-search-results-page__background"
                    v-on:click="hideFilterFlyout()"
                    v-bind:class="[resultsPage.filterVisible ? 'is-visible' : '']"
                >
                    <span></span>
                </div>
            </div>
            <!--- End Filter Flyout Section -->

            <div v-if="shouldShowPoweredByRebuy()" class="powered-by-rebuy">
                <a v-bind:href="'https://rebuyengine.com/?shop=' + shop()" target="_blank" rel="noopener">
                    Powered by Rebuy
                </a>
            </div>
        </div>
    </div>
</script>
{% endraw %}
```

**NOTE:** Results Page templates change regularly, so check back often to ensure that you have updated to the newest version and can take advantage of the most up-to-date Smart Search Quick View features and functionality.

---

# Results Page Methods (2.0KB)

Source: https://developers.rebuyengine.com/reference/results-page-methods.md

All methods below are as if the Smart Search object has a reference variable defined as shown in this code snippet.

```javascript
const ResultsPage = window.Rebuy.SmartSearch.resultsPage.view;
```

_This is not a complete list of the globally available functions but the ones that we find most helpful._

## shouldShowAggregatedFilters

Returns mapped filters by combining merchant search filter settings & search result matched filters.

**Kind**: global constant
**Returns**: `boolean`

## shouldShowSortBy

Determines if search should show sort by settings.

**Kind**: global constant
**Returns**: `boolean`

## shouldShowFilterAndSort

Determines if search should show the header section where filter and sort by settings displays.

**Kind**: global constant
**Returns**: `boolean`

## getProductFilters

Returns results page filter settings in index sorted order.

**Kind**: global constant
**Returns**: `Array`

## getSortFilters

Returns results page sort by settings in index sorted order.

**Kind**: global constant
**Returns**: `Array`

## shopCurrencySymbol

Returns shop currency symbol.

**Kind**: global constant
**Returns**: `Array`

## handleDefaultSearchQueryState

Returns the default search query for results page search.

**Kind**: global constant
**Returns**: `Array`

## showFilterFlyout

Display the filter flyout if the template has its code.

**Kind**: global constant
**Returns**: `boolean`

## hideFilterFlyout

Hide the filter flyout if the template has its code.

**Kind**: global constant
**Returns**: `boolean`

---

Customize how your search results appear to shoppers. Optimize Search Results for Conversions. The presentation of search results holds equal significance to their content. Enable flexible modifications with configurable Filters and Sort By options, and gain insights into how shoppers utilize these modifiers to discover and purchase desired products.

---

# Modal Custom Templates (8.3KB)

Source: https://developers.rebuyengine.com/reference/modal-custom-templates.md

## Overview

This allows developers the ability to add custom functionality that is currently not achievable by the modal settings themselves. These templates can use any globally accessible functions. Developers can add additional Vue.js/HTML to these templates as needed. As these templates are written in Vue.js they accept and Vue.js attributes such as v-if for conditional rendering.

## Setting up Custom Templates

There are a couple of ways these templates can be used. They can target all modals of that modal type or, they can target a specific modal if you do not want the custom work to be applied to all modals of that specific modal type.

Typically developers will create a new snippet named something like "rebuy-templates.liquid" and paste the contents of the code in that file. Then render that snippet in the associated file or in the theme.liquid file if they want the template to be globally accessible.

## Modal Variant Template

```html title="Last Updated: January 27, 2026"
<script id="rebuy-modal-variant-template" type="text/template">
 <div class="rebuy-modal" v-cloak v-bind:class="[visible ? 'is-visible' : 'is-hidden']" v-on:click="stopPropagation($event)">
    <div class="rebuy-modal__container" v-cloak v-bind:class="[style, visible ? 'is-visible' : 'is-hidden']">

        <div class="rebuy-modal__container-header" v-html="title"></div>
        <div class="rebuy-modal__container-body">

            <div class="rebuy-modal__product" v-bind:class="getModalLayoutClasses(settings.layout)">

                <div class="rebuy-modal__product-media">
                    <img
                        class="rebuy-modal__product-media-image"
                        v-bind:src="sizeImage(getSelectedImage()?.src, '400x400')"
                        v-bind:alt="product.title"
                    />

                    <div v-if="shouldShowSubImages()" class="rebuy-modal__product-sub-images">
                        <div
                            v-for="(image, index) in product.images"
                            :key="image.id + '-sub-image-' + index"
                            class="rebuy-modal__product-sub-image"
                            v-on:click="handleSelectingImage(image)"
                            v-bind:class="{ 'is-active': getSelectedImage()?.id === image.id }"
                            role="button"
                            tabindex="0">
                            <img
                                v-bind:src="sizeImage(image.src, '200x200')"
                                v-bind:alt="product.title"
                            />
                        </div>
                    </div>
                </div>

                <div class="rebuy-modal__product-info">
                    <h4 class="rebuy-modal__product-title" v-html="product.title"></h4>

                    <div class="rebuy-modal__product-price">
                        <div v-if="variantOnSale(product, product.selected_variant)">
                            <span class="rebuy-money sale" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                            <span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                        </div>
                        <div v-if="!(variantOnSale(product, product.selected_variant))">
                            <span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                        </div>
                    </div>

                    <div v-if="shouldShowProductQuantityController()">
                        <div class="rebuy-modal__product-quantity-controller">
                            <button
                                class="rebuy-modal__product-quantity-controller-button"
                                v-bind:aria-label="'Decrease quantity of ' + product.title"
                                v-on:click="adjustQuantityOnType(product, 'decrease')"
                            >
                                <rebuy-icon name="minus" class="rebuy-grey"></rebuy-icon>
                            </button>

                            <span
                                class="rebuy-modal__product-quantity-controller-label"
                                v-html="product.quantity || 1">
                            </span>

                            <button
                                class="rebuy-modal__product-quantity-controller-button"
                                v-on:click="adjustQuantityOnType(product, 'increase')"
                                v-bind:aria-label="'Increase quantity of ' + product.title"
                            >
                                <rebuy-icon name="plus" class="rebuy-grey"></rebuy-icon>
                            </button>
                        </div>
                    </div>

                    <div class="rebuy-modal__product-options">
                        <div v-if="isVariantSelectorButtons()" class="rebuy-modal__product-option" v-for="option in product.options">
                            <div class="rebuy-modal__product-option-title">{{ option.name }}</div>
                            <div class="rebuy-modal__product-option-buttons">
                                <button
                                    class="rebuy-option-button"
                                    v-for="(value, index) in option.values"
                                    v-bind:class="{ 'is-active': product.selected_variant['option' + option.position] == value, 'is-unavailable': !variantOptionAvailable(product, 'option' + option.position, value) }"
                                    v-on:click="selectVariantOption(product, 'option' + option.position, value)"
                                    >
                                    {{ value }}
                                </button>
                            </div>
                        </div>

                        <div v-if="!isVariantSelectorButtons() && shouldShowVariantSelector()" class="rebuy-modal__product-option-select">
                            <select
                                class="rebuy-select"
                                v-bind:aria-label="'variant of ' + product.title"
                                v-model="product.selected_variant_id"
                                v-on:change="selectVariant(product)"
                            >
                                <option v-for="variant in product.variants" v-bind:value="variant.id">{{ variant.title }}</option>
                            </select>
                        </div>
                    </div>

                </div>

            </div>

        </div>

        <div class="rebuy-modal__container-actions" v-bind:class="[buttons.length > 1 ? 'multi-button' : 'single-button']">
            <button class="rebuy-button"
                v-for="button in buttons"
                v-bind:class="[button.type]"
                v-bind:disabled="isButtonDisabled(button)"
                v-on:click="click(button)"
                v-html="button.label"
                type="button"
            >
            </button>
        </div>

    </div>
</div>
</script>
```

## Modal Dialog Template

```html title="Last Updated: August 11, 2025"
<script id="rebuy-modal-notification-template" type="text/template">
 <div class="rebuy-notification-modal" v-cloak v-bind:class="[visible ? 'is-visible' : 'is-hidden']" v-on:click="stopPropagation($event)">
    <div class="rebuy-notification-dialog" v-bind:class="[style]">
        <div class="rebuy-notification-dialog-header" v-html="title"></div>
        <div class="rebuy-notification-dialog-content" v-html="message"></div>
        <div class="rebuy-notification-dialog-actions" v-bind:class="[buttons.length > 1 ? 'multi-button' : 'single-button']">
            <button class="rebuy-notification-dialog-button rebuy-button"
                v-for="button in buttons"
                v-bind:class="[button.type]"
                v-on:click="click(button)"
                v-html="button.label"
                type="button"></button>
        </div>
    </div>
</div>
</script>
```

---

# Event Listeners (4.2KB)

Source: https://developers.rebuyengine.com/reference/landing-pages-event-listeners.md

# Landing Page Event Listeners

Events that trigger within Rebuy Landing Pages for order reordering and subscription reactivation.

## Event Timing

| Event | Fires When |
|-------|------------|
| `reorderLandingPage.init` | Reorder Landing Page begins initialization |
| `reorderLandingPage.beforeReady` | Before reorder page is displayed |
| `reorderLandingPage.ready` | Reorder page is fully initialized |
| `reactivateLandingPage.init` | Reactivate Landing Page begins initialization |
| `reactivateLandingPage.beforeReady` | Before reactivate page is displayed |
| `reactivateLandingPage.ready` | Reactivate page is fully initialized |
| `reactivateLandingPage.beforeReactivate` | Before subscription reactivation begins |
| `reactivateLandingPage.reactivate` | Subscription reactivation completes |

---

## Reorder Landing Page Events

Events for the order reordering landing page.

### rebuy:reorderLandingPage.init

Triggers when the Reorder Landing Page begins initialization.

```javascript
document.addEventListener('rebuy:reorderLandingPage.init', (event) => {
  const { data } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `data` | object | Page initialization data |

---

### rebuy:reorderLandingPage.beforeReady

Triggers before the Reorder Landing Page is displayed and ready.

```javascript
document.addEventListener('rebuy:reorderLandingPage.beforeReady', () => {
  // Your logic here
});
```

#### Payload

No payload data.

---

### rebuy:reorderLandingPage.ready

Triggers when the Reorder Landing Page has fully initialized and is ready.

```javascript
document.addEventListener('rebuy:reorderLandingPage.ready', (event) => {
  const { data } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `data` | object | Page data including order information |

---

## Reactivate Landing Page Events

Events for the subscription reactivation landing page.

### rebuy:reactivateLandingPage.init

Triggers when the Reactivate Landing Page begins initialization.

```javascript
document.addEventListener('rebuy:reactivateLandingPage.init', (event) => {
  const { data } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `data` | object | Page initialization data |

---

### rebuy:reactivateLandingPage.beforeReady

Triggers before the Reactivate Landing Page is displayed and ready.

```javascript
document.addEventListener('rebuy:reactivateLandingPage.beforeReady', () => {
  // Your logic here
});
```

#### Payload

No payload data.

---

### rebuy:reactivateLandingPage.ready

Triggers when the Reactivate Landing Page has fully initialized and is ready.

```javascript
document.addEventListener('rebuy:reactivateLandingPage.ready', (event) => {
  const { data } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `data` | object | Page data including subscription information |

---

### rebuy:reactivateLandingPage.beforeReactivate

Triggers before a cancelled subscription reactivation begins.

```javascript
document.addEventListener('rebuy:reactivateLandingPage.beforeReactivate', (event) => {
  const { data } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `data` | object | Subscription data being reactivated |

---

### rebuy:reactivateLandingPage.reactivate

Triggers when a subscription reactivation completes.

```javascript
document.addEventListener('rebuy:reactivateLandingPage.reactivate', (event) => {
  const { data } = event.detail;
  // Your logic here
});
```

#### Payload

| Property | Type | Description |
|----------|------|-------------|
| `data` | object | Reactivated subscription data |

---

## Related

- [Event Listeners Overview](./event-listeners.md)
- [Cart Event Listeners](./cart-event-listeners.md)

<!-- Source: onsite-js/src/onsite/js/modules/Event/Event.js -->

---

# Icons (7.5KB)

Source: https://developers.rebuyengine.com/reference/icons.md

!!! warning "Font Awesome Deprecation"
    Font Awesome icon markup will no longer be supported as of **July 1, 2026**.

    Any custom templates will need to be updated to use either:

    * `rebuy-icon` with the Lucide icon `name` equivalent
    * a pure SVG (which can be downloaded from the [Lucide library](https://lucide.dev/icons/))

### What’s changing

* **Font Awesome deprecation**: Font Awesome will no longer be supported as of **July 1, 2026**.
* **New default**: Rebuy Icons (Lucide-based) is the new icon system.
* **Template tag**: All templates should use `<rebuy-icon>` or pure SVGs moving forward.
* **Powered by Lucide**: Rebuy Icons use the Lucide SVG library. You can browse and download individual SVGs at [lucide.dev/icons](https://lucide.dev/icons/).

### Impact at a glance

* **If you use stock Rebuy widgets**: No action needed. You can opt-in when ready.
* **If you have custom templates**: Replace any Font Awesome tags with `<rebuy-icon>` before switching.
* **Roll-back safety**: You can temporarily toggle systems for testing.

***

### About Lucide

Rebuy Icons are built on the open-source Lucide icon library, providing clean, consistent SVG icons. For optimal performance, only commonly-used icons are included by default. If you need additional icons, you have two options:

1. **Production (recommended)**: Download individual SVG files from [lucide.dev/icons](https://lucide.dev/icons/) and inline them in your templates
2. **Testing only**: Use `loadFullIconSet()` to temporarily access all icons during feature development

***

### How to enable Rebuy Icons

1. Go to Rebuy Admin → Settings.
2. Find “Icon System” and choose **Rebuy Icons**.
3. Save. Your widgets will start using the new system.

!!! tip
    Test first on a staging theme or via the console toggle below.

!!! info "Note About Smart Carts"
    If you are using a newer Smart Cart (non-Legacy), your template code will **not** automatically be updated when toggling the Icon System.

    If you're still seeing Font Awesome icons in your Smart Cart, you can refresh your template by navigating to the Smart Cart Editor in the Rebuy Admin and saving any small change to your active cart.

    This will rebuild the template using `<rebuy-icon>` markup.

***

### Migrating custom templates

Replace Font Awesome elements/classes with the `<rebuy-icon>` tag using Lucide names.

* Close icon:

  * Old: `<i class="fas fa-times"></i>`
  * New: `<rebuy-icon name="x" />`

* Loading/Spinner:

  * Old: `<i class="fas fa-circle-notch fa-spin"></i>`
  * New: `<rebuy-icon name="loader" spin />`

* Chevron down:
  * Old: `<i class="fas fa-chevron-down"></i>`
  * New: `<rebuy-icon name="chevron-down" />`

Supported attributes:

* `name` (required) – Lucide icon name (e.g., `x`, `chevron-down`, `shopping-cart`)
* `size` – number (pixels) - **Note: Consider using CSS custom properties instead for better override control**
* `color` – CSS color (defaults to `currentColor`)
* `stroke-width` – stroke width for Lucide (default `2`)
* `spin` / `fast-spin` – animation flags
* `aria-label` – makes icon accessible (otherwise decorative)

Common icons (always available without any extra loading): `x`, `plus`, `minus`, `chevron-up`, `chevron-down`, `more-horizontal`, `tag`, `tags`, `trash`, `search`, `loader`, `refresh-cw`.

***

### Test before enabling (no code deploy required)

Use your browser console on any page with Rebuy widgets:

```js
// Check current icon system ('lucide' or 'fontawesome')
Rebuy.Icons.getCurrentIconSystem();

// Toggle between systems (quick visual check)
await Rebuy.Icons.toggleIconSystem();

// Force a system globally (until refreshed or set back)
Rebuy.Icons.setIconSystemOverride('lucide');
Rebuy.Icons.setIconSystemOverride('fontawesome');
Rebuy.Icons.setIconSystemOverride(null); // return to shop setting
```

***

### Full icon library (development only)

**Warning:** The full icon set adds ~214KB (gzipped) to your page. Use only for testing and development:

```js
// Do you already have it?
Rebuy.Icons.isFullIconSetLoaded();

// Load (~214KB gzipped), then all icons are available
await Rebuy.Icons.loadFullIconSet();

// Check availability and get icon markup if needed
Rebuy.Icons.hasIcon('activity');
const html = Rebuy.Icons.getIcon('activity', { size: 24, color: '#007bff' });
```

***

### Performance best practices

1. **Use common icons** - No additional network requests needed:

   * `x`, `plus`, `minus`, `chevron-up`, `chevron-down`, `shopping-cart`, `tag`, `trash`, `search`, `loader`

2. **For uncommon icons** - Download and inline individual SVGs from [lucide.dev/icons](https://lucide.dev/icons/)

3. **Never use `loadFullIconSet()` in production** - This is a development tool only

***

### Styling and overrides

#### Size Control

Icons use the `--rb-icon-size` CSS custom property for sizing. This provides flexible control through CSS rather than inline attributes.

**Recommended approach - CSS custom properties:**

```css
/* Set size for specific containers */
.my-cart-button {
    --rb-icon-size: 24px;
}

.my-quantity-controls {
    --rb-icon-size: 14px;
}
```

```html
<!-- Icons inherit size from their container -->
<div class="my-cart-button">
    <rebuy-icon name="shopping-cart" />
</div>
```

**Alternative - Size prop (use sparingly):**

```html
<!-- Only use when CSS approach isn't practical -->
<rebuy-icon name="x" size="20" />
```

When using the `size` prop, be aware it sets an inline style that requires `!important` to override.

#### Color Control

Icons inherit color via `currentColor`, making them automatically match surrounding text:

```css
/* Icons will automatically match text color */
.text-primary {
    color: #007bff;
}

.text-danger {
    color: #dc3545;
}
```

```html
<div class="text-primary">
    <rebuy-icon name="tag" />
    <span>On sale</span>
</div>
```

***

### Console Helper Method Reference

* `Rebuy.Icons.getCurrentIconSystem()` – Returns `'lucide' | 'fontawesome'`.
* `Rebuy.Icons.setIconSystemOverride(value)` – `'lucide' | 'fontawesome' | null`.
* `Rebuy.Icons.toggleIconSystem()` – Switches systems for fast visual checks.
* `Rebuy.Icons.hasIcon(name)` – Whether an icon is currently available.
* `Rebuy.Icons.getIcon(name, opts)` – Returns icon HTML (when available).
* `Rebuy.Icons.getAvailableIconNames()` – Lists all currently available names.
* `Rebuy.Icons.isFullIconSetLoaded()` – Whether the full set is loaded.
* `Rebuy.Icons.loadFullIconSet()` – Loads the full library on demand.
* `Rebuy.Icons.getIconSystemInfo()` – Diagnostic info about what’s loaded.

***

### Troubleshooting

**Icon not showing?**

* Verify the icon name matches Lucide's naming (check [lucide.dev/icons](https://lucide.dev/icons/))
* If it's an uncommon icon, either inline the SVG or use `loadFullIconSet()` for testing only

**Visual differences from Font Awesome?**

* Adjust `stroke-width` for line thickness (default: 2)
* Use CSS custom properties for sizing instead of inline props
* Toggle between systems with `Rebuy.Icons.toggleIconSystem()` to compare

**Need to roll back?**

* Admin → Settings → Icon System → Font Awesome
* Or temporarily: `Rebuy.Icons.setIconSystemOverride('fontawesome')`

***

### Support

If you need help migrating or testing, contact Rebuy Support with your store URL and a link to the page/template using icons.

---

# Core SDK (7.4KB)

Source: https://developers.rebuyengine.com/reference/headless-core-sdk.md

<!--
  Auto-generated from @rebuy/core-sdk@1.0.0-beta.9
  Do not edit directly - run: python scripts/sync-headless-docs.py
-->

# Headless Core SDK

> **Package:** `@rebuy/core-sdk@1.0.0-beta.9`
> **npm:** [npmjs.com/package/@rebuy/core-sdk](https://www.npmjs.com/package/@rebuy/core-sdk)

The framework-agnostic core SDK for Rebuy's personalization and recommendation engine. This lightweight, TypeScript-first library provides the foundational data layer for building personalized e-commerce experiences.

## Table of Contents

- [Installation](#installation)
- [Quick Start](#quick-start)
- [Core Features](#core-features)
- [API Reference](#api-reference)
- [Configuration](#configuration)
- [Error Handling](#error-handling)
- [TypeScript Support](#typescript-support)

## Installation

```bash
npm install @rebuy/core-sdk
```

## Quick Start

```typescript
import { RebuySDK } from '@rebuy/core-sdk';

// Initialize the SDK
const sdk = new RebuySDK({
    apiKey: 'your-api-key',
});

// Fetch top seller recommendations
const topSellers = await sdk.products.getTopSellers({ limit: 5 });
console.log('Top Sellers:', topSellers);

// Fetch recommendations from a custom Data Source
const dataSourceProducts = await sdk.products.fetchFromDataSource(1234, {
    shopify_product_ids: ['product-123'],
    limit: 6,
});
console.log('Products from Data Source:', dataSourceProducts);
```

## Core Features

### Product Recommendations

Fetch product recommendations from any of Rebuy's standard endpoints or from a custom Data Source.

**Standard Recommendations:**

```typescript
// Get top sellers
const topSellers = await sdk.products.getTopSellers({ limit: 10 });

// Get similar products
const similarProducts = await sdk.products.getSimilar({ limit: 5 });
```

**Custom Data Sources:**
Leverage the full power of the Rebuy rules engine by fetching from a specific Data Source.

```typescript
const products = await sdk.products.fetchFromDataSource(1234, {
    cart: currentCartObject,
    limit: 4,
});
```

### Context Builder

The `RebuyContextBuilder` class provides a fluent API for creating rich context objects for Data Sources. This reduces errors and improves discoverability of context parameters.

```typescript
import { RebuyContextBuilder } from '@rebuy/core-sdk';

// Create a context with the builder
const context = new RebuyContextBuilder(sdk)
    .withCart(cartObject)
    .withProduct({ id: 'gid://shopify/Product/123' })
    .withCustomer({ id: 456, tags: ['vip', 'wholesale'] })
    .withUrl('https://shop.com/products?sort=price')
    .withLocation('US')
    .withLanguage('en')
    .build();

// Use the context with a Data Source
const products = await sdk.products.fetchFromDataSource('pdp-recommendations', context);
```

**Builder Methods:**

- `merge(context)` - Merge an existing context object
- `withCart(cart)` - Add cart data using the SDK's internal transformer
- `withProduct(product)` - Add a product's ID (can be chained for multiple products)
- `withCustomer(customer)` - Add customer ID and tags
- `withUrl(url)` - Extract path and query parameters from a URL
- `withLocation(countryCode)` - Add the user's country code (ISO 3166-1 alpha-2)
- `withLanguage(language)` - Add the user's language code (ISO 639-1)
- `build()` - Return the final context object

### Viewed Products

Track and retrieve products that users have viewed.

```typescript
// Track a product view
await sdk.tracking.productView('product-123');

// Get recently viewed products
const viewedProducts = await sdk.products.getRecentlyViewed({ limit: 10 });
```

## API Reference

### RebuySDK

#### Constructor Options

| Option    | Type      | Required | Description                                          |
| --------- | --------- | -------- | ---------------------------------------------------- |
| `apiKey`  | `string`  | ✅       | Your Rebuy API key                                   |
| `apiHost` | `string`  | ❌       | API host URL (defaults to 'https://rebuyengine.com') |
| `debug`   | `boolean` | ❌       | Enable debug logging (defaults to false)             |

### Modules

#### `sdk.products`

- `getRecentlyViewed(options): Promise<Product[]>` - Get recently viewed products.
- `getRecommended(options): Promise<Product[]>` - Get recommended products.
- `getTopSellers(options): Promise<Product[]>` - Get top selling products.
- `getTrending(options): Promise<Product[]>` - Get trending products.
- `getPurchased(options): Promise<Product[]>` - Get previously purchased products.
- `getCollections(body): Promise<Product[]>` - Get products from a list of collections.
- `getStatic(options): Promise<Product[]>` - Get a static list of products.
- `getSimilar(options): Promise<Product[]>` - Get similar products.
- `fetchFromDataSource(dataSourceId, context): Promise<Product[]>` - Fetch products from a custom Data Source.

#### `sdk.tracking`

- `productView(productId: string): Promise<void>` - Track a product view event.

#### `sdk.cart`

- `get(): Promise<ShopifyCart>` - Get current cart from Shopify.
- `createDataSourceContext(cart): RebuyCartContext` - Transform a cart object into a context for Data Sources.

**Note:** The cart module is intentionally read-only. Cart mutations should be handled through your existing cart system (e.g., Shopify's Cart API). This design allows the SDK to read cart state for features like recommendations and GWP rules without prescribing how cart operations should be implemented.

### RebuyContextBuilder

The `RebuyContextBuilder` class provides a fluent API for creating context objects:

```typescript
const builder = new RebuyContextBuilder(sdk);
```

#### Methods

- `merge(context: Partial<RebuyCartContext>): this` - Merge an existing context object
- `withCart(cart: SupportedCart): this` - Add cart data using the SDK's internal transformer
- `withProduct(product: { id: string }): this` - Add a product's ID (chainable)
- `withCustomer(customer: { id: string | number; tags?: string[] }): this` - Add customer data
- `withUrl(url: string | URL): this` - Extract URL path and parameters
- `withLocation(countryCode: string): this` - Add country code (ISO 3166-1 alpha-2)
- `withLanguage(language: string): this` - Add language code (ISO 639-1)
- `build(): RebuyCartContext` - Return the final context object

## Configuration

```typescript
const sdk = new RebuySDK({
    apiKey: 'your-api-key',
    debug: process.env.NODE_ENV === 'development',
});
```

## Error Handling

```typescript
try {
    const products = await sdk.products.getTopSellers({ limit: 5 });
} catch (error) {
    console.error('SDK Error:', error.message);
}
```

## TypeScript Support

This SDK is built with TypeScript and provides full type safety.

```typescript
import type { Product } from '@rebuy/core-sdk';

const products: Product[] = await sdk.products.getTopSellers({ limit: 5 });
```

## Framework Integration

While this is a framework-agnostic SDK, we provide first-party integrations:

- **React/Shopify Hydrogen**: [`@rebuy/hydrogen-sdk`](https://www.npmjs.com/package/@rebuy/hydrogen-sdk)

### Usage with React/Hydrogen

For React and Shopify Hydrogen projects, we recommend using our dedicated wrapper, `@rebuy/hydrogen-sdk`.

```bash
npm install @rebuy/hydrogen-sdk
```

See the [`@rebuy/hydrogen-sdk` documentation](https://www.npmjs.com/package/@rebuy/hydrogen-sdk) for detailed usage instructions.

---

# Hydrogen SDK (14.3KB)

Source: https://developers.rebuyengine.com/reference/headless-hydrogen-sdk.md

<!--
  Auto-generated from @rebuy/hydrogen-sdk@1.0.0-beta.9
  Do not edit directly - run: python scripts/sync-headless-docs.py
-->

# Headless Hydrogen SDK

> **Package:** `@rebuy/hydrogen-sdk@1.0.0-beta.9`
> **npm:** [npmjs.com/package/@rebuy/hydrogen-sdk](https://www.npmjs.com/package/@rebuy/hydrogen-sdk)

React components and hooks for integrating Rebuy's personalization engine into Shopify Hydrogen storefronts.

## Table of Contents

- [Installation](#installation)
- [Quick Start](#quick-start)
- [Implementation Patterns](#implementation-patterns)
- [Data Fetching Approaches](#data-fetching-approaches)
- [Server-Side Rendering & Cart Reactivity (Recommended)](#server-side-rendering--cart-reactivity-recommended)
- [Client-Side Implementation](#client-side-implementation)
- [Components](#components)
- [Hooks](#hooks)
- [Context Builder](#context-builder)
- [Configuration](#configuration)
- [TypeScript Support](#typescript-support)
- [Troubleshooting](#troubleshooting)

## Installation

```bash
npm install @rebuy/core-sdk @rebuy/hydrogen-sdk
```

**Peer Dependencies:**

- React 18+
- @shopify/hydrogen/react 2024.4+

## Quick Start

### 1. Setup the Provider

Wrap your Hydrogen app with `RebuyProvider` in your `root.tsx`:

```tsx
// app/root.tsx
import { RebuyProvider } from '@rebuy/hydrogen-sdk';

export default function App() {
    return (
        <html lang="en">
            <body>
                <RebuyProvider apiKey="your-rebuy-api-key">
                    <Layout>
                        <Outlet />
                    </Layout>
                </RebuyProvider>
            </body>
        </html>
    );
}
```

### 2. Choose Your Implementation Approach

The SDK supports both server-side and client-side rendering patterns. See the Implementation Patterns section below for guidance.

## Implementation Patterns

The SDK supports both server-side and client-side rendering.

### Server-Side Rendering (Recommended)

Server-side rendering is recommended for most use cases, including product recommendations, top sellers, and cart-based widgets. It offers better SEO, faster initial page loads, and built-in cart reactivity through Remix loaders.

**Use Server-Side Rendering for:**

- Most recommendation widgets
- SEO-critical content
- Fast initial page loads

### Client-Side Rendering

Client-side rendering is necessary for features that rely on browser-specific data, such as `localStorage`. The primary use case is for "Recently Viewed" products.

**Use Client-Side Rendering for:**

- Recently Viewed products
- Features requiring real-time user interaction in the browser

## Data Fetching Approaches

There are two main approaches for fetching recommendation data: Direct API calls and Data Sources.

### Direct API

The Direct API provides a straightforward way to get recommendations with minimal setup. It's suitable for prototyping or for widgets where admin-level configuration is not required.

```typescript
// Example: Get recommended products based on cart contents
const recommendations = await rebuy.sdk.products.getRecommended({
    ...rebuy.cartContext,
    limit: 4,
});
```

### Data Sources (Recommended for Production)

Data Sources are the recommended approach for production environments. They unlock the full power of the Rebuy platform, allowing you to use the Rebuy Admin to configure business logic, run A/B tests, and manage targeting rules without changing your storefront code.

For example, you can create a rule like: `IF customer is VIP AND cart total > $100 THEN show premium products`.

A critical feature for cart-based widgets is the **"Filter Input Products"** setting in the Data Source configuration. When enabled, it automatically prevents items already in the cart from appearing in the recommendations.

```typescript
// Example: Fetch from a Data Source, limiting the result to 4 products.
const recommendations = await rebuy.sdk.products.fetchFromDataSource(
    243093, // Your Data Source ID from the Rebuy Admin
    rebuy.cartContext,
    { limit: 4 } // Optional: Pass parameters like limit here
);
```

### Enhancing Context with `RebuyContextBuilder`

For more precise targeting, the `RebuyContextBuilder` utility can be used with either Direct API calls or Data Sources to create the `context` object. It allows you to enrich the request with additional data, such as customer information, URL parameters, and geolocation.

Options that are specific to a single request, like `limit`, should be passed as the third argument to `fetchFromDataSource`.

```typescript
const enhancedContext = new RebuyContextBuilder(rebuy.sdk)
    .merge(rebuy.cartContext)
    .withUrl(request.url)
    .withCustomer(customer)
    .build();

// Use the enhanced context and pass a limit
const recommendations = await rebuy.sdk.products.fetchFromDataSource(243093, enhancedContext, { limit: 4 });
```

**When to use which approach:**

- **Prototyping or simple needs:** Use the **Direct API**.
- **Production, cart-based widgets, or dynamic business logic:** Use **Data Sources**.
- **Improved targeting:** Add the **`RebuyContextBuilder`** to either approach.

## Server-Side Rendering & Cart Reactivity (Recommended)

The SDK is designed to work seamlessly with Hydrogen's server-centric architecture. Using `getRebuyData` in your loaders is the most powerful feature of this SDK.

### 1. Using `getRebuyData` in Loaders

The `getRebuyData` helper function provides the Rebuy SDK instance and automatically enriched cart context for your Remix loaders.

```tsx
// app/routes/($locale).products.$handle.tsx
import { getRebuyData, RebuyContextBuilder } from '@rebuy/hydrogen-sdk';
import { defer, type LoaderFunctionArgs } from '@shopify/remix-oxygen';

export async function loader({ context, params, request }: LoaderFunctionArgs) {
    // Get Rebuy SDK with automatically enriched context
    const { rebuy } = await getRebuyData({ context, request });

    // Option 1: Use the auto-generated context directly
    const recommendations = await rebuy.sdk.products.fetchFromDataSource('pdp-recommendations', {
        ...rebuy.cartContext, // Includes cart, URL, country, language automatically
        shopify_product_ids: params.productId,
    });

    // Option 2: Enhance the context further with RebuyContextBuilder
    const enhancedContext = new RebuyContextBuilder(rebuy.sdk)
        .merge(rebuy.cartContext) // Start with auto-generated context
        .withProduct({ id: product.id }) // Add current product
        .withCustomer({ id: customer.id, tags: customer.tags }) // Add customer data
        .build();

    const personalizedRecs = await rebuy.sdk.products.fetchFromDataSource(
        'personalized-recommendations',
        enhancedContext
    );

    return defer({ recommendations, personalizedRecs });
}
```

**Automatic Context Enrichment:**

When you pass the `request` parameter to `getRebuyData`, it automatically extracts:

- **Cart Context**: `cart_total`, `cart_item_count`, `shopify_product_ids`, etc.
- **URL Context**: `url_path` and `url_params` from the current request
- **Geolocation**: `country_code` from Hydrogen's i18n configuration
- **Language**: `language` from Hydrogen's i18n configuration

### 2. How Cart Reactivity Works

1.  **Cart Mutation**: User adds/removes items via Hydrogen's `<CartForm>`.
2.  **Automatic Reload**: Remix automatically re-runs loaders after cart mutations.
3.  **Fresh Context**: `getRebuyData` provides updated cart context.
4.  **New Recommendations**: Rebuy API returns fresh, cart-aware recommendations.
5.  **UI Updates**: Your component re-renders with the new data.

This pattern provides optimal performance, SEO, and a reactive user experience without complex client-side state management.

### 3. Complete Server-Side Widget Example

Here's a minimal, complete example of a server-side widget implementation:

```tsx
// app/components/ServerTopSellers.tsx
import type { Product } from '@rebuy/core-sdk';

interface ServerTopSellersProps {
    products: Product[];
    title?: string;
}

export function ServerTopSellers({ products, title = 'Top Sellers' }: ServerTopSellersProps) {
    if (!products || products.length === 0) return null;

    return (
        <div className="top-sellers">
            <h2>{title}</h2>
            <div className="product-grid">
                {products.map((product) => (
                    <div key={product.id} className="product-card">
                        <img src={product.image?.src} alt={product.title} />
                        <h3>{product.title}</h3>
                        <p>${product.variants?.[0]?.price}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}
```

```tsx
// app/routes/($locale)._index.tsx
import { getRebuyData } from '@rebuy/hydrogen-sdk';
import { defer, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
import { useLoaderData } from 'react-router';
import { ServerTopSellers } from '~/components/ServerTopSellers';

export async function loader({ context, request }: LoaderFunctionArgs) {
    const { rebuy } = await getRebuyData({ context, request });

    // Fetch data on the server
    const topSellers = await rebuy.sdk.products.getTopSellers({
        limit: 5,
        filter_oos: 'yes',
    });

    return defer({ topSellers });
}

export default function Homepage() {
    const { topSellers } = useLoaderData<typeof loader>();

    // Render with server-fetched data - no loading states needed!
    return <ServerTopSellers products={topSellers} />;
}
```

**Key Benefits of This Pattern:**

- ✅ Products are in the initial HTML (view source to verify)
- ✅ No loading spinners or layout shifts
- ✅ SEO-friendly - search engines see the content
- ✅ Automatically updates when cart changes (cart reactivity)

## Client-Side Implementation

For features like Recently Viewed, a client-side implementation is more suitable.

### 1. Track Product Views

Add the `RebuyProductView` component to your product pages. It's invisible and handles analytics.

```tsx
// app/routes/($locale).products.$handle.tsx
import { RebuyProductView } from '@rebuy/hydrogen-sdk';

export default function Product() {
    const { product } = useLoaderData<typeof loader>();

    return (
        <div className="product">
            <RebuyProductView
                product={{
                    id: product.id,
                    handle: product.handle,
                }}
            />
            <h1>{product.title}</h1>
            {/* ... */}
        </div>
    );
}
```

### 2. Display Recently Viewed Products

Use the `RecentlyViewed` component to show the products.

```tsx
// app/components/RecentlyViewedSection.tsx
import { RecentlyViewed } from '@rebuy/hydrogen-sdk';

export function RecentlyViewedSection() {
    return (
        <section className="recently-viewed">
            <h2>Recently Viewed</h2>
            <RecentlyViewed limit={4} />
        </section>
    );
}
```

The `RecentlyViewed` component fetches its own data on the client-side.

## Components

### `RebuyProvider`

The root provider that initializes the SDK.

**Props:**

- `apiKey` (required): Your Rebuy API key.
- `apiHost` (optional): API host URL.
- `debug` (optional): Enable debug logging.
- `nonce` (optional): Content Security Policy nonce for inline scripts. Required when using CSP headers to ensure SDK scripts comply with your security policy.

### `RebuyProductView`

Tracks product view events. Renders nothing.

**Props:**

- `product.id` (required): Shopify GraphQL product ID.
- `product.handle` (required): Product URL handle.

### `RecentlyViewed`

Fetches and displays recently viewed products.

**Props:**

- `limit` (optional): Number of products to fetch (default: 5).
- `className` (optional): CSS class for the container.
- `loadingComponent` (optional): Custom component for loading state.
- `emptyComponent` (optional): Custom component for empty state.
- `onError` (optional): Callback for handling errors.

## Hooks

### `useRebuy`

Access the underlying Rebuy SDK instance for direct API calls.

```tsx
import { useRebuy } from '@rebuy/hydrogen-sdk';

function MyComponent() {
    const rebuy = useRebuy();

    const trackCustomEvent = async () => {
        await rebuy.tracking.productView('product-id');
    };

    return <button onClick={trackCustomEvent}>Track Event</button>;
}
```

## Context Builder

The SDK exports `RebuyContextBuilder` from the core SDK for creating rich context objects:

```tsx
import { RebuyContextBuilder } from '@rebuy/hydrogen-sdk';

// In your loader
const context = new RebuyContextBuilder(rebuy.sdk)
    .withCart(cart)
    .withProduct({ id: 'gid://shopify/Product/123' })
    .withCustomer({ id: 456, tags: ['vip'] })
    .withUrl(request.url)
    .withLocation('US')
    .withLanguage('en')
    .build();

const products = await rebuy.sdk.products.fetchFromDataSource('my-data-source', context);
```

### Available Methods:

- `merge(context)` - Merge an existing context object
- `withCart(cart)` - Add cart data
- `withProduct(product)` - Add product ID (chainable)
- `withCustomer(customer)` - Add customer data
- `withUrl(url)` - Extract URL path and parameters
- `withLocation(countryCode)` - Add country code (ISO 3166-1)
- `withLanguage(language)` - Add language code (ISO 639-1)
- `build()` - Return the final context

## Configuration

### Environment Variables

Set up your environment variables:

```bash
# .env
PUBLIC_REBUY_API_KEY=your-rebuy-api-key
REBUY_SDK_DEBUG=true # optional
```

The `getRebuyData` helper and `RebuyProvider` will automatically use these.

## TypeScript Support

This package is built with TypeScript and provides comprehensive type definitions.

```tsx
import type { Product } from '@rebuy/core-sdk';
import type { RebuyProviderProps } from '@rebuy/hydrogen-sdk';

// Get product types from the core SDK
const products: Product[] = await rebuy.sdk.products.getTopSellers();
```

## Troubleshooting

### Debug Mode

Enable debug logging to troubleshoot issues by setting the `REBUY_SDK_DEBUG=true` environment variable for server-side logs, or `window.REBUY_SDK_DEBUG = true` in the browser console for client-side logs.

### TypeScript Context Type Issue

If you encounter type errors with the context parameter in `getRebuyData`, you may need to cast it:

```tsx
const { rebuy } = await getRebuyData({
    context: context as any, // Temporary workaround for type differences
    request,
});
```

This is a known issue that will be addressed in a future version.

---

# Overview (1.5KB)

Source: https://developers.rebuyengine.com/reference/experiments-overview.md

## Introduction

Experiments.js is an optional JavaScript package that allows developers to easily A/B test Smart Cart, Widgets, and settings, using your favorite testing suites like Google Optimize, VWO, Optimizely, or your own solution.  It is extremely lightweight (under 2kB) with zero dependencies.

To use the package, install the script in your theme's head before the closing tag `</head>`:

```html
<script src="https://cdn.rebuyengine.com/onsite/js/experiments.js"></script>
```

Please note that you should NOT use defer or async, which allows the script to load and be ready for use before the DOM content is loaded.  The script is loaded from a CDN, so download times are typically below 40ms.

Once Experiments.js is included, the package becomes globally available at `window.RebuyExperiments`.  You can now easily use your optimization platform to run experiments!

Typically Smart Cart or the Widget being experimented on are installed to the theme with `Live Mode` disabled.  You can then use RebuyExperiments to enable the widget only for a certain segment of your traffic.  In addition, you can apply settings changes via an experiment to test discount amounts, language changes, different API endpoints, or any other configuration -- it's totally hackable and totally up to you!

---

# Methods (1.7KB)

Source: https://developers.rebuyengine.com/reference/experiments-methods.md

## enableDebug

Enables debug mode, which will output console logs to help verify changes made.

```javascript
RebuyExperiments.enableDebug()
```

## disableDebug

Disables debug mode, which will silence console logs.

```javascript
RebuyExperiments.disableDebug()
```

## run

Runs an experiment and applies the provided changes immediately. This method accepts two arguments `experiment` and `useCookie`.

```text
RebuyExperiments.run(experiment, useCookie)
```

<Table align={["left","left"]}>
  <thead>
    <tr>
      <th>
        Argument
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        experiment
      </td>

      <td>
        Required. This can be a string identifying an object to enable such as 'smart cart' or '12345'.  Alternatively, this can be an object with two mandatory properties (`key` and `settings`), where `key` is a string identifying the object to target such as 'smart cart' or '12345', and `settings` is an object containing the modifications you would like applied.
      </td>
    </tr>

    <tr>
      <td>
        useCookie
      </td>

      <td>
        Optional.  Boolean flag to use a session based cookie to automatically apply the experiment on subsequent page loads.  This defaults to `false`, however passing in `true` will automatically run the experiment for the duration of the session.  This is useful when keying off ephemeral states, such as utm_campaign URL arguments that are only present upon session start.
      </td>
    </tr>
  </tbody>
</Table>

---

# Examples (4.2KB)

Source: https://developers.rebuyengine.com/reference/experiments-examples.md

Below are a few example, ranging from simple to more complex, of how Experiments.js can be used to test Smart Cart, Widgets, and/or various settings to help drive more revenue.

## Test a Specific Smart Cart (Legacy)

### Experiment `run` prefix: `smart-cart-`

Make sure you have created the target Smart Cart in the Rebuy admin.  Adjust your settings to your liking and save them. Make sure you grab the Smart Cart ID from the URL of the settings page.

In your optimization platform, such as Google Optimize, create your segment and then fire a single JavaScript function with the following contents:

```javascript
RebuyExperiments.run('smart-cart-123'); // Legacy Smart Cart prefix: 'smart-cart-'
```

Your experimental segment will now see  Smart Cart 123!

## Test a New Smart Cart

### Experiment `run` prefix: `new-cart-`

Make sure you have created the target Smart Cart in the Rebuy admin.  Adjust your settings to your liking and save them. Make sure you grab the Smart Cart ID from the URL of the settings page.

In your optimization platform, such as Google Optimize, create your segment and then fire a single JavaScript function with the following contents:

```coffeescript title="JavaScript"
RebuyExperiments.run('new-cart-456'); // New Smart Cart prefix: 'new-cart-'
```

Your experimental segment will now see Smart Cart 456!

!!! warning "All Smart Cart Experiments must include an ID"
    Since merchants can now have multiple Smart Carts, the Experiments module will now require an **ID** to be passed as part of the key passed to `run()`.

    `RebuyExperiments.run('smart_cart')` **will no longer work as expected.**

    You'll want to be sure to update any existing Experiments you may have set up.

!!! note "Locating your Smart Cart ID"
    If you're logged into the Rebuy Admin, you can find the Smart Cart ID in the URL for the Smart Cart Edit page:
    ![The ID can be found in the URL for the Smart Cart Edit page. It is at the end of the URL path.](../assets/images/5880a21-Screen_Shot_2023-04-05_at_3.18.05_PM.png)


## Enable a Widget

First make sure you create your Widget in Rebuy admin.  Adjust your settings to your liking and make sure that the Widget's `Live Mode` is disabled.  This ensures no traffic will see the Widget.  Make note of the Widget's ID (the number in the URL when editing widget settings).

In your optimization platform, such as Google Optimize, create your segment and then fire a single JavaScript function with the following contents:

```javascript
RebuyExperiments.run('55555')
```

Your experimental segment will now see Widget (with`id` 55555). 

## Test a Specific Smart Cart's Switch to Subscription

First make sure you have configured a Smart Cart in the Rebuy admin. Adjust your settings to your liking and ensure that the Switch to Subscription feature is **disabled**.  Remember to save your settings and grab the Smart Cart ID from the URL of the settings page.

In your optimization platform, such as Google Optimize, create your segment and then fire a single JavaScript function with the following contents:

```javascript title="RebuyExperiments.run({"
  key: 'smart-cart-123',
  settings: {
  	switch_to_subscription: {
    	enabled: true
    }
  }
})
```

Your experimental segment will now see the Switch to Subscription functionality on SmartCart #123!

## Change Widget Language & Discount

First make sure you create your Widget in Rebuy admin.  Adjust your settings to your liking and make sure that the Widget's `Live Mode` is enable.  This ensures your control group will see the widget with your default settings, which we will override with the experiment below.  Make note of the Widget's ID (the number in the URL when editing widget settings).

In your optimization platform, such as Google Optimize, create your segment and then fire a single JavaScript function with the following contents:

```javascript title="RebuyExperiments.run({"
  key: '55555',
  settings: {
  	language: {
    	title: "Limited-Time Offer, Save 20%"
    },
    discount: {
    	type: "percentage",
      amount: 20
  }
})
```

---

# Overview (844B)

Source: https://developers.rebuyengine.com/reference/shopifystorefront-helper-overview.md

## Introduction

ShopifyStorefrontHelper is an optional JavaScript package that allows developers to easily get storefront data and use it in Rebuy widgets.

To use the package, install the script in your theme, preferably in the head of the `theme.liquid` before the closing tag `</head>`:

```html
<script async src="https://cdn.rebuyengine.com/onsite/js/storefront-helper.js"></script>
```

Loading this with the `async` flag is not required, but may help to load this in alongside the rest of the content within the theme.

Once ShopifyStorefrontHelper is included, the package becomes globally available at `window.ShopifyStorefrontHelper`.

---

# Methods (609B)

Source: https://developers.rebuyengine.com/reference/shopifystorefront-helper-methods.md

## updateProductJSON

Updates the Product JSON with locale-aware data 

If you're using Shopify Markets, this will allow you to fetch data for products specific to that market. This allows product variant titles to be translated.

See [this example](shopifystorefront-helper-examples.md#update-product-json)  for how this is used

```javascript
ShopifyStorefrontHelper.updateProductJSON(product, callback);
```

---

# Examples (1.4KB)

Source: https://developers.rebuyengine.com/reference/shopifystorefront-helper-examples.md

## Update Product JSON

This is helpful if you're using Shopify Markets and you'd like to translate product and variant titles within Rebuy widgets. Items in cart will be translated automatically so no additional code is needed to translate titles of cart items.

It is important to run this code within the [productsChange](widget-event-listeners.md#products-change)  event listener, as this event listener will allow the fetching of product JSON to be done at the correct time. This event will run when products are loaded within the widget on page load, as well as when the products inside the widget change (if an item is added to cart from the widget, or the data source is reevaluated and products within the widget change due to new data source response).

```html
<!-- Utilize StorefrontHelper to enrich product JSON with locale-aware titles -->
<script>
  // update product JSON every time products are loaded or changed
  document.addEventListener('rebuy.productsChange', (e) => {
    const widget = e.detail.widget;
    const storefrontHelper = new ShopifyStorefrontHelper();

    // loop over products in the widget and enrich product json
    widget.data.products.forEach((product) => storefrontHelper.updateProductJSON(product));
  });
</script>
```

---

# Overview (1.6KB)

Source: https://developers.rebuyengine.com/reference/shopify-permalinks-introduction.md

## Introduction

Shopify-Permalinks.js is an optional JavaScript package that allows developers to easily create Shopify Checkout objects that are backed by a Cart object.  This is highly useful if you'd like to offer in-checkout offers for a headless storefront, which is ineligible for Rebuy's Checkout Extensions.  It is extremely lightweight (under 1kB) with zero dependencies.

To use the package, install the script in your theme's head before the closing tag `</head>`:

```html
<script src="https://cdn.rebuyengine.com/onsite/js/shopify-permalinks.js"></script>
```

Please note that you should NOT use defer or async, which allows the script to load and be ready for use before the DOM content is loaded.  The script is loaded from a CDN, so download times are typically below 40ms.

Once Shopify-Permalink.js is included, the package becomes globally available at `window.ShopifyPermalink`.  You can now easily create new Cart-backed Checkouts for your customers!

Instead of using Shopify's Storefront API to create a new Checkout with their cart contents, you can instead create a new `ShopifyPermalink` object and simply call the `go()` method to redirect the customer to the checkout process.

Additionally, you can set options on the ShopifyPermalink to automatically apply discount codes, pre-populate customer information such as email, phone, and shipping address, or set order attributes for tracking.

---

# Methods (3.6KB)

Source: https://developers.rebuyengine.com/reference/shopify-permalinks-methods.md

## Creating a new ShopifyPermalink

When constructing a new `ShopifyPermalink` object, it accepts four parameters:

```text
const Permalink = new ShopifyPermalink(shopURL, items, options, selectors);
```

| Property  | Value                                                                                                                                                                                                                                                     |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| shopURL   | `{String}` **Required** The fully qualified `myshopify.com` domain that points to your Shopify checkout (i.g. `https://example-brand.myshopify.com`).                                                                                                     |
| items     | `{Array}` **Required** This should be a pointer to the cart items array. Optionally, this property can be set before navigating to checkout (i.g. `Permalink.items = getYourItems()`).                                                                    |
| options   | `{Object}` **Optional** This is an optional settings object, which allows you to set a discount code, email, address, shipping address, cart note, ref, cart attributes, or storefront access token (i.e. sales channel).                                 |
| selectors | `{Object}` **Optional** This is an optional selectors object, which has two keys 'variant_id' and 'quantity', which are used to select the variant ID and quantity values from the items array. The default values are 'id' and 'quantity' respectively. |

## setOptions(key, value)

The `setOptions` method will set the permalink's options with the provided value.  You can pass an `{Object}` in as the first argument to merge the provided options object with the existing object.  If an object is passed as the first argument, the `value` argument is ignored.  

Alternatively, individual options key/values can be assigned by passing in a string as the first argument, and a string as the second argument.  If a string is used, it can be in dot notation such as `'shipping_address.first_name'` to set `options.shipping_address.first_name` to the provided value.

| Property | Value |
| --- | --- |
| key | `{String}` **Required** If a string is passed, the value will be used as the option key and the `value` argument will be assigned. String values in dot notation are also supported such as `shipping_address.first_name`. \-- OR -- `{Object}` **Required** If an object is passed, the options object will be merged on to the existing options object, overwriting an previous values. |
| value | `{String}` **Required** This value will be assigned to the provided key. If an `{Object}` was passed as the `key` argument, the `value` argument will be ignored. |

Supported `key` values are: `discount`, `email`,  `shipping_address`, `attributes`, `note`, `ref`.

## url()

The `url` method will return either an empty string if not items are in the cart, or the fully qualified Shopify checkout permalink using all available option arguments.

## go()

The `go` method will redirect the user to the fully qualified Shopify checkout permalink.  If no items are in the cart, it will stay onsite and log a warning message to the console.

---

# Examples (3.9KB)

Source: https://developers.rebuyengine.com/reference/shopify-permalinks-examples.md

Below are a few examples, ranging from simple to more complex.  Shopify-Permalinks.js can be a lightweight addition to your headless project that extends Checkout capabilities, auto-populates customer information and discount codes, and much more.

## Log Checkout URL on Click

Below is a simple example of how a `ShopifyPermalink` object can be created and used to log the checkout URL on button click.

```javascript
const logCheckoutURL = (e) => {
  // Create a new ShopifyPermalink object
  const Permalink = new ShopifyPermalink('https://example-brand.myshopify.com', window.Cart.items);

  // Log the checkout URL to the console
  console.log(Permalink.url());

  // Prevent normal event behavior (if applicable)
  if (typeof e !== 'undefined') {
    e.preventDefault();
  }
}

// Call logCheckoutURL function each time the checkout button is clicked
document.querySelector('#checkout-button').addEventListener('click', logCheckoutURL);
```

## Navigate to Checkout on Click

Below is a simple example of how a `ShopifyPermalink` object can be created and used to redirect a customer to checkout on button click.

```javascript
const navigateToCheckout = (e) => {
  // Create a new ShopifyPermalink object
  const Permalink = new ShopifyPermalink('https://example-brand.myshopify.com', window.Cart.items);

  // Redirect the customer to checkout
  Permalink.go();

  // Prevent normal event behavior (if applicable)
  if (typeof e !== 'undefined') {
    e.preventDefault();
  }
}

// Call logCheckoutURL function each time the checkout button is clicked
document.querySelector('#checkout-button').addEventListener('click', navigateToCheckout);
```

## Auto-Apply a Discount Code

Below is a simple example of how a `ShopifyPermalink` object can be created and used to automatically apply a special discount code in checkout.

```javascript
// Create a new ShopifyPermalink object
const Permalink = new ShopifyPermalink('https://example-brand.myshopify.com', window.Cart.items);

// Set the 'discount' option with a special code
Permalink.setOptions('discount', 'save20');

// Redirect the customer to checkout with the discount code auto-applied
Permalink.go();
```

## Auto-Populate All Available Options

Below is a more advanced example of how a `ShopifyPermalink` object can be created and used to pre-populate customer information fields, update notes, update marketing attribution fields, and more.

```javascript
// Create a new ShopifyPermalink object
const Permalink = new ShopifyPermalink('https://example-brand.myshopify.com', window.Cart.items);

// Set the 'discount' option with a special code
Permalink.setOptions('discount', 'save20');

// Set the 'email' field with the customer's email address
Permalink.setOptions('email', 'john.doe@email.com');

// Set the 'shipping_address' field with the customer's shipping address
Permalink.setOptions({
    shipping_address: {
        first_name: 'John',
        last_name: 'Doe',
        address1: '1234 Super Fake, Blvd',
        city: 'San Diego',
        zip: '92117'
    }
});

// Set the cart 'attributes' with helpful tracking information
Permalink.setOptions({
    attributes: {
        source: 'affiliate',
        affiliate: 'Jane Doe'
    }
});

// Set the cart 'notes' with additional helpful information
Permalink.setOptions('note', 'Some custom note!');

// Set the cart 'ref' for marketing attribution
Permalink.setOptions('ref', 'summer-sms-campaign');

// Set the 'access_token' to set Sales Channel attribution
Permalink.setOptions('access_token', 'f0e4c2f76c58916ec258f246851bea091d14d4247a2fc3e18694461b1816e13b');

// Log the checkout URL to the console
console.log(Permalink.url());

// Redirect the customer to checkout with all customer information fields pre-populated and a discount code auto-applied
Permalink.go();

```

---

# Recommended (1.3KB)

Source: https://developers.rebuyengine.com/reference/meta-shops-recommended.md

## POST /api/v1/meta/recommended

Rebuy works with Meta Shops to enable powerful, high converting, product recommendations.

## Headers

`X-Rebuy-Api-Key` · string
:   Private API key for Meta Shops authentication

## Body Parameters

`product_ids` · array of integers
:   Array of product ids

`limit` · integer · Default: `10`
:   Maximum number of products returned

`external_merchant_id` · string
:   Accepts the first part of a Shopify domain. For example, if the shop's domain is example-brand.myshopify.com please pass in example-brand

## Code Example

```javascript
fetch("https://rebuyengine.com/api/v1/meta/recommended", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-Rebuy-Api-Key": "YOUR_API_KEY"
  },
  body: JSON.stringify({
    product_ids: [1058466627620, 562396463140],
    limit: 20,
    external_merchant_id: "example-brand"
  })
})
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{}
```

### 400 Bad Request

```json
{}
```

---

# Storefront Trending (1.4KB)

Source: https://developers.rebuyengine.com/reference/meta-storefront-trending.md

## POST /api/v1/meta/storefront/trending

Rebuy works with Meta Shops to enable powerful, high converting, product recommendations.

## Headers

`X-Rebuy-Api-Key` · string
:   Private API key for Meta Shops authentication

## Body Parameters

`product_ids` · array of integers
:   Array of product ids

`limit` · integer · Default: `10`
:   Maximum number of products returned

`external_merchant_id` · string
:   Accepts the first part of a Shopify domain. For example, if the shop's domain is example-brand.myshopify.com please pass in example-brand

## Code Example

```javascript
fetch("https://rebuyengine.com/api/v1/meta/storefront/trending", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-Rebuy-Api-Key": "YOUR_API_KEY"
  },
  body: JSON.stringify({
    product_ids: [1058466627620, 562396463140],
    limit: 20,
    external_merchant_id: "example-brand"
  })
})
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{}
```

### 400 Bad Request

```json
{}
```

---

# Collection Trending (1.5KB)

Source: https://developers.rebuyengine.com/reference/meta-collection-trending.md

## POST /api/v1/meta/collection/trending

Rebuy works with Meta Shops to enable powerful, high converting, product recommendations.

## Headers

`X-Rebuy-Api-Key` · string
:   Private API key for Meta Shops authentication

## Body Parameters

`product_ids` · array of integers
:   Array of product ids

`limit` · integer · Default: `10`
:   Maximum number of products returned

`external_merchant_id` · string
:   Accepts the first part of a Shopify domain. For example, if the shop's domain is example-brand.myshopify.com please pass in example-brand

`collection_handle` · string
:   The handle of the collection to get trending products from

## Code Example

```javascript
fetch("https://rebuyengine.com/api/v1/meta/collection/trending", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-Rebuy-Api-Key": "YOUR_API_KEY"
  },
  body: JSON.stringify({
    product_ids: [1058466627620, 562396463140],
    limit: 20,
    external_merchant_id: "example-brand",
    collection_handle: "new-arrivals"
  })
})
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{}
```

### 400 Bad Request

```json
{}
```

---

# Tapcart Custom Screen (3.8KB)

Source: https://developers.rebuyengine.com/reference/tapcart-custom-screen.md

## What are custom screens

Within the Tapcart app editor there is the ability to create a custom screen which is essentially a way of presenting a standard web page while remaining in the mobile app experience. This opens the door for merchants to be able to create a customized product page using a Rebuy [Dynamic Bundle](https://help.rebuyengine.com/en/articles/6120576-how-to-create-a-dynamic-bundle-widget) widget to give the user a type of bundled product page. Read more on [Tapcart custom screens](https://docs.tapcart.com/docs/custom-pages-introduction).

## Getting Started with Tapcart Web Bridge SDK

You will need to install the Tapcart SDK to your site or a specific page that you would like the integration to work on. This can be accomplished by following the Tapcart, [Getting Started](https://docs.tapcart.com/docs/getting-started-sdk#installing-the-sdk-for-liquid-sites) guide. Install their SDK in the `<head>` of your site or a specific page such as product.liquid or product.json.

## Setting up Rebuy

If you do not already have a widget in mind that you would like to power this page, create it now. This will be best used with a Dynamic Bundle type widget to power a bundle experience. The widget should be installed on your store and configured to to your liking. The connected Data Source to this widget should have rules based off the URL that will be powering this experience such as [https://try.rebuyengine.com/products/floral-cosmetics-bundle](https://try.rebuyengine.com/products/floral-cosmetics-bundle) where we can create a URL based rule to say "If URL contains 'floral-cosmetics-bundle' then return the desired products for the floral cosmetics bundle". More on customizing a product and product page to be powered by a dynamic bundle widget to come.

## Creating the Custom Screen in Tapcart

Now, navigate to the admin settings for your Tapcart app and add a custom screen. You will need to add the URL of the page that you have created on your Shopify store to this custom screen settings. For more information on creating a using a custom screen within the Tapcard admin please visit the [Tapcart documentation](https://docs.tapcart.com/docs/custom-pages-introduction).

### Rebuy's Integration with Tapcart Custom Screens

With this integration, the widget being used here will now add items to the cart within the Tapcart mobile app environment, ensuring that the user never leaves their session within the app. When the user clicks 'Add to Cart,' this action will trigger the addition of the items within the mobile app and place them in the user's mobile app cart session. Furthermore, if the user decides they would like more information about a specific item and taps on a 'Learn More' action, such as clicking on the image of an item, they will be directed to the product page for that item within the Tapcart app, consequently leaving the custom screen.

### Things to Consider

This integration is designed to function with Rebuy's Dynamic Bundle widget but is also compatible with a standard Product Page embedded widget.

To ensure that the user remains within the Tapcart app environment for other actions, it is essential to hide links, such as web navigation menus and other links that might enable the user to navigate your web store while on the Tapcart Custom Screen. This can be achieved using conditional CSS and JavaScript. For more information on this, please visit [Tapcarts developer documentation](https://docs.tapcart.com/docs/sdk-introduction).

---

# Search (6.1KB)

Source: https://developers.rebuyengine.com/reference/smart-search.md

## Overview

Smart Search is Rebuy's AI-powered search solution that replaces or enhances your store's native search. It provides instant search results with intelligent ranking, typo tolerance, and faceted filtering.

### Key Features

- **Instant Results** - Search-as-you-type with sub-second response times
- **AI Ranking** - Results ordered by relevance and conversion likelihood
- **Quick View** - Dropdown search results with product previews
- **Results Page** - Full-page search with filters, sorting, and pagination
- **Faceted Navigation** - Filter by price, vendor, tags, availability, and more

### Components

| Component | Description |
|-----------|-------------|
| Quick View | Dropdown overlay triggered from search input |
| Results Page | Full search results page with sidebar filters |

## Quick Start

Listen for Smart Search events to integrate custom functionality:

```javascript
// Quick View ready
document.addEventListener('rebuy:smartsearch.quickview.ready', (event) => {
  console.log('Quick View search ready');
});

// Product added from search
document.addEventListener('rebuy:smartsearch.quickview.add', (event) => {
  const { product } = event.detail;
  console.log('Product added from search:', product.title);
});

// Results Page ready
document.addEventListener('rebuy:smartsearch.resultsPage.ready', (event) => {
  console.log('Results Page ready');
});
```

See [Smart Search Event Listeners](./smart-search-event-listeners.md) for all available events.

---

## Search API

### POST /api/v1/smart-search/search

Returns a list of products based on the given POST parameters. Applies all of your Smart Search settings to the results.

## Response Headers

| Response Header     | Description                                                              |
| ------------------- | ------------------------------------------------------------------------ |
| Search-Page-Current | The current page number of products based on your search term            |
| Search-Page-Total   | The total number of pages of products based on your your search term     |
| Search-Size-Current | The number of products in the current page based on your search term     |
| Search-Size-Total   | The total number of products across all pages based on your search term. |

## Headers

`Rebuy-Api-Key` · string · required
:   Your Rebuy public API key

## Body Parameters

`searchTerm` · string · required
:   Any search term present in the product name, description, SKU, variant SKUs, product handle, vendor name, or product attributes. You can also pass an empty search string to retrieve all search results from the merchant

`fields` · array of strings
:   The set of product fields/attributes to be returned in the search results. If omitted, all fields will be returned

`promotedIds` · array of strings
:   Product IDs to be appended to the search results. These promoted search results will have `is_promoted` field set

`filters` · object
:   Specifies the filtering criteria for a query or a data retrieval request

`filters.tags` · array of strings
:   A list of product tags used to further refine the search

`filters.categories` · array of strings
:   A list of product categories used to further refine the search

`filters.vendors` · array of strings
:   A list of product vendors used to further refine the search

`filters.options` · array of strings
:   A list of product options used to further refine the search

`filters.available` · boolean
:   Limit search to only available products if true

`filters.price` · object
:   Specifies the desired price range with `min` and `max` properties

`filters.collections` · array of strings
:   A list of product collection IDs used to further refine the search

`filters.metafields` · array of strings
:   A list of metafields categorized by type, namespace, name and value delimited by period characters

`exclusions` · object
:   Defines the object that excludes the search results associated with the values supplied

`exclusions.product_ids` · array of strings
:   List of product IDs to be excluded from the search results

`exclusions.collections` · array of objects
:   List of collection IDs to be excluded from the search results

`exclusions.tags` · array of strings
:   List of product tags to be excluded from the search results

`sortBy` · object
:   Custom sort object to sort search results based on custom sort options

`sortBy.field` · string
:   The field to sort by: `id`, `handle`, `sku`, `name`, `vendor`, `price`, `compare_at_price`, `visible`, `can_purchase`, `created_at`, `updated_at`, `product_type`, `ratings`, `best-sellers`

`sortBy.order` · string
:   Sort order: `ASC` or `DESC`

`boostByFields` · array of objects
:   Array to enhance search results by boosting certain fields based on specific criteria

`aggregate` · object
:   Defines dimensions for data aggregation

`aggregate.fields` · array of strings
:   Fields to aggregate: `tags`, `categories`, `vendors`, `options`, `availability`, `price`

`pageSize` · integer
:   The number of search results to be returned per page. Maximum value: 100

`currentPage` · integer
:   The current page number of search results to be retrieved

`responseCustomization` · object
:   Customization options for the response, including rating metafields

## Code Example

```javascript
fetch("https://rebuyengine.com/api/v1/smart-search/search", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Rebuy-Api-Key": "YOUR_API_KEY"
  },
  body: JSON.stringify({
    searchTerm: "hat",
    fields: ["product_id", "name", "price", "tags", "can_purchase", "images"],
    sortBy: { field: "price", order: "ASC" },
    pageSize: 15,
    currentPage: 1,
    filters: {
      price: { min: 0, max: 10000 }
    },
    aggregate: {
      fields: ["availability", "tags", "categories", "price"]
    }
  })
})
  .then(response => response.json())
  .then(data => console.log(data));
```

---

# QuickView Search (3.2KB)

Source: https://developers.rebuyengine.com/reference/quickview-search.md

## POST /api/v1/smart-search/search/quick-view

The Quickview API provides product autocomplete suggestions based on a user query.

## Headers

`Rebuy-Api-Key` · string · required
:   Your Rebuy public API key

## Body Parameters

`query` · string · required
:   A string representing the user's search query

`filters` · object
:   Specifies the filtering criteria for a query or a data retrieval request

`filters.collections` · array of strings
:   A list of collection ids to filter the quickview results by (only return products that belong to the specified collections)

`exclude` · object
:   Defines the object that excludes the search results associated with the values supplied for each field

`exclude.collections` · array of objects
:   List of collections to be excluded from the search results. Each object contains `collectionId` (integer) and optional `hideProducts` (boolean, default: true)

`exclude.productIds` · array of strings
:   List of product IDs to be excluded from the search results

## Code Example

```javascript
fetch("https://rebuyengine.com/api/v1/smart-search/search/quick-view", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Rebuy-Api-Key": "YOUR_API_KEY"
  },
  body: JSON.stringify({
    query: "coffee",
    filters: {
      collections: []
    },
    exclude: {
      collections: [
        { collectionId: "373269922025", hideProducts: true }
      ],
      productIds: []
    }
  })
})
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "successful": true,
  "data": {
    "productSuggestions": [
      {
        "id": "7433398157545",
        "compareAtPrice": 1000,
        "price": 500,
        "name": "Mystery Coffee Bag",
        "url": "https://rebuydemo.myshopify.com/products/mystery-coffee-bag",
        "images": [
          {
            "alt": "",
            "url": "https://cdn.shopify.com/s/files/1/0605/0555/5177/files/Mystery_1_1500x_1.png?v=1709661781"
          }
        ],
        "variants": [
          {
            "id": "42120430026985",
            "compareAtPrice": 1000,
            "price": 500,
            "name": "1 lb",
            "url": "https://rebuydemo.myshopify.com/products/mystery-coffee-bag?variant=42120430026985",
            "images": [],
            "canPurchase": true
          },
          {
            "id": "42120430059753",
            "compareAtPrice": 2000,
            "price": 1000,
            "name": "2 lb",
            "url": "https://rebuydemo.myshopify.com/products/mystery-coffee-bag?variant=42120430059753",
            "images": [],
            "canPurchase": true
          }
        ],
        "canPurchase": true,
        "ratings": {
          "average": 5,
          "count": 2
        }
      }
    ],
    "collections": [],
    "query": "coffee"
  },
  "status": 200,
  "errorMessage": null
}
```

### 400 Bad Request

```json
{}
```

---

# Smart Collections Overview (2.6KB)

Source: https://developers.rebuyengine.com/reference/smart-collections.md

Rebuy Smart Collections is a personalized collection merchandising solution. This module loads with Rebuy JS and requires a root div to attach to.

## Setup

Add the Smart Collections root div to your collection page. You can add this via:

- A custom block in the Shopify admin
- The theme editor
- Manually in your collection template code

```html
<div
  id="rebuy-smart-collections"
  data-rebuy-shopify-collection-id="{{ collection.id }}"
  data-rebuy-app-block="true"
></div>
```

### Attributes

`id` · string · **Required**
:   Must be `rebuy-smart-collections` for the module to attach.

`data-rebuy-shopify-collection-id` · string · **Required**
:   The Shopify collection ID. Use Liquid syntax `{{ collection.id }}` to dynamically populate.

`data-rebuy-app-block` · boolean
:   Set to `true` when adding the div via an app block. If adding directly to theme code, you must set this manually.

## Features

Smart Collections provides:

- **Personalized sorting** - Products ordered based on customer behavior
- **Filtering** - Price range, availability, tags, vendors, product types, options, and metafields
- **Pagination** - Traditional pagination, load more button, or infinite scroll
- **Custom templates** - Full control over layout and styling with Vue.js templates

## Custom Templates

Override the default Smart Collections layout with custom Vue.js templates:

| Template | Description |
|----------|-------------|
| [Dropdown Template](./smart-collections-dropdown-template.md) | Filters in a collapsible dropdown above products |
| [Sidebar Template](./smart-collections-sidebar-template.md) | Filters in a persistent sidebar next to products |

See [Custom Templates Overview](./smart-collections-custom-templates.md) for implementation details.

## Event Listeners

Track user interactions with Smart Collections events:

| Event | Fires When |
|-------|------------|
| `rebuy:smartcollections.init` | Module initializes |
| `rebuy:smartcollections.ready` | Fully initialized and rendered |
| `rebuy:smartcollections.add` | Product added to cart |
| `rebuy:smartcollections.view` | Product viewed |
| `rebuy:smartcollections.productsChange` | Products update (filter/sort/page) |

See [Event Listeners](./smart-collections-event-listeners.md) for full documentation.

## Related

- [Custom Templates Overview](./smart-collections-custom-templates.md)
- [Event Listeners](./smart-collections-event-listeners.md)
- [Active Settings](./smart-collections-active-setting.md)
- [Product List](./smart-collections-product-list.md)

---

# Overview (1.5KB)

Source: https://developers.rebuyengine.com/reference/smart-collections-custom-templates.md

Smart Collections templates enable customization of layout and functionality beyond the admin settings. The component is built with Vue.js, supporting Vue.js attributes for conditional rendering and dynamic behavior.

## Overview

Custom templates let you:

- Override the default Smart Collections layout
- Add custom filtering UI
- Customize product card display
- Implement unique sorting interfaces
- Integrate with theme-specific styling

## Available Templates

| Template | Best For |
|----------|----------|
| [Dropdown Template](./smart-collections-dropdown-template.md) | Compact filter UI above product grid |
| [Sidebar Template](./smart-collections-sidebar-template.md) | Desktop-focused with persistent filter sidebar |

## Vue.js Integration

Templates support all Vue.js directives:

```html
<!-- Conditional rendering -->
<div v-if="shouldShowHeroImage()">
  <img :src="getCollectionHeroImage()" />
</div>

<!-- Loops -->
<div v-for="product in products" :key="product.id">
  {{ product.name }}
</div>

<!-- Event handling -->
<button @click="addToCart(product)">Add to Cart</button>
```

Any globally accessible function can be used to provide alternate user experiences.

## Related

- [Dropdown Template](./smart-collections-dropdown-template.md)
- [Sidebar Template](./smart-collections-sidebar-template.md)
- [Smart Collections Overview](./smart-collections.md)
- [Event Listeners](./smart-collections-event-listeners.md)

---

# Dropdown Template (12.1KB)

Source: https://developers.rebuyengine.com/reference/smart-collections-dropdown-template.md

The dropdown template displays filters in collapsible sections above the product grid, providing a compact interface suitable for all device sizes.

## Implementation

Create a new snippet (typically named `rebuy-smart-collection-template`) and paste the template code. Then render the snippet in your collection template:

```liquid
{% render 'rebuy-smart-collection-template' %}
```

Add this at the bottom of `collection.liquid` or the main file that renders on collection pages.

!!! note "Template Detection"
    When Rebuy loads, it searches for a custom template in the theme code. If found, it uses the custom template instead of the standard template.

## Template

The template wraps content with `{% raw %}` and `{% endraw %}` so Vue.js double curly brace syntax doesn't get parsed as Liquid.

```html title="Last Updated: January 21, 2026"
{% raw %}
<script id="rebuy-smart-collection-dropdown-template" type="text/template">
  <div v-if="shouldShowCollectionsPage()" id="rebuy-smart-collection-dropdown" class="rebuy-smart-collections">
    <div class="rebuy-smart-collections__page">

      <!-- Hero Section -->
      <div class="rebuy-smart-collections__hero" v-bind:class="{ 'rebuy-smart-collections__hero-no-image': !shouldShowHeroImage() }">
        <div class="rebuy-smart-collections__hero-text">
          <h1 class="rebuy-smart-collections__hero-title">{{settings.collectionData?.name || ''}}</h1>
          <div v-if="shouldShowHeroDescription()" class="rebuy-smart-collections__hero-description" v-html="settings.collectionData?.description || ''"></div>
        </div>
        <div v-if="shouldShowHeroImage()" class="rebuy-smart-collections__hero-image">
          <img v-bind:src="getCollectionHeroImage()" />
        </div>
      </div>

      <!-- Skeleton Loading State -->
      <div class="rebuy-smart-collections__skeleton" v-if="!products || products.length === 0">
        <div v-for="n in 8" class="rebuy-smart-collections__skeleton-item">
          <div class="rebuy-smart-collections__skeleton-image"></div>
          <div class="rebuy-smart-collections__skeleton-text"></div>
          <div class="rebuy-smart-collections__skeleton-text short"></div>
        </div>
      </div>

      <!-- Main Content -->
      <div v-else class="rebuy-smart-collections__content">

        <!-- Filters Section -->
        <div class="rebuy-smart-collections__filters-section">
          <div class="rebuy-smart-collections__filters-header">
            <button
              class="rebuy-smart-collections__filters-toggle"
              @click="toggleFilters()"
              :aria-expanded="filtersVisible"
            >
              Filters
              <rebuy-icon :name="filtersVisible ? 'chevron-up' : 'chevron-down'"></rebuy-icon>
            </button>

            <div class="rebuy-smart-collections__sort">
              <label for="sort-select" class="sr-only">Sort by</label>
              <select id="sort-select" v-model="sortBy" @change="handleSort()">
                <option v-for="option in sortOptions" :value="option.value">{{option.label}}</option>
              </select>
            </div>
          </div>

          <!-- Filter Dropdowns -->
          <div v-if="filtersVisible" class="rebuy-smart-collections__filters-body">

            <!-- Price Range -->
            <div v-if="shouldShowPriceFilter()" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Price</h4>
              <div class="rebuy-smart-collections__price-inputs">
                <input type="number" v-model="filterPrice.min" :placeholder="'Min'" />
                <span>-</span>
                <input type="number" v-model="filterPrice.max" :placeholder="'Max'" />
                <button @click="applyPriceFilter()">Go</button>
              </div>
            </div>

            <!-- Availability -->
            <div v-if="shouldShowAvailabilityFilter()" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Availability</h4>
              <label class="rebuy-smart-collections__filter-option">
                <input type="radio" v-model="filterAvailability" value="all" @change="applyFilters()" />
                All
              </label>
              <label class="rebuy-smart-collections__filter-option">
                <input type="radio" v-model="filterAvailability" value="in-stock" @change="applyFilters()" />
                In Stock
              </label>
              <label class="rebuy-smart-collections__filter-option">
                <input type="radio" v-model="filterAvailability" value="sold-out" @change="applyFilters()" />
                Sold Out
              </label>
            </div>

            <!-- Tags -->
            <div v-if="aggregatedFilters.tags && aggregatedFilters.tags.length > 0" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Tags</h4>
              <label v-for="tag in aggregatedFilters.tags" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="tag" v-model="selectedTags" @change="applyFilters()" />
                {{tag}}
              </label>
            </div>

            <!-- Vendors -->
            <div v-if="aggregatedFilters.vendors && aggregatedFilters.vendors.length > 0" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Vendors</h4>
              <label v-for="vendor in aggregatedFilters.vendors" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="vendor" v-model="selectedVendors" @change="applyFilters()" />
                {{vendor}}
              </label>
            </div>

            <!-- Product Types -->
            <div v-if="aggregatedFilters.productTypes && aggregatedFilters.productTypes.length > 0" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Product Type</h4>
              <label v-for="type in aggregatedFilters.productTypes" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="type" v-model="selectedTypes" @change="applyFilters()" />
                {{type}}
              </label>
            </div>

          </div>
        </div>

        <!-- Selected Filters Display -->
        <div v-if="hasSelectedFilters()" class="rebuy-smart-collections__selected-filters">
          <span v-for="filter in getSelectedFiltersDisplay()" class="rebuy-smart-collections__selected-filter">
            {{filter.label}}
            <button @click="removeFilter(filter)" aria-label="Remove filter">
              <rebuy-icon name="x"></rebuy-icon>
            </button>
          </span>
          <button @click="resetFilters()" class="rebuy-smart-collections__reset-filters">Reset All</button>
        </div>

        <!-- Products Grid -->
        <div class="rebuy-smart-collections__products-grid">
          <div v-for="(product, index) in products" :key="product.id" class="rebuy-smart-collections__product-card">

            <!-- Product Image -->
            <a :href="productUrl(product)" class="rebuy-smart-collections__product-image" @click="handleProductView(product, index)">
              <img
                :src="productImage(product)"
                :alt="product.name"
                loading="lazy"
              />
              <span v-if="product.featured_badge" class="rebuy-smart-collections__badge">{{product.featured_badge}}</span>
            </a>

            <!-- Product Info -->
            <div class="rebuy-smart-collections__product-info">
              <a :href="productUrl(product)" class="rebuy-smart-collections__product-title" @click="handleProductView(product, index)">
                {{product.name}}
              </a>

              <!-- Reviews -->
              <div v-if="shouldShowReviews(product)" class="rebuy-smart-collections__product-reviews">
                <span class="rebuy-star-rating">
                  <span class="rebuy-star-rating-background"></span>
                  <span class="rebuy-star-rating-foreground" :style="{ width: getReviewPercentage(product) }"></span>
                </span>
                <span class="rebuy-review-count">{{product.reviews.count}}</span>
              </div>

              <!-- Price -->
              <div class="rebuy-smart-collections__product-price">
                <span v-if="productOnSale(product)" class="rebuy-money sale" v-html="formatMoney(product.selected_variant.price)"></span>
                <span v-if="productOnSale(product)" class="rebuy-money compare-at" v-html="formatMoney(product.selected_variant.compareAtPrice)"></span>
                <span v-else class="rebuy-money" v-html="formatMoney(product.selected_variant.price)"></span>
              </div>

              <!-- Variant Selector -->
              <div v-if="shouldShowVariantSelector(product)" class="rebuy-smart-collections__variant-selector">
                <select v-model="product.selected_variant_id" @change="selectVariant(product)">
                  <option v-for="variant in product.variants" :value="variant.id">{{variant.name}}</option>
                </select>
              </div>

              <!-- Add to Cart -->
              <button
                v-if="shouldShowAddToCart(product)"
                class="rebuy-button rebuy-smart-collections__add-to-cart"
                :disabled="!variantAvailable(product.selected_variant)"
                @click="addToCart(product)"
              >
                {{buttonLabel(product)}}
              </button>
            </div>

          </div>
        </div>

        <!-- Pagination -->
        <div v-if="shouldShowPagination()" class="rebuy-smart-collections__pagination">
          <button
            v-if="hasPreviousPage()"
            @click="goToPage(currentPage - 1)"
            class="rebuy-smart-collections__pagination-prev"
          >
            Previous
          </button>

          <span class="rebuy-smart-collections__pagination-info">
            Page {{currentPage}} of {{totalPages}}
          </span>

          <button
            v-if="hasNextPage()"
            @click="goToPage(currentPage + 1)"
            class="rebuy-smart-collections__pagination-next"
          >
            Next
          </button>
        </div>

        <!-- Load More Button -->
        <div v-if="shouldShowLoadMore()" class="rebuy-smart-collections__load-more">
          <button @click="loadMore()" :disabled="isLoadingMore">
            {{isLoadingMore ? 'Loading...' : 'Load More'}}
          </button>
        </div>

      </div>

      <!-- Powered by Rebuy -->
      <div v-if="shouldShowPoweredByRebuy()" class="powered-by-rebuy">
        <a :href="'https://rebuyengine.com/?shop=' + shop()" target="_blank" rel="noopener">
          Powered by Rebuy
        </a>
      </div>

    </div>
  </div>
</script>
{% endraw %}
```

## Template Features

| Feature | Description |
|---------|-------------|
| Hero section | Collection title, description, and optional image |
| Skeleton loading | Placeholder UI while products load |
| Filter dropdowns | Price, availability, tags, vendors, product types |
| Selected filters | Visual display of active filters with remove buttons |
| Product grid | Responsive product cards with images, reviews, pricing |
| Variant selector | Dropdown for multi-variant products |
| Pagination | Page numbers, load more, or infinite scroll |

## Customization

### Accessing Liquid

To access Liquid snippets within the template, end the raw block temporarily:

```liquid
{% raw %}
  <!-- Vue.js template code -->
{% endraw %}

{% render 'your-liquid-snippet' %}

{% raw %}
  <!-- More Vue.js template code -->
{% endraw %}
```

### CSS Classes

All elements use BEM-style class names prefixed with `rebuy-smart-collections__`. Override these in your theme CSS to customize appearance.

## Related

- [Sidebar Template](./smart-collections-sidebar-template.md)
- [Smart Collections Overview](./smart-collections.md)
- [Event Listeners](./smart-collections-event-listeners.md)

---

# Sidebar Template (18.7KB)

Source: https://developers.rebuyengine.com/reference/smart-collections-sidebar-template.md

The sidebar template displays filters in a persistent sidebar next to the product grid, ideal for desktop experiences with extensive filtering options.

## Implementation

Create a new snippet (typically named `rebuy-smart-collection-template`) and paste the template code. Then render the snippet in your collection template:

```liquid
{% render 'rebuy-smart-collection-template' %}
```

Add this at the bottom of `collection.liquid` or the main file that renders on collection pages.

!!! note "Template Detection"
    When Rebuy loads, it searches for a custom template in the theme code. If found, it uses the custom template instead of the standard template.

## Template

The template wraps content with `{% raw %}` and `{% endraw %}` so Vue.js double curly brace syntax doesn't get parsed as Liquid.

```html title="Last Updated: January 21, 2026"
{% raw %}
<script id="rebuy-smart-collection-sidebar-template" type="text/template">
  <div v-if="shouldShowCollectionsPage()" id="rebuy-smart-collection-sidebar" class="rebuy-smart-collections">
    <div class="rebuy-smart-collections__page">

      <!-- Hero Section -->
      <div class="rebuy-smart-collections__hero" v-bind:class="{ 'rebuy-smart-collections__hero-no-image': !shouldShowHeroImage() }">
        <div class="rebuy-smart-collections__hero-text">
          <h1 class="rebuy-smart-collections__hero-title">{{settings.collectionData?.name || ''}}</h1>
          <div v-if="shouldShowHeroDescription()" class="rebuy-smart-collections__hero-description" v-html="settings.collectionData?.description || ''"></div>
        </div>
        <div v-if="shouldShowHeroImage()" class="rebuy-smart-collections__hero-image">
          <img v-bind:src="getCollectionHeroImage()" />
        </div>
      </div>

      <!-- Main Layout -->
      <div class="rebuy-smart-collections__layout">

        <!-- Sidebar Filters -->
        <aside class="rebuy-smart-collections__sidebar">
          <div class="rebuy-smart-collections__sidebar-header">
            <h3>Filters</h3>
            <button v-if="hasSelectedFilters()" @click="resetFilters()" class="rebuy-smart-collections__reset-link">
              Reset All
            </button>
          </div>

          <!-- Price Range -->
          <div v-if="shouldShowPriceFilter()" class="rebuy-smart-collections__filter-section">
            <h4 class="rebuy-smart-collections__filter-title">Price</h4>
            <div class="rebuy-smart-collections__price-inputs">
              <div class="rebuy-smart-collections__price-field">
                <label for="price-min" class="sr-only">Minimum price</label>
                <span class="rebuy-smart-collections__currency" v-html="shopCurrencySymbol()"></span>
                <input type="number" id="price-min" v-model="filterPrice.min" placeholder="Min" />
              </div>
              <span class="rebuy-smart-collections__price-separator">-</span>
              <div class="rebuy-smart-collections__price-field">
                <label for="price-max" class="sr-only">Maximum price</label>
                <span class="rebuy-smart-collections__currency" v-html="shopCurrencySymbol()"></span>
                <input type="number" id="price-max" v-model="filterPrice.max" placeholder="Max" />
              </div>
              <button @click="applyPriceFilter()" class="rebuy-smart-collections__price-apply">Apply</button>
            </div>
          </div>

          <!-- Availability -->
          <div v-if="shouldShowAvailabilityFilter()" class="rebuy-smart-collections__filter-section">
            <h4 class="rebuy-smart-collections__filter-title">Availability</h4>
            <div class="rebuy-smart-collections__filter-options">
              <label class="rebuy-smart-collections__filter-option">
                <input type="radio" v-model="filterAvailability" value="all" @change="applyFilters()" />
                <span>All</span>
              </label>
              <label class="rebuy-smart-collections__filter-option">
                <input type="radio" v-model="filterAvailability" value="in-stock" @change="applyFilters()" />
                <span>In Stock</span>
              </label>
              <label class="rebuy-smart-collections__filter-option">
                <input type="radio" v-model="filterAvailability" value="sold-out" @change="applyFilters()" />
                <span>Sold Out</span>
              </label>
            </div>
          </div>

          <!-- Tags -->
          <div v-if="aggregatedFilters.tags && aggregatedFilters.tags.length > 0" class="rebuy-smart-collections__filter-section">
            <h4 class="rebuy-smart-collections__filter-title">Tags</h4>
            <div class="rebuy-smart-collections__filter-options">
              <label v-for="tag in aggregatedFilters.tags" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="tag" v-model="selectedTags" @change="applyFilters()" />
                <span>{{tag}}</span>
              </label>
            </div>
          </div>

          <!-- Vendors -->
          <div v-if="aggregatedFilters.vendors && aggregatedFilters.vendors.length > 0" class="rebuy-smart-collections__filter-section">
            <h4 class="rebuy-smart-collections__filter-title">Vendor</h4>
            <div class="rebuy-smart-collections__filter-options">
              <label v-for="vendor in aggregatedFilters.vendors" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="vendor" v-model="selectedVendors" @change="applyFilters()" />
                <span>{{vendor}}</span>
              </label>
            </div>
          </div>

          <!-- Product Types -->
          <div v-if="aggregatedFilters.productTypes && aggregatedFilters.productTypes.length > 0" class="rebuy-smart-collections__filter-section">
            <h4 class="rebuy-smart-collections__filter-title">Product Type</h4>
            <div class="rebuy-smart-collections__filter-options">
              <label v-for="type in aggregatedFilters.productTypes" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="type" v-model="selectedTypes" @change="applyFilters()" />
                <span>{{type}}</span>
              </label>
            </div>
          </div>

          <!-- Product Options -->
          <div v-for="(values, optionName) in aggregatedFilters.options" class="rebuy-smart-collections__filter-section">
            <h4 class="rebuy-smart-collections__filter-title">{{optionName}}</h4>
            <div class="rebuy-smart-collections__filter-options">
              <label v-for="value in values" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="value" v-model="selectedOptions[optionName]" @change="applyFilters()" />
                <span>{{value}}</span>
              </label>
            </div>
          </div>

          <!-- Metafields -->
          <div v-for="(values, metafieldKey) in aggregatedFilters.metafields" class="rebuy-smart-collections__filter-section">
            <h4 class="rebuy-smart-collections__filter-title">{{formatMetafieldTitle(metafieldKey)}}</h4>
            <div class="rebuy-smart-collections__filter-options">
              <label v-for="value in values" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="value" v-model="selectedMetafields[metafieldKey]" @change="applyFilters()" />
                <span>{{value}}</span>
              </label>
            </div>
          </div>

        </aside>

        <!-- Products Area -->
        <main class="rebuy-smart-collections__main">

          <!-- Mobile Filter Trigger -->
          <div class="rebuy-smart-collections__mobile-controls">
            <button @click="openMobileFilters()" class="rebuy-smart-collections__mobile-filter-btn">
              <rebuy-icon name="filter"></rebuy-icon>
              Filters
              <span v-if="activeFilterCount > 0" class="rebuy-smart-collections__filter-count">{{activeFilterCount}}</span>
            </button>

            <div class="rebuy-smart-collections__mobile-sort">
              <label for="mobile-sort" class="sr-only">Sort by</label>
              <select id="mobile-sort" v-model="sortBy" @change="handleSort()">
                <option v-for="option in sortOptions" :value="option.value">{{option.label}}</option>
              </select>
            </div>
          </div>

          <!-- Desktop Sort -->
          <div class="rebuy-smart-collections__desktop-controls">
            <div class="rebuy-smart-collections__results-count">
              {{totalProducts}} products
            </div>

            <div class="rebuy-smart-collections__sort">
              <label for="desktop-sort">Sort by:</label>
              <select id="desktop-sort" v-model="sortBy" @change="handleSort()">
                <option v-for="option in sortOptions" :value="option.value">{{option.label}}</option>
              </select>
            </div>
          </div>

          <!-- Selected Filters -->
          <div v-if="hasSelectedFilters()" class="rebuy-smart-collections__selected-filters">
            <span v-for="filter in getSelectedFiltersDisplay()" class="rebuy-smart-collections__selected-filter">
              {{filter.label}}
              <button @click="removeFilter(filter)" :aria-label="'Remove ' + filter.label + ' filter'">
                <rebuy-icon name="x"></rebuy-icon>
              </button>
            </span>
          </div>

          <!-- Skeleton Loading -->
          <div v-if="isLoading" class="rebuy-smart-collections__skeleton rebuy-smart-collections__skeleton--grid">
            <div v-for="n in 12" class="rebuy-smart-collections__skeleton-item">
              <div class="rebuy-smart-collections__skeleton-image"></div>
              <div class="rebuy-smart-collections__skeleton-text"></div>
              <div class="rebuy-smart-collections__skeleton-text short"></div>
            </div>
          </div>

          <!-- Products Grid -->
          <div v-else-if="products && products.length > 0" class="rebuy-smart-collections__products-grid">
            <div v-for="(product, index) in products" :key="product.id" class="rebuy-smart-collections__product-card">

              <!-- Product Image -->
              <a :href="productUrl(product)" class="rebuy-smart-collections__product-image" @click="handleProductView(product, index)">
                <img
                  :src="productImage(product)"
                  :srcset="generateImgSrcset(product)"
                  :alt="product.name"
                  loading="lazy"
                />
                <span v-if="product.featured_badge" class="rebuy-smart-collections__badge">{{product.featured_badge}}</span>
              </a>

              <!-- Product Info -->
              <div class="rebuy-smart-collections__product-info">
                <a :href="productUrl(product)" class="rebuy-smart-collections__product-title" @click="handleProductView(product, index)">
                  {{product.name}}
                </a>

                <!-- Reviews -->
                <div v-if="shouldShowReviews(product)" class="rebuy-smart-collections__product-reviews" aria-label="Product rating">
                  <span class="rebuy-star-rating">
                    <span class="rebuy-star-rating-background"></span>
                    <span class="rebuy-star-rating-foreground" :style="{ width: getReviewPercentage(product) }"></span>
                  </span>
                  <span class="rebuy-review-count">({{product.reviews.count}})</span>
                </div>

                <!-- Price -->
                <div class="rebuy-smart-collections__product-price">
                  <span v-if="productOnSale(product)" class="rebuy-money sale">
                    <span class="sr-only">Sale price</span>
                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                  </span>
                  <span v-if="productOnSale(product)" class="rebuy-money compare-at">
                    <span class="sr-only">Original price</span>
                    <span v-html="formatMoney(product.selected_variant.compareAtPrice)"></span>
                  </span>
                  <span v-else class="rebuy-money">
                    <span class="sr-only">Price</span>
                    <span v-html="formatMoney(product.selected_variant.price)"></span>
                  </span>
                </div>

                <!-- Variant Selector -->
                <div v-if="shouldShowVariantSelector(product)" class="rebuy-smart-collections__variant-selector">
                  <label :for="'variant-' + product.id" class="sr-only">Select variant</label>
                  <select :id="'variant-' + product.id" v-model="product.selected_variant_id" @change="selectVariant(product)">
                    <option v-for="variant in product.variants" :value="variant.id">{{variant.name}}</option>
                  </select>
                </div>

                <!-- Add to Cart -->
                <button
                  v-if="shouldShowAddToCart(product)"
                  class="rebuy-button rebuy-smart-collections__add-to-cart"
                  :class="{ working: product.status === 'adding' }"
                  :disabled="!variantAvailable(product.selected_variant) || product.status === 'adding'"
                  :aria-label="buttonAriaLabel(product)"
                  @click="addToCart(product)"
                >
                  <span v-html="buttonLabel(product)"></span>
                </button>
              </div>

            </div>
          </div>

          <!-- No Results -->
          <div v-else class="rebuy-smart-collections__no-results">
            <p>No products found matching your filters.</p>
            <button @click="resetFilters()" class="rebuy-button">Clear Filters</button>
          </div>

          <!-- Pagination -->
          <div v-if="shouldShowPagination()" class="rebuy-smart-collections__pagination">
            <button
              v-if="hasPreviousPage()"
              @click="goToPage(currentPage - 1)"
              class="rebuy-smart-collections__pagination-btn"
              aria-label="Previous page"
            >
              <rebuy-icon name="chevron-left"></rebuy-icon>
              Previous
            </button>

            <div class="rebuy-smart-collections__pagination-pages">
              <button
                v-for="page in visiblePages"
                :key="page"
                @click="goToPage(page)"
                class="rebuy-smart-collections__pagination-page"
                :class="{ active: page === currentPage }"
                :aria-current="page === currentPage ? 'page' : null"
              >
                {{page}}
              </button>
            </div>

            <button
              v-if="hasNextPage()"
              @click="goToPage(currentPage + 1)"
              class="rebuy-smart-collections__pagination-btn"
              aria-label="Next page"
            >
              Next
              <rebuy-icon name="chevron-right"></rebuy-icon>
            </button>
          </div>

          <!-- Load More -->
          <div v-if="shouldShowLoadMore()" class="rebuy-smart-collections__load-more">
            <button @click="loadMore()" :disabled="isLoadingMore" class="rebuy-button">
              {{isLoadingMore ? 'Loading...' : 'Load More Products'}}
            </button>
          </div>

        </main>

      </div>

      <!-- Mobile Filter Flyout -->
      <div v-if="mobileFiltersOpen" class="rebuy-smart-collections__mobile-flyout" role="dialog" aria-modal="true" aria-label="Product filters">
        <div class="rebuy-smart-collections__mobile-flyout-backdrop" @click="closeMobileFilters()"></div>
        <div class="rebuy-smart-collections__mobile-flyout-panel">
          <div class="rebuy-smart-collections__mobile-flyout-header">
            <h3>Filters</h3>
            <button @click="closeMobileFilters()" aria-label="Close filters">
              <rebuy-icon name="x"></rebuy-icon>
            </button>
          </div>
          <div class="rebuy-smart-collections__mobile-flyout-body">
            <!-- Same filter sections as sidebar -->
          </div>
          <div class="rebuy-smart-collections__mobile-flyout-footer">
            <button @click="resetFilters()" class="rebuy-smart-collections__reset-btn">Reset</button>
            <button @click="closeMobileFilters()" class="rebuy-button">Apply Filters</button>
          </div>
        </div>
      </div>

      <!-- Powered by Rebuy -->
      <div v-if="shouldShowPoweredByRebuy()" class="powered-by-rebuy">
        <a :href="'https://rebuyengine.com/?shop=' + shop()" target="_blank" rel="noopener">
          Powered by Rebuy
        </a>
      </div>

    </div>
  </div>
</script>
{% endraw %}
```

## Template Features

| Feature | Description |
|---------|-------------|
| Hero section | Collection title, description, and optional hero image |
| Sidebar filters | Persistent filter panel with collapsible sections |
| Mobile flyout | Dedicated filter panel for mobile devices |
| Skeleton loading | Placeholder UI while products load |
| Selected filters | Visual display of active filters with remove buttons |
| Product grid | Responsive product cards with images, reviews, pricing |
| Accessibility | ARIA labels, screen reader text, keyboard navigation |

## Layout Structure

```
+------------------+------------------------+
|     Hero Section                          |
+------------------+------------------------+
|                  |                        |
|    Sidebar       |    Products Grid       |
|    Filters       |                        |
|                  |    - Sort controls     |
|    - Price       |    - Product cards     |
|    - Availability|    - Pagination        |
|    - Tags        |                        |
|    - Vendors     |                        |
|    - Types       |                        |
|                  |                        |
+------------------+------------------------+
```

## Mobile Considerations

On mobile devices:
- Sidebar hides and becomes a flyout panel
- Filter button shows active filter count
- Flyout includes Apply and Reset actions

## Customization

### Accessing Liquid

To access Liquid snippets within the template:

```liquid
{% raw %}
  <!-- Vue.js template code -->
{% endraw %}

{% render 'your-liquid-snippet' %}

{% raw %}
  <!-- More Vue.js template code -->
{% endraw %}
```

### CSS Classes

All elements use BEM-style class names prefixed with `rebuy-smart-collections__`. Override these in your theme CSS to customize appearance.

## Related

- [Dropdown Template](./smart-collections-dropdown-template.md)
- [Smart Collections Overview](./smart-collections.md)
- [Event Listeners](./smart-collections-event-listeners.md)

---

# Event Listeners (5.3KB)

Source: https://developers.rebuyengine.com/reference/smart-collections-event-listeners.md

These events fire during the Smart Collections lifecycle. Use them to track user interactions, integrate with analytics, or customize collection behavior.

## Init

Triggers when the Smart Collections module initializes.

```javascript
document.addEventListener('rebuy:smartcollections.init', (event) => {
  const { smartCollections } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartCollections` | object | The Smart Collections instance |

## Before Ready

Triggers just before Smart Collections becomes ready. Use this to set up any configuration before the collection renders.

```javascript
document.addEventListener('rebuy:smartcollections.beforeReady', () => {
  // Your logic here
});
```

### Payload

This event does not include a payload.

## Ready

Triggers when Smart Collections is fully initialized and ready for interaction.

```javascript
document.addEventListener('rebuy:smartcollections.ready', (event) => {
  const { smartCollections } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `smartCollections` | object | The Smart Collections instance |

### Use Cases

- **Initialize third-party integrations** after Smart Collections is ready
- **Track page view analytics** for collection pages

## Before Add

Triggers just before a product is added to the cart from Smart Collections. Use this to modify the add behavior or show confirmation dialogs.

```javascript
document.addEventListener('rebuy:smartcollections.beforeAdd', (event) => {
  const { product, smartCollections } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being added |
| `smartCollections` | object | The Smart Collections instance |

## Add

Triggers when a product is added to the cart from Smart Collections.

```javascript
document.addEventListener('rebuy:smartcollections.add', (event) => {
  const { product, smartCollections } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was added |
| `smartCollections` | object | The Smart Collections instance |

### Use Cases

- **Track add-to-cart analytics** for products added via Smart Collections
- **Show confirmation messages** after cart additions
- **Trigger upsell modals** based on added products

## View

Triggers when a product is viewed within Smart Collections.

```javascript
document.addEventListener('rebuy:smartcollections.view', (event) => {
  const { product, smartCollections } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being viewed |
| `smartCollections` | object | The Smart Collections instance |

### Use Cases

- **Track product impressions** for analytics
- **Implement lazy loading** of product details

## Before Products Change

Triggers just before the products in the collection are updated (e.g., from filtering or sorting).

```javascript
document.addEventListener('rebuy:smartcollections.beforeProductsChange', (event) => {
  const { products, smartCollections } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The current products before the change |
| `smartCollections` | object | The Smart Collections instance |

## Products Change

Triggers when the products displayed in the collection change (e.g., after filtering, sorting, or pagination).

```javascript
document.addEventListener('rebuy:smartcollections.productsChange', (event) => {
  const { products, smartCollections } = event.detail;
  // Your logic here
});
```

### Payload

| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The new array of products |
| `smartCollections` | object | The Smart Collections instance |

### Use Cases

- **Update analytics** when filter or sort changes
- **Re-initialize third-party tools** that depend on product DOM elements
- **Track collection interaction patterns**

## Event Timing

| Event | Fires When |
|-------|------------|
| `rebuy:smartcollections.init` | Module initializes |
| `rebuy:smartcollections.beforeReady` | Just before ready state |
| `rebuy:smartcollections.ready` | Fully initialized and rendered |
| `rebuy:smartcollections.beforeAdd` | Before product added to cart |
| `rebuy:smartcollections.add` | Product added to cart |
| `rebuy:smartcollections.view` | Product viewed |
| `rebuy:smartcollections.beforeProductsChange` | Before products update |
| `rebuy:smartcollections.productsChange` | Products have updated |

## Related

- [Smart Collections Overview](./smart-collections.md)
- [Custom Templates](./smart-collections-custom-templates.md)
- [Active Settings](./smart-collections-active-setting.md)
- [Product List](./smart-collections-product-list.md)

<!-- Source: onsite-js/src/onsite/js/modules/Event/Event.js:669-696 -->

---

# Active Settings (20.2KB)

Source: https://developers.rebuyengine.com/reference/smart-collections-active-setting.md

## GET /api/v1/smart-collections/{handle}/setting

Retrieves the active Smart Collections settings for a given shop, applying campaign settings if a campaign is active or individual collection settings otherwise.

## Path Parameters

`handle` · string · required
:   URL-friendly identifier for the collection provided by Shopify

## Headers

`Rebuy-Api-Key` · string
:   Your Rebuy public API key or My Shopify Domain

## Query Parameters

`key` · string · required
:   Your Rebuy public API key or My Shopify Domain

## Code Example

```javascript
const handle = "new-arrivals";

fetch(`https://rebuyengine.com/api/v1/smart-collections/${handle}/setting?key=YOUR_API_KEY`, {
  headers: {
    "Rebuy-Api-Key": "YOUR_API_KEY"
  }
})
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
    "successful": true,
    "data": {
        "shopId": 30210,
        "collectionId": 487577813288,
        "settingType": "collection",
        "settingId": 5,
        "enabled": true,
        "featuredProducts": [
            {
                "id": 50,
                "owner": 30210,
                "productId": 9530567786792,
                "settingsId": 5,
                "collectionId": 487577813288
            }
        ],
        "promoTiles": [
            {
                "id": 8,
                "name": "New Arrivals",
                "owner": 30210,
                "content": {
                    "image": true,
                    "imageUrl": "https://imagedelivery.net/rG-6Kka_dHhejlGfRC089g/30210/gallery/bc5b55f1-0274-46e9-8bec-5243de9956c6.jpg/public",
                    "imageUuid": "bc5b55f1-0274-46e9-8bec-5243de9956c6",
                    "imageRedirectUrl": ""
                },
                "placement": {
                    "page": "firstPage",
                    "position": 1
                },
                "settingsId": 5,
                "collectionId": 487577813288
            }
        ],
        "renderOos": 1,
        "filters": [
            {
                "id": 11,
                "key": "",
                "name": "Availability",
                "type": "availability",
                "index": 0,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            },
            {
                "id": 12,
                "key": "",
                "name": "Product Type",
                "type": "product-type",
                "index": 1,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            },
            {
                "id": 13,
                "key": "",
                "name": "Price",
                "type": "price",
                "index": 2,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            },
            {
                "id": 14,
                "key": "",
                "name": "Product Tags",
                "type": "product-tags",
                "index": 3,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            },
            {
                "id": 15,
                "key": "",
                "name": "Vendor",
                "type": "vendor",
                "index": 4,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            }
        ],
        "sortOptions": [
            {
                "id": 21,
                "key": "featured",
                "name": "Featured",
                "index": 0,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 22,
                "key": "best-sellers",
                "name": "Best Sellers",
                "index": 1,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 7
            },
            {
                "id": 23,
                "key": "highest-price",
                "name": "Highest Price",
                "index": 2,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 24,
                "key": "lowest-price",
                "name": "Lowest Price",
                "index": 3,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 25,
                "key": "new-arrivals",
                "name": "New Arrivals",
                "index": 4,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 26,
                "key": "highest-rating",
                "name": "Highest Rating",
                "index": 5,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 27,
                "key": "lowest-rating",
                "name": "Lowest Rating",
                "index": 6,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 28,
                "key": "oldest",
                "name": "Oldest",
                "index": 7,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 29,
                "key": "name-ascending",
                "name": "Name (A-Z)",
                "index": 8,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 30,
                "key": "name-descending",
                "name": "Name (Z-A)",
                "index": 9,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            }
        ],
        "collectionData": {
            "createdAt": 1742390983,
            "description": "",
            "descriptionText": "",
            "handle": "new-arrivals",
            "id": "487577813288",
            "images": [],
            "name": "New Arrivals",
            "productIds": [
                "9530531873064",
                "9530531741992",
                "9530533413160",
                "9530530922792",
                "9530533216552",
                "9530533282088",
                "9530531545384",
                "9530532036904",
                "9530531971368",
                "9530567786792",
                "9530566934824",
                "9530566803752",
                "9530566639912",
                "9530566476072",
                "9530565755176",
                "9530558087464",
                "9530557858088",
                "9530557759784",
                "9530549469480",
                "9530546520360",
                "9530545668392",
                "9530545635624",
                "9530545209640",
                "9530544619816",
                "9530542719272",
                "9530542358824",
                "9530542031144",
                "9530540982568",
                "9530540687656",
                "9530539999528",
                "9530539868456",
                "9530539475240",
                "9530538950952",
                "9530538852648",
                "9530538623272",
                "9530538524968",
                "9530538295592",
                "9530537804072",
                "9530537607464",
                "9530534297896"
            ],
            "updatedAt": 1742390983,
            "visible": true
        },
        "template": {
            "layout": "sidebar",
            "pageTitle": "Showing results for \"{term}\" ({count})",
            "pagination": {
                "type": "default",
                "limitOptions": [
                    15,
                    25,
                    75
                ],
                "loadMoreText": "Load More Products",
                "amountPerPage": 15
            },
            "soldOutTitle": "Sold Out",
            "addToCartTitle": "Add to Cart",
            "addToCartEnabled": false,
            "addedToCartTitle": "Added",
            "addingToCartTitle": "Adding",
            "enabledProductRatings": true,
            "mobileColumnBreakpoint": 1,
            "tabletColumnBreakpoint": 2,
            "desktopColumnBreakpoint": 4,
            "searchBarPlaceHolderText": "Search for products"
        },
        "tagFilters": [],
        "tagExclusions": []
    },
    "status": 200,
    "errorMessage": null,
    "metadata": []
}{
    "successful": true,
    "data": {
        "shopId": 30210,
        "collectionId": 487577813288,
        "settingType": "collection",
        "settingId": 5,
        "enabled": true,
        "featuredProducts": [
            {
                "id": 50,
                "owner": 30210,
                "productId": 9530567786792,
                "settingsId": 5,
                "collectionId": 487577813288
            }
        ],
        "promoTiles": [
            {
                "id": 8,
                "name": "New Arrivals",
                "owner": 30210,
                "content": {
                    "image": true,
                    "imageUrl": "https://imagedelivery.net/rG-6Kka_dHhejlGfRC089g/30210/gallery/bc5b55f1-0274-46e9-8bec-5243de9956c6.jpg/public",
                    "imageUuid": "bc5b55f1-0274-46e9-8bec-5243de9956c6",
                    "imageRedirectUrl": ""
                },
                "placement": {
                    "page": "firstPage",
                    "position": 1
                },
                "settingsId": 5,
                "collectionId": 487577813288
            }
        ],
        "renderOos": 1,
        "filters": [
            {
                "id": 11,
                "key": "",
                "name": "Availability",
                "type": "availability",
                "index": 0,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            },
            {
                "id": 12,
                "key": "",
                "name": "Product Type",
                "type": "product-type",
                "index": 1,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            },
            {
                "id": 13,
                "key": "",
                "name": "Price",
                "type": "price",
                "index": 2,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            },
            {
                "id": 14,
                "key": "",
                "name": "Product Tags",
                "type": "product-tags",
                "index": 3,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            },
            {
                "id": 15,
                "key": "",
                "name": "Vendor",
                "type": "vendor",
                "index": 4,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "namespace": "default",
                "settingsId": 3,
                "excludeSpecific": false
            }
        ],
        "sortOptions": [
            {
                "id": 21,
                "key": "featured",
                "name": "Featured",
                "index": 0,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 22,
                "key": "best-sellers",
                "name": "Best Sellers",
                "index": 1,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 7
            },
            {
                "id": 23,
                "key": "highest-price",
                "name": "Highest Price",
                "index": 2,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 24,
                "key": "lowest-price",
                "name": "Lowest Price",
                "index": 3,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 25,
                "key": "new-arrivals",
                "name": "New Arrivals",
                "index": 4,
                "label": "",
                "owner": 30210,
                "enabled": true,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 26,
                "key": "highest-rating",
                "name": "Highest Rating",
                "index": 5,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 27,
                "key": "lowest-rating",
                "name": "Lowest Rating",
                "index": 6,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 28,
                "key": "oldest",
                "name": "Oldest",
                "index": 7,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 29,
                "key": "name-ascending",
                "name": "Name (A-Z)",
                "index": 8,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            },
            {
                "id": 30,
                "key": "name-descending",
                "name": "Name (Z-A)",
                "index": 9,
                "label": "",
                "owner": 30210,
                "enabled": false,
                "settingsId": 3,
                "lookbackType": "default",
                "lookbackPeriod": 0
            }
        ],
        "collectionData": {
            "createdAt": 1742390983,
            "description": "",
            "descriptionText": "",
            "handle": "new-arrivals",
            "id": "487577813288",
            "images": [],
            "name": "New Arrivals",
            "productIds": [
                "9530531873064",
                "9530531741992",
                "9530533413160",
                "9530530922792",
                "9530533216552",
                "9530533282088",
                "9530531545384",
                "9530532036904",
                "9530531971368",
                "9530567786792",
                "9530566934824",
                "9530566803752",
                "9530566639912",
                "9530566476072",
                "9530565755176",
                "9530558087464",
                "9530557858088",
                "9530557759784",
                "9530549469480",
                "9530546520360",
                "9530545668392",
                "9530545635624",
                "9530545209640",
                "9530544619816",
                "9530542719272",
                "9530542358824",
                "9530542031144",
                "9530540982568",
                "9530540687656",
                "9530539999528",
                "9530539868456",
                "9530539475240",
                "9530538950952",
                "9530538852648",
                "9530538623272",
                "9530538524968",
                "9530538295592",
                "9530537804072",
                "9530537607464",
                "9530534297896"
            ],
            "updatedAt": 1742390983,
            "visible": true
        },
        "template": {
            "layout": "sidebar",
            "pageTitle": "Showing results for \"{term}\" ({count})",
            "pagination": {
                "type": "default",
                "limitOptions": [
                    15,
                    25,
                    75
                ],
                "loadMoreText": "Load More Products",
                "amountPerPage": 15
            },
            "soldOutTitle": "Sold Out",
            "addToCartTitle": "Add to Cart",
            "addToCartEnabled": false,
            "addedToCartTitle": "Added",
            "addingToCartTitle": "Adding",
            "enabledProductRatings": true,
            "mobileColumnBreakpoint": 1,
            "tabletColumnBreakpoint": 2,
            "desktopColumnBreakpoint": 4,
            "searchBarPlaceHolderText": "Search for products"
        },
        "tagFilters": [],
        "tagExclusions": []
    },
    "status": 200,
    "errorMessage": null,
    "metadata": []
}
```

### 404 Not Found

```json
{
  "successful": false,
  "message": "Collection not found",
  "errors": [
    {
      "message": "invalid handle"
    }
  ]
}
```

---

# Product List (5.3KB)

Source: https://developers.rebuyengine.com/reference/smart-collections-product-list.md

## POST /api/v1/smart-collections/{handle}/products

Returns a list of products for a Smart Collection based on the given parameters in the request body. Only products within the specified collection are returned.

## Path Parameters

`handle` · string · required
:   URL-friendly identifier for the collection provided by Shopify

## Headers

`Rebuy-Api-Key` · string
:   Your Rebuy public API key

## Query Parameters

`key` · string
:   Your Rebuy public API key (alternative to header)

## Body Parameters

`fields` · array of strings
:   The set of product fields/attributes to be returned in the search results. If omitted, all fields will be returned

`filters` · object
:   Specifies the filtering criteria for a query or a data retrieval request

`filters.tags` · array of strings
:   A list of product tags used to further refine the resulting products

`filters.categories` · array of strings
:   A list of product categories used to further refine the product list

`filters.vendors` · array of strings
:   A list of product vendors used to further refine the product list

`filters.options` · array of strings
:   A list of product options used to further refine the product list

`filters.available` · boolean
:   Limit search to only available products if true

`filters.price` · object
:   Specifies the desired price range with `min` and `max` properties

`filters.metafields` · array of strings
:   A list of metafields categorized by type, namespace, name and value delimited by period characters

`sortBy` · object
:   Custom sort object to sort search results based on specific product fields

`sortBy.field` · string
:   Sort field. Options: `featured`, `best-sellers`, `highest-price`, `lowest-price`, `new-arrivals`, `highest-rating`, `lowest-rating`, `oldest`, `name-ascending`, `name-descending`

`aggregate` · object
:   Defines dimensions for data aggregation

`aggregate.fields` · array of strings
:   Fields to aggregate. Options: `availability`, `tags`, `categories`, `options`, `vendors`, `metafields`, `price`

`pageSize` · integer · Default: `15`
:   The number of search results to be returned per page. Maximum value: 250

`currentPage` · integer · Default: `1`
:   The current page number of search results to be retrieved

## Code Example

```javascript
const handle = "new-arrivals";

fetch(`https://rebuyengine.com/api/v1/smart-collections/${handle}/products?key=YOUR_API_KEY`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Rebuy-Api-Key": "YOUR_API_KEY"
  },
  body: JSON.stringify({
    fields: ["product_id", "name", "price", "images", "variants"],
    sortBy: { field: "featured" },
    pageSize: 15,
    currentPage: 1,
    filters: {
      price: {},
      tags: [],
      categories: [],
      vendors: []
    },
    aggregate: {
      fields: ["availability", "tags", "categories", "vendors", "price"]
    }
  })
})
  .then(response => response.json())
  .then(data => console.log(data));
```

## Response Examples

### 200 OK

```json
{
  "successful": true,
  "data": {
    "products": [
      {
        "canPurchase": true,
        "categories": ["TOYS"],
        "compareAtPrice": 0,
        "createdAt": 1721135135,
        "description": "",
        "handle": "digimon-plush-toys",
        "id": "9585971822891",
        "images": [
          {
            "alt": "",
            "url": "https://cdn.shopify.com/s/files/1/0888/9407/9275/files/d05c532f9b94484a51dd37222bbea4e2.jpg"
          }
        ],
        "name": "Digimon Plush Toys",
        "price": 2400,
        "sku": "TOY137",
        "tags": ["digimon", "stuffed-toys", "toys"],
        "url": "https://example.myshopify.com/products/digimon-plush-toys",
        "variants": [
          {
            "canPurchase": true,
            "compareAtPrice": 0,
            "id": "49342336958763",
            "name": "Default Title",
            "price": 2400,
            "productId": "9585971822891",
            "sku": "TOY137",
            "visible": true
          }
        ],
        "vendor": "DIGIMON",
        "visible": true
      }
    ],
    "aggregates": [
      {
        "categories": [{ "categories": "TOYS", "numProducts": "10" }]
      },
      {
        "availability": [{ "available": 10 }]
      },
      {
        "price": [{ "max": 6299, "min": 599 }]
      }
    ],
    "pageInfo": {
      "pageSize": 5,
      "currentPage": 1,
      "responseSize": 0,
      "serverSize": 10
    },
    "searchMetadata": []
  },
  "status": 200,
  "errorMessage": null,
  "metadata": []
}
```

### 400 Bad Request

```json
{
  "successful": false,
  "message": "error performing search",
  "data": [
    {
      "message": {
        "error": "failed to read products"
      }
    }
  ]
}
```