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.

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

How to set up

• [OPTIONAL] Remove or add additional UI components in Group Details

• [OPTIONAL] Resize Group page860Group and add other modules inside of it

• Update var - dummy data's data type and data source

• 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

• 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.

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

• [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.

• Add workflows to Button CHECKOUT and Group delete

• Open Popup View image and update the data source for Slideshow Photos

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

• Add workflows to Button CHECKOUT