Get more information on your cart page with cart attributes

Cart attributes let you collect additional information about an order on the cart page. This information is relevant to the transaction — for example, you could allow a customer to choose to donate a portion of their order to a charity. The charity that they select on the cart page would then be captured in a cart attribute.

Tip

Cart attributes are different from order notes and line item properties. Order notes, which are available in every Shopify theme, let you capture special instructions on how to prepare and deliver an order. Line item properties, on the other hand, are used to record details about specific items in the order. The presence and type of line item properties vary from product to product. A good candidate for a line item property is monogram text that will be engraved on a particular bracelet sold in your store. You'll find in the Shopify app store several product customization apps that make use of line item properties.

Compatible themes

This tutorial works with the following official Shopify themes:

Compatibility details

Using cart attributes might be different depending on your store theme.

Caution

You can only add cart attributes to your cart page at /cart. Cart attribute information will not be captured in a cart drawer or cart popup. You must disable any cart drawer or popup in your theme if you wish to add cart attributes to your cart form.

To disable cart drawers or popups in the Brooklyn, Classic, Pop, Solo, or Supply themes, visit your Customize theme page, click the Cart page section, and set the Cart type to Page.

Disable ajax

Create a cart attribute field

You can add as many custom form fields to your cart form as you need. You can use the Markup Generator Tool to generate the HTML and Liquid code for each form field you want to add to your cart page.

For example, you can ask a customer if they want their order gift-wrapped:

  1. Visit the Markup Generator Tool.

  2. In the Set your form field section, select Checkbox in the Type of form field drop-down.

  3. Type I want my order gift-wrapped in the Your form field label box:

    Cart attribute markup generator set form field
  4. You can see a preview of your form field in the Preview section:

    Cart attribute markup generator preview
  5. Copy the generated code from the box in the Grab your code section:

    Cart attribute markup generator grab code
  6. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  7. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  8. In the Templates section, click cart.liquid to open your cart template file in the online code editor.

  9. Locate the </form> tag.

  10. On the line above the </form> tag, paste the code that you copied from the Markup Generator Tool.

  11. Click Save to add your changes to the cart.liquid file.

    The gift-wrapping information will be shown on the order page of your admin in the Additional Details section:

    Cart attributes on order page

    You must also add the following code to your theme.liquid file if you are using cart attributes. You only need to add that code once, even if you add more than one field to your cart page.

  12. Copy all of this code.

  13. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  14. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  15. In the Layout section, click theme.liquid to open your theme layout file in the online code editor.

  16. Locate the </body> tag near the bottom of your theme.liquid file.

  17. On the line above the </body> tag, paste the code that you copied.

  18. Click Save to add your changes to the theme.liquid file.

Show cart attributes in email templates

You can show cart attribute information for orders in your email templates. You should add the code to both your plain text and HTML email templates.

Plain text templates

To add cart attributes to a plain text email template, add the following code at the very bottom of the template:


{% for attribute in attributes %}
{{ attribute | first }}: {{ attribute | last }}
{% endfor %}

HTML templates

To add cart attributes to an HTML email template, add the following code at the very bottom of the template:


{% for attribute in attributes %}
{{ attribute | first }}: {{ attribute | last }}<br>
{% endfor %}

Show cart attributes in Order Printer templates

To add cart attributes to an Order Printer template, add the following code at the very bottom of the template:


{% for attribute in attributes %}
{{ attribute | first }}: {{ attribute | last }}<br>
{% endfor %}

Want to discuss this page?

Visit the Shopify Community