The shopping cart offers thousands of customization options, which can sometimes make it challenging to understand what’s possible or how specific settings interact. This help article will provide detailed guidance on configuring and managing shopping carts within our system.


Editing a custom cart


When creating a custom shopping cart, there is a lot more flexibility on the order of the modules.  However, it's worth noting that not every module order is possible.  Placing just one module in the incorrect order could cause errors with the shopping cart.  Because of this, we recommend placing the modules in the order displayed below and modifying slightly, if needed. Slight Modification Example - you want the Products to appear before Location Information.  In that case, you can move the Filters and Products modules to be above the Location Information module and the cart will still function properly.    




For the remainder of this training, we will be using the Custom Cart design as it offers a more customized experience.  We will go over some high-level settings that will help further customize your order form.


Click a section below to jump to the detailed description


Config Module

The Config module offers configuration options for the overall cart design.  Most of the fields in this module can be overridden in the other modules for those specific sections. However, the Config module gives you a starting point for the overall design of your cart.

 

Cart Background

When it comes to the Cart Background, there are a few config options available.  

  • Cart Background
    • The Cart Background drop-down is where you will choose the background image from a list of images that you have uploaded for this page. A rule of thumb for the background image is to have an image width of at least 1200px. 
    • Note: you will first need to click the 'Upload/Edit Media' option in the Config module to upload any images you would like to use for the cart. 
  • Cart Fixed Position
    • In general, this is a setting that you will not want to change.  
    • Fixed: this keeps the background image in place and scrolls the rest of the content on the page. 
    • Relative: this has the background image scroll with the content on the page, which could cause parts of the order form to not have a background image.
  • Cart Background Repeat
    • Rather than have one image fixed to the background, you can have the image repeated. This would work in tandem with a 'Relative' Cart Background Position.  An example of why you may use this instead of a 'Fixed' Cart Background is if you want to display your logo in the background rather than an image.


Font

The overall cart font can be controlled with the Headline Font and Body Font settings.  With regards to Fonts, we only offer Google fonts.   Note: If you want to use a Font that does not appear in the available list, it is most likely not a Google Font. You will need to find a Google Font similar to what you want and use that instead. 

  • Headline Font
    • The Headline Font will control section titles such as Property Information, Select a Photographer, etc.
  • Body Font
    • The Body Font will control verbiage within the various sections of the order form.  For example, in the Property Information section, the Body Font would control the Address, City, State, etc.


Colors

Using HEX color codes, you can customize the background and font colors for you cart. 

  • Primary Background
    • The Primary Background color is the color that will be applied to the background of your Shopping Cart. 
    • Note: if you are using a Background Image then this color change will not be visible.
  • Primary Foreground
    • The Primary Foreground color is the color that will be applied to the shopping cart text.  This is for ALL text on the shopping cart UNLESS you have indicated text color in an individual module or with CSS.
  • Secondary Background
    • The Secondary Background color is the color that will applied to the background of the header.  
  • Secondary Foreground
    • As it pertains to the Shopping Cart, the Secondary Foreground color does not control anything.


Font Size

The Font Size section in the Config module allows you to modify the default font size for various screen sizes.  As you can see, the default Font Size across the board is 1em. However, you can modify these if you would like the font size to be smaller (or larger) based on the screen size the Client is viewing from.

  •  <640 Pixels Wide
    • This screen size would be for most mobile phones.
  • 640+ Pixels Wide
    • This screen size would be for most tablets or smaller laptop screen sizes.
  • 1024+ Pixels Wide
    • This screen size would be for most larger laptops or desktop screen sizes.


Meta/Google Tag

The Meta Tags are elements used to provide metadata (information about a webpage) to browsers, search engines, and other services. The Google Tags are a unique identifier used in Google Ads Conversion Tracking to measure and attribute specific user actions on your cart to your ad campaigns.

The Meta and Google Tags can be helpful with:

  • SEO
  • Performance Tracking
  • Reporting


While we do provide fields for these items, you should reach out to the corresponding service for assistance or troubleshooting. 


Page Icon / Share Image

The Page Icon and Share Image fields are additional ways for you to control your branding when Clients are viewing or sharing your order form. 

Note: you will first need to click the 'Upload/Edit Media' option to upload any images you would like to use for the cart. 

  • Page Icon
    • The Page Icon, also known as Favicon, is the image that displays in a web browser tab when viewing your order form.  Additionally, if a Client saves the order form on their phones Home screen, this icon will be used as the "app" icon. 
  • Share Image
    • This is the image that is used when the order form is shared on social media, via text message, etc.  This image will accompany the URL any time it's shared.



