Add to cart in your store

On the Catalog and Integrated plans, customers add parts from the 3D catalog straight to your own store’s cart: Shopify, WooCommerce, BigCommerce, or any store with product links.

Set it up once under Settings → Online store in the console, then add each part’s store id to the price list. Parts with a store id get an Add to cart button; parts without one keep the parts request, so nothing is lost while you fill the ids in.

How it works#

“Your store’s own site” means the page’s address matches the Store address you enter (with or without www.), or, for Shopify, the page is in your Shopify theme.

From the parts list customers can add several parts at once. That works everywhere on Shopify, and on WooCommerce and BigCommerce when the catalog is on the store’s own site; elsewhere, those add one part at a time.

Shopify#

1. Settings → Online store: Store = Shopify, Store address = your store’s address (https://shop.yourcompany.com or https://yourstore.myshopify.com).
2. Store id = the variant id. In Shopify admin, open a product, click its variant, and copy the number at the end of the address (…/variants/44012345678901). A product without options still has one variant. A product export CSV includes the variant ids too.
3. Put the catalog on a page with a Custom Liquid section and the embed code, and send us your myshopify.com address as well as your own domain.

On the store, parts are added with Shopify’s cart and the part number is written on the cart line. From hosted pages, Shopify cart links open the store with every part in the cart at once.

WooCommerce#

1. Store = WooCommerce, Store address = your WordPress site’s address.
2. Store id = the product id, or the variation id for a product with options. Hover a product in Products to see ID: 1234 under its name.

On your site, parts go into the cart with WooCommerce’s add-to-cart, and themes that listen for it refresh their mini cart.

BigCommerce#

1. Store = BigCommerce, Store address = your store’s address.
2. Store id = the product id, or product:variant (for example 77:204) for a product with options.

On your store, parts are added with BigCommerce’s Storefront cart; from hosted pages the store opens with the part in its cart.

Any other store#

Store = Another store. Enter the link that adds a product to your cart, with placeholders Assembly Atlas fills in:

https://store.yourcompany.com/cart/add?sku={pn}&qty={qty}

Links add one part at a time. The store id column still has to be filled for a part to get the button; if your link only uses {pn}, put the part number in it.

For developers#

Choose Our developers handle it (embed event) for a headless store, a custom cart or a cart drawer. Nothing is opened; the embed fires atlas-add-to-cart and your code adds the parts. Call preventDefault() to tell the catalog you handled it:

document.querySelector('assembly-atlas').addEventListener('atlas-add-to-cart', async (e) => {
  e.preventDefault();               // we'll add them
  for (const line of e.detail.lines) {
    // line = { id, qty, pn, name }   id is the Store id from your price list
    await myCart.add(line.id, line.qty);
  }
  myCart.openDrawer();
});

The same event fires on every platform before anything happens, so you can also cancel it on Shopify, WooCommerce or BigCommerce to open your theme’s cart drawer instead. After a normal add, atlas-added-to-cart fires with viewUrl, the cart page’s address.

Check it#

• Upload the price list with a store id for a few parts.
• Open a catalog on your store (not only the page builder’s preview), add a part, and check the cart.
• Open the hosted viewer link from Overview and check that the store opens with the part in its cart.
• Place a test order and check it in your store’s admin.

Add to cart clicks show up in Reports, with the parts missing a store id flagged.