Story theme
Latest
Latest
  • About Story
    • Story theme documentation
  • Updates
    • What's new in Story
      • Story Releases
  • Sections
    • Story sections
      • Accordion group
      • Blog posts
      • Collection list
      • Collection marbles
      • Collection split
      • Contact form
      • Custom liquid
      • Custom content
      • Featured collection
      • Featured product
      • Gallery
      • Icon columns
      • Image banner
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Overlapping images
      • Page
      • Policy links
      • Press
      • Rich text
      • Slideshow
      • Tabs
      • Team
      • Testimonials
      • Text columns with images
      • Timeline tree
      • Timeline with banner
      • Video banner
      • Video player
  • Settings
    • Theme settings
      • Global theme settings
      • Typography
      • Colors
      • Layout
      • Social
      • Cart
      • Search
      • Product grid
      • Currency format
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
  • Header
    • Header
      • Header styles
      • Toolbar
      • Navigation images
      • Image menus
      • Transparent header
      • Mega-menu navigation
      • Drop-down navigation
  • Products
    • Product pages
      • Static product tabs
      • Unique product tabs
      • Product tabs
      • Color swatches
      • Inventory countdown
      • Pre-order products
      • Static size chart
      • Unique size charts
      • Creating pages
      • Size Charts
      • Product image sizes
  • Collections
    • Collection pages
      • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
      • Custom filter options
      • Collection filtering
      • Collection sorting
      • Collection navigation
      • Feature image
  • Cart
    • Story cart
      • Cart styles
      • Shipping message
      • Estimate shipping calculator
      • Cart settings
  • Promotions
    • Upselling
      • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
  • Overlay
    • Popups
      • Cookies consent message
      • Newsletter popup
  • Siblings
    • Product siblings
      • About product siblings
      • Multiple images per variant
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Siblings block setup
      • Variant image sets with alt-tags
  • Pages
    • Page templates
      • Page navigation
      • How to use page templates
      • Story page templates when using a different theme
      • Contact page
      • Lookbook
      • Team
      • Timeline
  • Blogs
    • Blogs and posts
      • Blogs
      • Articles
  • FAQ
    • Frequently asked questions
      • Where to make CSS changes
      • How to download latest version
      • How to add a line break in your headings
      • Share preview link
      • Remove Shopify link in footer
      • Check your theme version
      • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
      • Section blocks
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • Drawer style
  • Popup style
  • Page style
  • App compatible page
  1. Cart
  2. Story cart

Cart styles

Story includes a set of modern cart designs which have powerful functionality

PreviousStory cartNextShipping message

Last updated 3 years ago

Story's high functionality cart designs include features like a free shipping progress bar to encourage shoppers to add more items to the cart, an upsell promotion, available stock messaging, clean and easy-to-use quantity options, and removing items from the cart.

Explore the different styles and features included with Story:

Drawer style

Popup style

Drawer and Popup carts

Supported:

  • Free shipping message with dynamic value and progress bar

  • Upsell promotions

  • Dynamic values for quantity changes and item removal

  • Estimate shipping calculator

  • Cart notes, message to seller

  • Activated when each item is added to the cart (slideout or popup)

Not suitable for:

  • When using third-party cart-related apps that conflict with functionality

  • Displaying quick checkout buttons like Apple Pay, Amazon Pay, PayPal (these buttons by default appear in the next screen, the main checkout)

Page style

The page style cart is ideal for a full-screen cart and is not automatically activated when items are added to the cart. This can be useful for customers who are adding multiple items to the cart without the distraction of the cart appearing each time.

Page style cart

Supported:

  • Free shipping message with dynamic value (located above subtotal)

  • Dynamic values for quantity changes and item removal

  • Estimate shipping calculator

  • Cart notes, message to seller

  • Can display quick checkout buttons like Apple Pay, Amazon Pay, PayPal (removes from the next Checkout screen)

Not supported:

  • Upsell promotions

Cart is manually activated by clicking the cart icon. Does not automatically activate each time an item is added to the cart. A checkmark is used to inform the customer that an item has been successfully added to the cart.

App compatible page

This option is designed to be used with other third-party apps that take control of the cart or have special code used in the cart and cannot use dynamic features of the Story cart. Use this cart style for the most compatibility with apps or custom coding done by developers.

App compatible cart

Supported:

  • Cart notes, message to seller

  • The best option for stores that use cart-related apps or custom code

Not supported

  • Free shipping message with dynamic value and progress bar

  • Upsell promotions

  • Estimate shipping calculator

  • Uses an Update cart link to refresh quantity and removal of items in the cart

  • Cart is manually activated by clicking the cart icon. Does not automatically activate each time an item is added to the cart. A checkmark is used to inform the customer that an item has been successfully added to the cart.

Modern slide-out design, activates when item is aded to the cart
Center of screen popup design, activates when item is added to cart
Full page cart with dynamic functionality
Most compatible with third-party apps and custom coding