All Cart Sections Module

The All Cart Sections module is in addition to the Config module. It has some new additions to cart configuration that weren't previously available with the Cart Config. Most of these fields were things that previously had to be controlled with CSS. 

Note: because it wasn't previously available, if you have been with us for awhile then you may not have this module added to your custom carts already. You can add this module and place it directly below the Config module. 


Width / Cart Area Opacity

These settings will control the overall display of the cart sections.  

  • Width
    • This controls the overall width of the shopping cart sections. The default is 800px but the most requested width is 1200px.
  • Cart Area Opacity
    • This controls the opacity of the cart section backgrounds. 0 = completely see-through 1 = solid color
  • Cart Item Opacity (Lighter/Darker)
    • This will determine whether the cart sections background has a lighter (white) background or a darker (black) background.


Radio / Checkbox / Section Title Color

When a HEX color code is entered here, the radio and checkboxes throughout the cart will display in this color. This includes:

  • Filter Selection radio

  • Product Selection checkbox

  • Team Member radio

  • Payment Option radio

  • Terms & Conditions checkbox


Section Title Color

When a HEX color code is entered here, this will update the font color of all the section headers.  This would be Property Information, Select a Photographer, etc.


Round User Photo / Input Box Corners

By default, all boxes are squared off on the corners. However, you may prefer a rounded look on your corners. 


  • Round User Photo Corners
    • When this is set to 'Yes', both the Team Member and User Account images will have a rounded corner affect.
  • Round Input Box Corners
    • When this is set to 'Yes', the Property Information and Billing Information fields will have a rounded corner affect. 

 


Business Header Module

There are quite a few configuration options to help you display your cart header the way you would like. More often than not, you are attempting to get your cart header to match your existing (external) website header and we want to help you with that as best we can. 


Header Display

These settings control the overall placement and design of the header. 

  • Header Height
    • The Header Height controls the overall height of the header bar.  In general, a height of 120px is ideal but you can choose to increase or decrease this to your liking.
  • Background Color
    • Using a HEX color code, you can change the Background Color of the Business Header.
  • Fixed to Top
    • When setting 'Fixed to Top' to 'Yes', it will keep the Business Header always visible at the top of the page even as the user scrolls down.
  • Logo Width
    • In most cases, the Logo Width will not need to be adjusted.  When the Logo Height is changed, the width of the logo will automatically adjust.
  • Logo Height
    • Changing the Logo Height will adjust how large the logo displays in the Business Header.  As the Logo Height is modified, the Logo Width will automatically adjust.
  • Logo Margin
    • The Logo Margin controls how far from the left-side and the top-side of the page the logo displays. 
    • Example: setting this to '0px 0px' will have the logo nestled directly in the upper left-hand corner of the page.  
  • Center Logo
    • Rather than having the logo on the left-hand side of the header, you can have the logo display directly in the center of the page. It's worth noting that if you have a fair amount of navigation options, this will cause those nav options to be collapsed into a menu rather than always displaying in the header. 


These settings control the overall display of the navigation options. Navigation options are various order forms or Business Site pages that you have created on the Business Site tab for your business.

Note: an option will only appear in the Navigation if the page is set to 'Public'. 

  • Include Navigation
    • This setting determined whether the Navigation options are displayed or not.
  • Login Button Name
    • This will control what the Navigation name is for the login option in the Business Header. Some examples of what others use are:
      • Client Login
      • Login
      • My Account
  • Navigation Right
    • This is the padding from the right-hand side of the page to where the Navigation options will end.
  • Navigation Top
    • This is the padding from the top of the page to the top of the Navigation options.
  • Navigation Font
    • This is the font that you would like to use for the Navigation options.
  • Navigation Font Size
    • This is the font size that you would like the Navigation options to be.  When this is NOT filled out, the default font size is 1em.
  • Navigation Text Color
    • This is the text color for the Navigation options.
  • Navigation Padding
    • This is the padding/space between each of the Navigation options.
  • Navigation Hover Color
    • This is the text color that the Navigation options will have when the user hovers over the Navigation option.
  • Navigation Hover Background
    • This is the background color of the Navigation option when hovered over.  By default, this uses an RGBA color code to allow control of the opacity of the hover background.  You can use a simple HEX color code if you would like OR you can plug in the RGB colors for your HEX color code to allow you to control the opacity. 



Location Info Module

