SoftSlate Cloud Platform delivers a comprehensive suite of e-commerce features that enable you to sell products and services effectively to your customers. At the center of the customer experience is the notion of the shopping cart. SCP provides intuitive functionality that guides users from product selection through order completion. This guide covers the essential cart features that make online selling both powerful and user-friendly.

Attributes and Options

Product Customization Made Easy Every product page features an intuitive add-to-cart form that allows customers to customize their purchases before adding items to their shopping cart:

image-20240818100746560

Understanding Attributes and Options The form above demonstrates attributes and options in action. Attributes and options are set up by employees in the administrator. They allow the customer to:

  • Enter specific information about their desired product

  • Make selections to customize their order

  • Choose from available variations like size, color, material, or other specifications

The possibilities are virtually endless - common examples include size and color selection, but you can create attributes for any customization your business needs.

Setting Up Product Attributes To create attributes for any product:

  1. Navigate to the product in your administrator interface

  2. Click the three-dots menu next to the product

  3. Select "Attributes"

image-20240818101613077

Attribute Configuration Example The example below shows two attributes: "Daypack Leather Color" and "Backpack Color":

image-20240818101823083

Notice how each attribute uses different display types:

  • "Daypack Leather Color" uses a "DropDownMenu" display type, providing a compact selection method

  • "Backpack Color" uses "RadioButtons" display type, which requires more space but allows you to display images next to each option for visual selection

Attribute Display Types

SCP offers multiple display types to match different customer interaction needs:

Selection-Based Display Types:

  • DropDownMenu: Customers choose from predefined options in a compact dropdown format. Use the "Default Option Code" field to specify which option appears selected when customers first view the page.

  • RadioButtons: Customers select from predefined options displayed with radio buttons. This format supports images next to each option—small images appear directly on the product page, and clicking them opens larger images in a popup for detailed viewing.

Input-Based Display Types:

  • Checkbox: No sub-options needed. Customers can check to include this attribute with their order. When marked as required, customers must check the box to add the product to their cart. Perfect for confirming acceptance of terms and conditions or adding optional features.

  • TextArea: Provides a large text input field for detailed customer input. Ideal for personalization requests, special instructions, or custom messaging.

  • TextBox: Offers a standard text input field for shorter text entries like names, initials, or brief specifications.

  • Email: Ensures customers enter a valid email address format, perfect for gift recipients or notification preferences.

  • Phone: Optimized for mobile devices with number pad input, making phone number entry quick and easy.

  • Date, DateAndTime, Duration: Features popup calendars and specialized widgets for accurate date and time selection, perfect for scheduling services or delivery preferences.

Essential Attribute Configuration Fields

Core Settings:

  • Is Required?: When set to true, customers must provide a value for this attribute before adding the product to their cart. Use this for essential customizations or when you require an input or a selection from the customer.

  • Default Option Code: For DropDownMenu and RadioButtons display types, this field determines which option appears pre-selected when customers first view the product page. Enter the Code value of your preferred default option.

  • Attribute Order: Controls the sequence in which attributes appear on the product page. Use numerical values to create your desired order—lower numbers appear first. If all attributes use the default value of 0, they display in the order they were created.

Pricing and Physical Attributes:

  • Unit Price: Add extra charges for specific attributes. If you enter a value other than 0, this amount adds to the item's total when customers select or enter a value for this attribute. Both attribute prices and option prices (if applicable) contribute to the final item cost.

  • Weight, Length, Width, and Height: These values add to the item's physical dimensions, which affects shipping rate calculations. Use these fields when an attribute makes the product heavier or bulkier. For detailed information, see our Shipping Packages documentation.

Options

Creating Choice-Based Attributes For DropDownMenu and RadioButtons display types, you need to create specific options that customers can select from. These display types are designed around predefined choices rather than free-form input.

Managing Options To set up options for any attribute:

  1. Click the three-dots menu next to the attribute

  2. Select "Options"

image-20240818104631627

Option Configuration Each option requires a descriptive name and can include additional settings like display order, pricing adjustments, and associated images to help customers make informed choices.

image-20240818104840422

