Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
- Cart Page Settings
- Cart Banner Settings
- Additional Cart Settings & Shipping Calculator
- Examples
- Mobile Layout
The Flex Theme's Cart Page
The Cart Page included in the Flex theme incorporates some additional features that can be added as content blocks to the page! The features available provide opportunities to cross-sell and promote additional products before your customer completes their purchase.
The content blocks available to add onto the cart page are: featured collection, rich text and featured product. When added, these content blocks will appear after the items that are in the cart.
In addition to these content features, a cart page banner, shipping rates calculator, "note" text box and "agree to terms" can also be enabled on the page.
The settings for the cart page are located in three areas. The main settings for the cart page and cart page banner can be located by heading into Customize (your Theme Editor) > Select your Cart from the drop-down page selector. Your theme editor on the left will then update with the settings.
The shipping rates calculator, note text box and agree to terms can be enabled in Customize (your Theme Editor) > Theme Settings > Cart.
Cart Page Settings
The cart page settings are where you can enable general information, configure layout options, add in custom CSS, and add in content blocks to the page (featured collection, rich text, featured product).
General Information
In the cart page general information settings, you can enable the quantity box, total savings and add in a cart message.
Show quantity box
If you'd like to give your customers the ability to change the quantity of the item while they're on the cart page, you can check off the 'show quantity box' setting.
The quantity box style can be chosen in Theme Settings > Elements > Quantity Box > Style, where you can select 'box' or 'stacked.'
Show total savings
If you'd like to display any 'savings,' you can check off the 'show total savings' setting. When a customer adds a sale item to their cart, the total savings will then display underneath the subtotal.
Cart message
If you'd like to leave any important information or text for your customers to read on the cart page, you can add in a 'cart message' which will display underneath the subtotal and above the 'checkout' button.
Layout
The layout settings include options to adjust the spacing and width for the cart page.
Width
You can choose between 'wide' and 'standard' for the width of this section. Selecting 'wide' will spread this section out full-width. Choosing 'standard' will keep the section in a container and not spread the full-width.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Adding content blocks
Within the cart page settings, you can click 'Add content' and choose to add featured collection, featured product, or rich text content blocks to your cart page. Adding these content blocks allow you to cross-sell products on the cart page and can be a great way to highlight new products or ones that are on sale!
Cart Banner Settings
The cart banner settings are where you can choose to add a banner image to the top of the cart page and configure the layout and add in advanced CSS.
Show banner/Image/Darken image
Here's where you can choose your banner image, enable it, and also decide to 'darken' the image as well.
Subheading
While your cart page title will display on top of the banner image by default, you can choose to add a 'subheading' as well.
Width
You can choose between 'wide' and 'standard' for the width of the banner image. Selecting 'wide' will spread this banner out full-width. Choosing 'standard' will keep the banner in a container and not spread the full-width.
Banner height
The 'banner height' setting can be adjusted as well. Choose from small, medium and large to control your banner image's height.
Top/Bottom spacing
You can choose to add space (padding) above and below the banner image by adjusting the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
In the advanced CSS settings, you can add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Additional Cart Settings
Additional cart settings can be found by going into Theme Settings > Cart. Here, you can enable a "note" text box if you'd like to give your customers an easy way to leave a note/special instructions for the order. You can also enable the "agree to terms" check box and choose an "agree to terms" page for the text to get linked up. Lastly, you can enable the "shipping rates calculator" if you'd like your customers to be able to calculate the shipping costs before the checkout page.
Enable "note" text box
When enabled, the note text box will appear below the subtotal and above the 'checkout' button on the cart page.
Enable "agree to terms" checkbox/"Agree to terms" page
If you need a Terms & Conditions checkbox and want to also link it up to a page, you can check off both the enable "agree to terms" checkbox and "agree to terms" page settings.
Enable shipping rates calculator
If you'd like to add the shipping rates calculator to the cart page, you can check off the "enable shipping rates calculator" setting. This will give your customers the option to enter their country, state/province, zip/postal code and calculate the shipping costs before the checkout page. You can also enter the default country selection as well.
Examples
Example 1
Settings:
- Show quantity box - enabled
- Cart message - enabled
- Width - standard
- Top/Bottom spacing - 40px
- Content blocks
- Featured Collection
- Rich Text
- Cart banner
- Width - standard
- Banner height - small
- Top/Bottom spacing - 40px
Example 2
Settings
- Show quantity box - enabled
- Width - standard
- Top/Bottom spacing - 40px/0px
- Cart banner
- Darken image - enabled
- Width - wide
- Banner height - small
- Top/Bottom spacing - 0
Mobile Layout
When viewed on a mobile device, the cart page will resize to fit into your mobile screen! If you have any content blocks added, they will stack vertically in the same order as desktop.
