# 2-Column Product Checkout Page

## Overview

Responsive layout for a generic two-column product checkout page. Includes a cart sidebar with common UI components displaying items added to your cart.

![](/files/-LtC8IjH5BT-negHFcKA)

## Structure

* When this page is added to your app, it will come with six main groups:
  * `Group Main` - This group contains the responsive settings for all modules. 
  * `Group page860Group` - All additional modules added should be placed into this group.
  * `Group Details` - This group contains common UI components that you can customize.
  * `Group Pictures` - This group stores the product's main image and list of images. It contains two groups:
    * `Group Pic main` - This group stores the product's main image on desktop.
    * `RepeatingGroup Product Images` - This repeating group holds the list of images of the product page's data type.
  * `Group Sidebar menu` - This group contains UI components for a generic cart.
    * `RepeatingGroup Dummy cart` stores the data for the list of items you've added to your cart.
  * `FloatingGroup checkout button` - This floating group contain a checkout button that is only visible when *Current page width is less than or equal to 664* or when *Current scrolling position is greater than or equal to 665*
* This page comes with two popups:
  * `Popup View image` contains an element called `Slideshow Photos` which shows a list of images (it uses a Bubble plugin called Slick Slideshow).
  * [`Popup Hidden Variables`](https://docs.airdev.co/canvas/general-information/functionality/hidden-variables-popup) contains two groups:
    * `var - Website object` - This group stores the website object (e.g., app name, primary color, and etc.)
    * `var - dummy data` - This is a variable placeholder group.
* Clicking on `Button VIEW PHOTOS` will show `Popup View image`
* This page will come with one reusable element:
  * [header](https://docs.airdev.co/canvas/using-the-template/reference/reusable-elements/header)

## How to set up

* \[OPTIONAL] Remove or add additional UI components in `Group Details`

![](/files/-LtCAIW6zVJGRCdtjPMg)

* \[OPTIONAL] Resize `Group page860Group` and add other modules inside of it

{% hint style="info" %}
If you add more modules, please resize Group PLACEHOLDER MAIN so that it is not overlapping with any other elements (for responsiveness).
{% endhint %}

* Update `var - dummy data's` data type and data source

![](/files/-LobxEXhhv_7KIX5ttTN)

* To make the profile page dynamic, update the `page's` type of content and set `var - dummy data's` data source to `Current page's data type`

![](/files/-LtCAn_UMaZ2CTy1KC-n)

* To change the default image on which main image to show when the page is loaded, open `Group Pic Main` and update the dynamic image data source.

![](/files/-LtCAzeSdJqdFe9p4z_V)

* To change the list of images displayed in the top section, update `RepeatingGroup Product Images's` type of content and data source.

![](/files/-LtCB5JQWazV9G6rukhw)

* \[OPTIONAL] Resize `Group Sidebar menu` and add or remove UI components inside of it.
* Update the data source of `RepeatingGroup Dummy cart` and update the text elements in `Group Sidebar menu`.

{% hint style="info" %}
If you add more UI components, please resize `Group SIDEBAR PLACEHOLDER` so that it is not overlapping with any other elements (for responsiveness).
{% endhint %}

* Add workflows to `Button CHECKOUT` and `Group delete`
* Open `Popup View image` and update the data source for `Slideshow Photos`

![](/files/-LcqblyDp1OyhxdwDN7w)

* Move `FloatingGroup checkout button` and make sure the bottom of `FloatingGroup checkout button`  aligns with the bottom of the page.

![](/files/-Ltz5e5uxWUYxcB250n5)

* Add workflows to `Button CHECKOUT` 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas-pages-and-modules/2.0.0/pages/2-column-product-checkout-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.