This module controls the address input area for the shopping cart.  While it is a pretty straight-forward area, there are some configuration options. 

Section Title

You can change the section title for the Location Info if you would like. Some will change it to "Property Address" or "Tell Us About The Property".  


State Choices

If your Business operates in multiple states, we don't recommend changing this option. However, if your Business only operates in one state, you can change that to only display that state. It will need to be the abbreviation of the state and NOT the full state name to ensure the Google auto-fill functionality works properly. 


Square Feet / MLS Number / Bedrooms / Bathrooms / Lot Size

All of these fields can be made optional, required, or not asked at all.  

Note: If your Business is using Square Footage based pricing, you will most likely want to make the Square Feet field REQUIRED so that products are properly filtered. 


Map Height

You can adjust the Map Height so that it's smaller or larger than the default 400px.  It is NOT recommended to use this to hide the map entirely. The reason for this is because if Google cannot properly map the location, the client will need to place the map pin and confirm the location to be able to proceed with their order. If the map is not visible, the client will not be able to proceed. 



Filter Module

When your are using Product Filters, you need to have the Filter Module AND it needs to be placed prior to the Products Module. 


In the Filter module, you can change the Section Title and pick and choose which filter options you want to apply to this cart. 


Products Module

The Products Module gives you control over what Products display on the cart and some styling. 


Products

These settings control which products display on the cart and how. 

  • Section Title
    • This allows you to change the Section Title (header) if you would like to. 
    • Note: to eliminate the Section Title from showing on the cart, simply add a space to the field.
  • Number of Columns
    • This controls the default number of columns that products categories can display in.  You can override these on the product category itself (ex - you want one category to display 1-column wide) but this is the default that the cart will display.
  • Products Categories
    • This controls which Product Categories display on this cart.  Initially, no categories are selected and that means that ALL categories will display.  As soon as you make a category selection, the selected categories are the only ones that will display.
  • Show Products Mode
    • This is an option only available with Custom cart designs.  
    • It allows you to hide the products within a category until the client clicks to see the products within that category.  If your Business has a lot of products, it's a nice way to keep the initial view of you cart very clean and uncluttered. 
    • When you change this setting to 'Hide Until Clicked', you will be able to choose which categories you would like to 'hide' the products on.  You can also choose the 'Show Products Button Text' - this is what the button will say to expand the list of products for that category. 


Product Text Formatting

These settings allow the Business Owner to control the formatting of the text for their products. 

  • Category Font Size / Category Description Font Size
    • These two settings allow you to control the font size of the Category Name and Category Description independently. 
  • Product Font Size / Product Description Font Size
    • These two settings allow you to control the font size of the Product Name and Product Description independently. 
  • Price Text Color
    • This setting allows you to change the font color of the Price for their products.  
  • Qty Text Color
    • This setting allows you to control the text color of the number in the QTY drop-down for quantity based products. 
  • Qty BG Color
    • This setting allows you to control the background color of the QTY drop-down for quantity based products. 
  • Hide 'QTY' Text
    • This setting allows you to hide the 'QTY' verbiage of the QTY drop-down for quantity based products. 



Team Members Module

The Team Members module controls how the team members display on the Shopping Cart. 


Section Verbiage

 

  • Section Title
    • The Section Title allows you to change the header for the Team Member section. 
  • Details
    • The Details allows you to add a message at the end of the list of available Team Members.  
    • This could be something like "Your order may be reassigned to the best available team member" 


Team Member Display

These settings control how/what Team Members display. 


  • Team Member Selection
    • With the Team Member Selection, you can choose: 
      • Client Chooses Team Member
        • Just sees the list of available Team Members for selection
      • Option for First Available or Team Member
        • Can choose a specific Team Member OR the 'Any Available' option, which will give them the best available Team Member
      • Don't Show Team Members / Auto-Choose
        • This will hide the Team Member selection and give the order to the best available Team Member
  • Show Team Members
    • With the Show Team Members option, you can choose to display Team Members that offer ANY ordered products or EVERY ordered product.  
    • If you set this to EVERY, the client will only be able to choose from Team Members who offer EVERY product that the client is ordering. If there isn't a single Team Member who can offer EVERY product that is ordered, the client will receive the 'Please Call to Schedule' message. 
  • Identify Recently Used Team Members
    • This setting will add a 'Recently Used' tag to Team Members that have recently been assigned an order for the client.  This will make it easier for them to see who they have used in the past and choose accordingly. 
  • Show the Category with the Product
    • When there are multiple products being ordered, this will display the Product Category AND the Product Name in the Team Member selection. 
  • For New Clients
    • This setting allows you to hide Team Member selection for New Clients only.  In order for this setting to work, the User Account module does need to be ABOVE the Team Members module. 



