Customizable Shopping Cart — Support Guide

This guide walks you through setting up the Customizable Shopping Cart in Vision. The goal is to help you configure it independently, understand the logic behind its structure, and ensure your customers have a clean, guided signup experience.

Table of contents:

1. Overview
2. Key Distinctives
3. Service Package Setup
4. Service Offer Setup
5. Graffic Offer Cards
6. Shopper Flow
7. Best Practices
8. Troubleshooting

1. Overview

The Customizable Shopping Cart is the next‑generation ordering interface in Vision. It presents each service tier as a graphic tile and lets subscribers add compatible options step‑by‑step. The design emphasizes brand alignment, mobile usability, and a guided “build‑your‑own” purchase flow.

2. Key Distinctives

• Graphic‑driven landing screen with tile artwork for each parent offer.

• Stackable add‑ons (router, phone, mesh extenders, etc.) with built‑in compatibility logic.

• Mobile‑first layout tuned for one‑hand navigation.

3. Service Package Setup

For every speed and add‑on combination, create an explicit package:

Speed Tier 1

• Speed 1

• Speed 1 + Router

• Speed 1 + Phone

• Speed 1 + Router + Phone

Repeat the pattern for Speed 2 and Speed 3. A unique package guarantees correct billing, provisioning, and workflow mapping.

4. Service Offer Setup (Parent / Sub‑Offer Model)

1. Parent Offer – the tile displayed on the cart landing page (e.g., Speed 1).

2. Sub‑Offers – child variations revealed after the parent is selected.

Parent Offer: Speed 1
├─ Speed 1 + Router
├─ Speed 1 + Phone
└─ Speed 1 + Router + Phone

Steps:

1. Open the parent offer and switch to Sub Offers.

2. Add each variation under the parent.

3. Create one parent per speed tier.

4. If the base speed should be the default, list it as the only parent and place upgrades beneath it.

5. Graphic Offer Cards

With the customizable cart comes the option to input graphics for your offers. 

Feel free to ask the vision team for help with making these graphics or go ahead and design your own. If doing it on your own, here are some helpful tips.

How to add Graphics

First go into admin utilities>service offers. Then click on the offer that you would like to attach the image to. Scroll to the bottom and click to 'edit' the offer. There are two text boxes, one for the title of the offer and one for the description of the offer. Import the image into the description of the offer. 

Then click the image and ensure it is left-aligned in the text box. To see the image on your shopping cart, make sure it is set to 'visible on public shopping cart' and that you input an address where the offer is available. Also make sure to click 'optimize the display for images'.

Submit the edit once finalized.

Recommended Graphic Sizes

• Height: flexible; target 300 – 600 px to limit scrolling.

• File size: ≤ 300 KB per image.

• Format: JPG or PNG with a solid background. Transparent PNGs can expose drop‑shadow edges.

• Copy limits (including spaces):

  • 2 services – ≤ 240 characters

  • 3 services – ≤ 200 characters

  • 4 services – ≤ 150 characters

  • 5 services – ≤ 115 characters

• Design tips: maintain high contrast; keep critical text inside a 20 px margin; test on mobile before publishing.

6. Shopper Flow

1. Subscriber selects a speed tile.

2. Compatible add‑ons appear as sub‑offer tiles.

3. System disables incompatible combinations automatically.

4. Subscriber proceeds to checkout once selections are complete.

7. Best Practices

• Keep artwork under 300 KB to reduce load times.

• Use concise, plain‑language labels; long names wrap on mobile.

• Preview the cart on a phone and a tablet before publishing.

• Review packages and offers quarterly to retire obsolete variants.

8. Troubleshooting