> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/2.0.0/pages/2-column-product-checkout-page.md).

# 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`