Google Calendar Module

The Google Calendar module provides real-time scheduling to clients - saving time and resources for you and your Team Members! 


Section Display

These settings control the general display of the Google Calendar module. 

  • Section Title
    • This controls the section header for the Google Calendar module. 
  • Details
    • The Details is the supporting text that appears just below the Section Title.  
    • Most will use this to direct the client to choose the best date/time for the appointment but will also use it as an opportunity to note that their appt date/time is subject to change or maybe include the Business phone number for additional scheduling details. 
  • Available Button Text
    • The Available Button Text is used when the Team Member is set to allow Date scheduling but NOT Date/Time.  This will update the Available text on the button for the day selection. 
  • Weeks to Show
    • The Weeks to Show affects how many weeks show on the calendar by default.  The client can always see more weeks by clicking 'I need something further out' but this will be the default view as soon as they reach the Google Calendar module. 


Efficient Scheduling Options

These settings assist you in keeping the scheduling as efficient as possible. 

  • Team Member Selection
    • Minimal Drive Time
      • This will favor the Team Member whos address is closest to the property 
    • Least Appointments
      • This will favor the Team Member who has the least amount of appointments 
    • Service Area Priority
      • This will favor the team member with the highest (1 being the highest) Service Area Priority for the Service Area(s) that the property is located in 
    • Based on this setting, the system will favor the Team Member that fits this criteria. It's worth noting that the client can always change their selection with Team Members are displayed.
  • Offer Best Times First
    • When set to 'Yes', the Google Calendar scheduler will display 3 appointment times that best fit for that property. 
    • This is used to pack appointments for that Team Member back to back.  So if the Team Member is already going to be in that area on certain days, the system will offer appointment times in the 3 Best Appts that are around the existing appointments in that area. The client is able to click to view more appointment times, they are not required to choose one of the 3 offered dates/times. 
  • Combine Appointments
    • The Combine Appointments feature is ideal when multiple Team Members are needed to complete the order. 
    • In this case, the schedule will only offer dates/times where both/all assigned Team Members are available.  This will prevent multiple trips to the property for the client, saving them time! 


Scheduling Colors

Using HEX color codes, you can control the colors for the Google Calendar scheduler. 

  • Header BG Color
    • This controls the background color of the header that displays the assigned Team Member's name and the Time on Site
  • Time BG Color
    • This controls the background color of each of the available appointment times.
  • Time BG Hover
    • This controls the hover color for the available appointment times.
  • Time BG Selected Color
    • This controls the background color of the selected appointment time.
  • Time Arrow BG Color
    • This controls the background color of the arrow on the Best Appointments 'week' indicator.
  • Time Arrow BG Hover Color
    • This controls the background color of the arrow on the Best Appointments 'week' indicator when hovered over.
  • Appt Time Reserved Text Color
    • This controls the color of the Appointment Reservation Countdown text that appears after the client has selected an appointment date/time. 


Additional Scheduler Settings

These additional settings allow you to further customize the scheduling for your shopping cart. 

  • Appt Reservation Length Override
    • The default reservation time is 15 minutes. This means that their selected appointment time is reserved for 15 minutes.  If they do not complete their order within 15 minutes of selecting their appointment date/time, that date/time will be released and they will need to select a new time.  The reservation prevents double bookings when multiple orders are being placed at the same time. 
    • You can extend (or shorten) this time frame if you would like to. 
  • Scheduling Requirement
    • By default, the client is required to schedule their appointment during the order.  However, you can choose to allow clients to skip scheduling, just like Business Owners and Team Members can. 
    • When this is set to 'Allow Clients to Skip Scheduling', the client will see the 'Skip Scheduling For Now' checkbox below the calendar. 



User Account Module

The User Account module is how the system knows who is placing the order but also gives you control over what information you want from the client when registering during an order. 


Section Settings


  • Section Title
    • You can change the section title to reflect how you would like to ask the client for their information. 
  • Company Name
    • When the Client is registering during the order, you can choose whether they want the Client to be required to enter their Company (Group) Name or not. 
  • Company Address
    • With the Company Address field, you can choose to not ask, make it optional, or have it required. 


Client Group Settings

