The new Storable Websites Units Table is being rolled out to customers in waves. Your units table and settings may not yet match the experience shown in this article.
The following options can be edited for each facility's units table in your website admin by right-clicking the Inventory Management widget on a page and selecting Edit. Keep in mind that the changes will need to be saved and the page published before they appear on the live page.
The following permissions are necessary to edit Inventory Management settings and styles:
Settings - Full builder permissions
Units table settings and styling - Content Editing (Facility Pages) and Publishing
View & Heading
Card and List options
Set a default for which shows first, or disable one of those views.
Card view:
List view:
Headings
Enable/disable, and customize, the units table's heading and subheading text.
Heading defaults to ‘Find Your Perfect Storage Unit’
Subheading defaults to ‘Explore available units, compare options, and reserve online in minutes’
Buttons
Customize the ‘Move-In’, ‘Reserve’, or ‘Call for Availability’ buttons.
Move In - If move-ins are enabled, this button will be shown with the configured text. The text defaults to ‘Move In’.
Reserve - If reservations are enabled, this button will be shown, with the configured text. The text defaults to ‘Reserve’.
Join Waitlist - If waitlisting is enabled and unavailable units are shown, this button will be shown with the configured text. The text defaults to ‘Join Waitlist’.
Call - If Call is enabled and unavailable units are shown, this button will be shown with the configured text. The text defaults to ‘Call’.
Price Display
Display Cents: When disabled, prices will be rounded to the nearest dollar.
-
Display Web Rate: You can enable or disable Web Rate display and customize the text. Please note: this requires Web Rates to be configured in your software. If enabled, you can also customize the following:
Web Rate: This field defaults to ‘Web rate'.
In Store: This field defaults to ‘In store rate'.
Tier Styles
If Tiered Pricing is enabled in Edge, this tab lets you create and configure tier cards. You can choose the background and border colors for those tier cards.
Customers will see tier cards after clicking the Explore More button on a unit group card.
Tier Benefits
If Tiered Pricing is enabled, the Tier Benefits tab will be visible, allowing you to add a description for each tier. The description will appear under the tier name on the tier card itself, once set up for each tier per unit group.
Unit Group Descriptions
This tab lets you add a description to each unit group, which will appear under the unit size and above the unit amenities. Each unit group’s description defaults to a comma-separated list of the amenities in that group. The maximum allowed length is 250 characters.
Inventory Management widget styling
When you select the Inventory Management section on the facility page by left-clicking it, the Properties panel opens on the right-hand side. Keep in mind that the changes need to be saved and the page published before they appear on the live page.
The properties panel can be used to change the CSS/styling of the following properties:
General
Font
This controls the font for the units table display
Heading - Font selection for Heading. The default text is ‘Find Your Perfect Storage Unit’.
Body - Font selection for subtext. The default text is "Explore available units, compare options, and reserve online in minutes".
Button
Button Primary
This controls the Reserve, Move In, or Explore More buttons.
Font - Font of the button text.
Font Size - Font size of the button Text. Allows 14 - 16 font size.
Font Weight - Font weight of the button text.
Text Capitalization - Capitalization of the button text.
Regular (Non-hovered) - Controls the styling of the primary card buttons while not hovered.
Color - Color of the primary button text.
Background - Background color of the primary button.
Border Color - Border color of the primary button.
Border Width - Width of the border on the primary button. Accepts 1px - 20px.
Border Radius - Radius of the corners on the primary button. Accepts 0px - 100px.
Custom Radius can also be set, with each corner assigned a unique value between 0 and 100px.
-
Shadow - Shadow around the primary button. If Shadow is enabled, the following fields will show:
Distance - Distance of the shadow from the button. Accepts -100 px - 100px.
Size - Size of the shadow around the primary button. Accepts -100 px - 100px.
Blur - Blur of the shadow on the primary button. Accepts 0 - 100px.
Color - Shadow color for the primary button.
Opacity - Opacity of the shadow for the primary button. Accepts 0% - 100%.
-
Hover - Controls the styling of the primary card buttons while hovered. Hovering means that the mouse cursor is on this button.
Color - Color of the primary button text while hovered.
Background - Background color of the primary button while hovered.
Border Color - Border color of the primary button while hovered.
Border Width - Width of the border on the primary button while hovered. Accepts 1px - 20px.
Border Radius - Radius of the corners on the primary button while hovered. Accepts 0px - 100px.
Custom Radius can also be set, where each corner can be set to a unique value between 0 and 100px.
-
Shadow - If Shadow is enabled, the following fields will show:
Distance - Distance of the shadow from the button while hovered. Accepts -100 px - 100px.
Size - Size of the shadow around the primary button while hovered. Accepts -100 px - 100px.
Blur - Blur of the shadow on the primary button while hovered. Accepts 0 - 100px.
Color - Color of the shadow for the primary button while hovered.
Opacity - Opacity of the shadow for the primary button while hovered. Accepts 0% - 100%.
Button Secondary
The secondary button will only be shown if your location has Tiered Pricing enabled.
Font - Font of the button’s text.
Font Size - Size of the button’s font. Accepts 14 -> 16 point font.
Font Weight - Weight of the font for the button’s text.
Text Capitalization - Capitalization of the font for the button’s text.
-
Regular (non-hovered) - These control the styling of those secondary buttons when not hovered.
Color - Color of the secondary button text.
Background - Background color of the secondary button.
Border Color - Border color of the secondary button.
Border Width - Width of the border on the secondary button. Accepts 1px - 20px.
Border Radius - Radius of the corners on the secondary button. Accepts 0px - 100px.
Custom Radius - Can be set by setting each corner to a unique value between 0 and 100px.
-
Shadow - Shadow around the secondary button. If Shadow is enabled, the following fields will show:
Distance - Distance of the shadow from the secondary button. Accepts -100 px - 100px.
Size - Size of the shadow around the secondary button. Accepts -100 px - 100px.
Blur - Blur of the shadow on the secondary button. Accepts 0 - 100px.
Color - Shadow color for the secondary button.
Opacity - Opacity of the shadow for the secondary button. Accepts 0% - 100%.
-
Hover - Controls the styling of the secondary card buttons while hovered. Hovering means that the mouse cursor is on this button.
Color - Color of the secondary button text while hovered.
Background - Background color of the secondary button while hovered.
Border Color - Border color of the secondary button while hovered.
Border Width - Width of the border on the secondary button while hovered. Accepts 1px - 20px.
Border Radius - Radius of the corners on the secondary button while hovered. Accepts 0px - 100px.
Custom Radius - Can be set by setting each corner to a unique value between 0 and 100px.
-
Shadow - If Shadow is enabled, the following fields will show:
Distance - Distance of the shadow from the button while hovered. Accepts -100 px - 100px.
Size - Size of the shadow around the secondary button while hovered. Accepts -100 px - 100px.
Blur - Blur of the shadow on the secondary button while hovered. Accepts 0 - 100px.
Color - Color of the shadow for the secondary button while hovered.
Opacity - Opacity of the shadow for the secondary button while hovered. Accepts 0% - 100%.
Heading
Headline - If shown, this is the header above the units table. The text defaults to: ‘Find Your Perfect Storage Unit’. Font selection for this text is under the General styling section.
Font Size - Size of the heading text. Accepts 24 - 36.
Font Weight - Weight of the heading text.
Color - Color of the heading text.
SubText - If shown, this is the header above the units table. The text defaults to: ‘Explore available units, compare options, and reserve online in minutes’. Font selection for this text is under the General styling section.
Font Size - Size of the subtext. Accepts 14 - 16.
Font Weight - Weight of the subtext.
Color - Color of the subtext.
Cards/List
Background Color - Background color of the unit card.
Border Color - Border color of the card.
Shadow Toggle (if enabled) - Shadow of the card.
Distance - Distance of the shadow from the parent card. Accepts -100px-100px.
Size - Size of the shadow on the card. Accepts -100px-100px.
Blur - Blur on the shadow of the card. Accepts 0px-100px.
Color - Color of the shadow on the card.
Opacity - Opacity of the shadow on the card. Accepts 0%-100%.
|
Title - Unit Card Title
|
|
|
Price - Unit Card Price
|
|
|
Body1 - Secondary Price
|
|
|
Body2 - Unit Description, icon title, and price description
|
|
|
Body3 - Unit availability text
|
|
|
Promo - Styling for the promotion banner on units (if shown)
|
|
|
Tag - This controls styling for the scarcity display (if enabled)
|