Cart Page: Sections and Block

A cart page is a web page where customers can review their shopping cart, make changes to their order, and proceed to checkout.

With Concept, an OS 2.0 Shopify theme, you have the ability to add various sections on every page. This means that you can fully customize the look and feel of your Cart page by adding any sections that you desire. Simply click on the Add section button and choose the sections that you want to appear on your page.

By doing this, you can create a visually appealing Cart page that will keep your visitors engaged and informed.

By default, the template group includes two sections:

  1. Cart page section
  2. Recently viewed section

1. Cart page section

The settings for the Cart page section
Section settings Description
Heading
Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extra large.
Heading alignment The Heading can be aligned to the Left, Center, or Right.
Heading tag Selects the heading tag to structure and organize your content for SEO.
Show vendor Displays the vendors of each product in the cart.
Show shipping rates caculator

Shipping calculator

 Enable a Theme settings that allows customers to calculate the approximate shipping fee by entering their country/region, province, and postal/zipcode.

If your customer is logged in, the country in their default shipping address will be selected.
Section
You can adjust the Top padding and Bottom padding from 0px to 120px in increments of 4px.
Show section divider Shows a line divider above this section
Make section full width Makes the container full width.
Make section rounded Applies a rounded edge to the top two corners.
Custom CSS Adds custom CSS to this section.

Available blocks:

  • 1.1 Subtotal
  • 1.2 Cart note
  • 1.3 Checkout button
  • 1.4 Free shipping message
  • 1.5 Custom field
1.1 The settings for the Subtotal block.

No customizable settings available.

1.2 The settings for the Cart note block.
Heading - Adds a note to your order.
1.3 The settings for the Checkout button block.

No customizable settings available.

1.4 The settings for the Free shipping message block.

Make sure that you have properly configured your shipping rates.

Free shipping minimum amount - Enter amount using number only. If using multiple currencies, separate each currency code with its amount (e.g: USD:100, EUR:95, JPY:13000.)

1.5 The settings for the Custom field block.
Block settings Description
Custom field

 
Type Selects 5 of the following to display the block types:
  • Text - short
  • Text - long
  • Checkbox
  • Radio buttons
  • Dropdown list
    		•
    Label Adds the label text.
    Required Marks this setting as a required option.
    Checkbox

     
    Checked value Sets the value for checked value.
    Unchecked value Sets the value for unchecked value.
    Radio buttons

     

    		 Options

    Displays the variants as clickable buttons.

    Adds the options. Separates your options with a comma (e.g: Option 1, Option 2, Option 3).
    Dropdown list

     

    		 Options

    Displays the variants in an expandable drop-down menu.

    Adds the options. Separates your options with a comma (e.g: Option 1, Option 2, Option 3).

    2. Recently viewed

    The settings for the Recently viewed section
    Section settings Description
    Recently viewed
    Number of recent products The number of complementary products can range from 2 to 12.
    Number of columns on desktop Customizes the number of columns displayed on desktop browser from 1 column to 5 columns
    Enable carousel on desktop Displays a carousel of products on a desktop browser.
    Mobile layout
    Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
    Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extra large.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    You can adjust the Top padding and Bottom padding from 0px to 120px in increments of 4px.
    Show section divider Shows a line divider above this section..
    Make section full width Makes the container full width.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    This section does not support adding blocks.

    We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.

    Back to Concept Support