These additional User Account settings are related to Groups. Ideally when using either of these settings, the User Account module will be the first step on the Shopping Cart. 

  • Limit to Specific Group ID
    • When a Group ID is entered here, only clients within this Group will be able to place orders from this shopping cart.  
    • If the Client does not belong to this Group, they will be redirected to your main shopping cart. 
  • Allow New Clients
    • When this is set to 'Yes' and a new client is registering during an order, they will be automatically added to the Group. 



Upsell Module

When you are using the Upsells feature, the Upsell module should be placed directly above the Payment module.  If it is not, the Upsells will not function properly. 


Aside from enabling Upsells, all of the settings in the Upsell module are for visual changes. 


You can control the Background and text color of the Upsell modal, as well as, the background, border, and text color of the 'Add to cart' button using HEX color codes.   


Additionally, you can update the verbiage for the Upsell decline button. 


Payment Module

The Payment Module is what allows the client to pay for their order (or choose to be invoiced).   

You can update the Section Title, as well as, the Invoice Wording. The Invoice Wording is what the invoice option says when it's available to clients to bypass payment during the order. For example, you can change this to 'Pay at Delivery'. 



Finalize Order Module

Without the Finalize Invoice module, the Client cannot complete their order.  There are a handful of settings contained within this module that are fairly important for you to be aware of. 


Button Design

These options can be used to customize the order button.  You can change the button verbiage, text color, background color, hover color, and even the button rounding. For example, if you want the button to be completely square, you can set the rounding to 0px. 

 


Terms of Use

With a Custom cart design, you can have multiple Terms of Use.  Since the Terms of Use caption can be customized, you could use the additional Terms of Uses for things like cancellation policies or delivery timeframe acknowledgements. 

  • Terms of Use Mode
    • The Terms of Use Mode allows the Terms to be displayed in a scroll box or as in line text - whichever you prefer.
  • Agree Text
    • You can customize this verbiage for the acknowledgement checkbox.


Thank You Message

The Thank You Message is what the client will see after their order has been placed.  You can customize this messaging to include contact information or any next steps (like a photoshoot checklist). 


Special Order

The Special Order is what the Client receives when attempting to place an order for an address outside the Businesses serviceable area.

  • Special Property
    • You can customize the Special Property message that the Client receives
  • Project Information Caption
    • The Project Information Caption is the area of the Special Order form where you can ask what the Client is looking to have done for that property.
  • Fields Required
    • You can make all of the fields required if you would like. This will prevent the Client from submitting the Special Order message to your team without filling out all of the fields on the form.
  • Email Override 
    • By default, the Special Order notification emails go to the Business Owner.  If you have a particular Team Member/Admin that you would like to handle those Special Orders, you can use this field to override the emails to that Admin's email address.



Appointment Preferences Module

While the Google Calendar scheduling module is the best way to provide Clients with real-time scheduling and eliminates additional work on the Businesses end, you can choose to use the Appointment Preferences scheduling instead of Google Calendar.  The Appointment Preferences is just that, a preference.  When the Client chooses a preference, it is still up to the Business Owner/Team Member to enter in the actual date/time of the shoot.


Selection Preferences

  • The Minimum and Maximum Selections determine how many appt preference selections the Client can make. 
  • The Future Weeks to Show is how many weeks beyond the current week will display by default when the Client reaches the scheduler. 
  • The Maximum Weeks Out to Schedule controls how far out the Client is able to view the schedule and choose an appt preference.  
  • Days to First Appointment is how far from todays date the first appointment selection will be available. If this is set to 1, the Client will be able to book tomorrow. If it is set to 7, the Client won't be able to book until 1 week from today.


Day Selection Options

  • Days of the Week allows you to control what days are available for booking from this cart, regardless of the Team Members availability. 
  • Unavailable Days allow you to block off specific dates, such as holidays, without having to actually mark the time off on the respective Team Member calendars. 
  • Time Slots Per Day lets you dictate how many slots will be available each day.


Slot Names

The Slot Names are what the Client will see on the calendar when making their appt preference selections. You can have up to 10 Slat Names, however, only the amount of Time Slots Per Day that you have designated will actually show on the order form.


Colors

With the Appointment Preferences module, you can change the Background Color, the Background Hover Color, and the Selected Background Color of the Time Slots.

 


CSS / HTML Customization

While everything we've gone over so far are settings within the shopping cart config, further customizations can be made with CSS or HTML.  Our Support Team is happy to help with basic customizations as much as they can, however, we recommend hiring a web designer for extensive design customizations.


For any additional questions, our Support team is ready to help you!

Phone/Text: 509-515-3338

Email: Support@HDPhotoHub.com