Here is more information on some of the other key option fields:

  • Option Order: This governs the order in which the options appear to customers on the product page. If you leave this value as the default, 0, the options will be rendered in the order in which they were added to the system.

  • Is Active: Use this if you need to toggle whether or not the option is shown to users.

  • Unit Price: If a value is entered here other than 0, the amount will be added to the item's total when the customer selectes the given option. Use this, for example, to charge a little extra for "large" versions of an item. Note that attributes can also have a unit price. Both the attribute's price, if defined, and the selected option's price contribute to the item's total.

  • Weight, Length, Width, and Height: If you enter values for these fields, the amounts will be added to the item's weight and dimensions, which can be used when computing shipping rates. Use this, for example, if a particular option is bulkier that other options. For more information, see the document on Shipping Packages.

  • Images: Only useful under attributes with a display type of RadioButtons. The options' small images are shown immediately on the product page, and if clicked, the options' large images will show in a popup, allowing the customer a closer look. For more information, see the documentation section on Images for Attributes and Options Under a Product.

Adding Items to the Cart

After entering attribute values or selecting options, the customer can click the Add to Cart button to add an item to their cart:

image-20240818160627536

Validation Checks

As a customer adds an item to their cart, the system makes the following validation checks:

  • Required attributes must be selected or a value submitted for them.

  • Inventory checks. If inventory tracking is enabled for the product, or a product variant that matches the attributes and options that were entered, the system checks to make sure the item is not out of stock (or if it is out of stock, the "Deny Purchase When Out of Stock" flag is not set). For more information, see the documentation on Inventory Tracking.

  • Max Quantity Per Order checks. It is possible to restrict the overall quantity of a given product in the cart, using the product's "Max Quantity Per Order" field. If that field's value is less than the quantity in the cart, a validation error is shown. Similarly, it's possible to restrict the overall quantity of the products under a given "Primary" category, using the category's "Max Quantity Per Order" field. These validation checks are independent of inventory tracking.

Automatically Saved Carts, and Abandoned Carts

When a customer adds an item for the first time, an Order record is created in the system that represent the cart. The order can actually be viewed in the administrator under the Ecommerce -> Orders area. The order will go through several statuses, such as Initialized and ItemAdded before the customer completes the order.

If the customer does not complete their order in their current browser session, by default, the cart will be reloaded whenever the customer comes back to the site using the same browser, for up to 90 days. This function can be disabled by turning off the Automatically Save Last Cart site setting. If the customer abandons their cart for over 90 days, a job automatically deletes it in order to keep the system clean. Note that when the customer's cart is reloaded in this scenario, it is reprocessed, so that current pricing and availability is taken into account.

A common practice among ecommerce sites is emailing customers when they have abandonded their carts, to ask if there was "something wrong" or enourage them to complete their order. This is possible in SCP with the Follow Up Emails feature.

Cart Page Functions

If a customer chooses to view the cart page on the site, they can not only view all the items they have added previously, they can also edit and remove their items, and perform a couple of other functions.

image-20240818162816545

Editing and Removing Items in the Cart

Next to each option that customer selected for their item, there's a pencil icon. Clicking the pencil icon allows them to change their selection for the attribute.

At the top right of each item there is a large X that allows them to completely remove the item. In addition the quantity of each item can be adjusted.

If items are edited or removed, all the same validations above that are made when the item is added, are made again. In addition discounts and the order's overall subtotal are recalculated.

Coupons/Gift Certificates Form

Customers may also enter a coupon or gift certificate code on the cart page. If they do they'll see messaging about whether the code was applied or will be applied. You can choose to diable the coupon/gift certificate form on the cart page by turning off the Show Coupon Form on Cart Screen? setting.

Estimated Shipping Form

Under the subtotal, the customer can employ a form to provide an estimated shipping cost for the items that are currently in the cart. Clicking on the "Calculate Estimated Shipping" link opens up the form:

image-20240818163808170

Filling in the state and postal code in this form and submitting it invokes the same shipping processing functions that happen during the checkout process. The shipping processors retrieve the rates for the current cart going to the given address, and the least-expensive shipping option is displayed:

image-20240818164343339

You can disable this function by turning off the "Enable Estimated Shipping On Cart Page" site setting.