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 calledSlideshow 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 showPopup View image
This page will come with one reusable element:
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
If you add more modules, please resize Group PLACEHOLDER MAIN so that it is not overlapping with any other elements (for responsiveness).
Update
var - dummy data's
data type and data source
To make the profile page dynamic, update the
page's
type of content and setvar - dummy data's
data source toCurrent 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 inGroup Sidebar menu
.
If you add more UI components, please resize Group SIDEBAR PLACEHOLDER
so that it is not overlapping with any other elements (for responsiveness).
Add workflows to
Button CHECKOUT
andGroup delete
Open
Popup View image
and update the data source forSlideshow Photos
Move
FloatingGroup checkout button
and make sure the bottom ofFloatingGroup checkout button
aligns with the bottom of the page.
Add workflows to
Button CHECKOUT
Last updated