Ariade is an accessible BigCommerce theme built to WCAG 2.2 AA. This BigCommerce theme documentation explains how to set up every part of the theme in BigCommerce's Page Builder. It is written for store owners; no coding is needed.
Before you start: make a copy of your theme. In your BigCommerce control panel go to Storefront > Themes, open the menu (…) on the Ariade theme and choose Make a copy. Change the copy, preview it, then apply it. If something goes wrong you can apply the earlier one again in one click.
01 Install and first steps
Your downloads
Set up Ariade in 3 steps
Buy Ariade for BigCommerce once and your theme files wait in My account > Downloads. Start with the theme; the other two are optional.
- Start here
Ariade for BigCommerce
The accessible theme, built to WCAG 2.2 AA. The zip comes with your order, in My account > Downloads.
Get Ariade for BigCommerce - Optional
Demo store settings
The same theme with the demo store’s look. Included with your purchase, next to the theme zip.
Open my downloads - Optional
Setup Check
We check 6 key pages by hand once your content is in, send a written report and check again after your fixes.
Add the Setup Check
Install the theme
- In your BigCommerce control panel, go to Storefront > Themes and click Upload theme, on the right of Theme library.
- Your computer’s file window opens. Choose the Ariade zip you downloaded: the theme zip for a clean start, or the demo store settings zip for the demo’s look. The upload starts by itself.
- Wait while BigCommerce processes the theme. It shows Upload complete and adds Ariade at the top of the Theme library. The picture stays blank for a minute or two, until processing ends.
- When the picture appears, click Apply theme on the new Ariade and confirm. Your store now runs Ariade.
First steps in Page Builder
- Make a copy of the theme (see above) and click Edit in Page Builder. The theme's settings are in Theme Styles (the paintbrush), in the groups that start with Ariade.
- Upload your logo in Storefront > Logo. In Theme Styles > Ariade footer, switch off Show the white Ariade logo so the footer shows your store name.
- Turn on filters for your categories: Products > Filtering, then Enable. Ariade shows them in a filter column that updates the list in place.
- Show what each product helps with: create a product custom field (for example Helps with, with values like Low vision, Hearing) and type its name in Theme Styles > Ariade product cards. It appears as a "Helps with" line on product cards and the product page. Two more custom field names are read by the theme: In short (an easy-read summary shown above the description) and Accessibility details.
- Create your pages in Storefront > Web pages: Contact (the contact form type), Accessibility statement, About, Shipping, Returns. For a store locator and events, create the pages and pick the layout in Template Layout File:
ariade-store-locator,ariade-events-listand, for each event,ariade-event-page(see Page templates). - Set the four main menu links (for example Sale, Brands, Journal, Help) in Theme Styles > Ariade header > Main menu. Your categories appear under the first menu entry by themselves.
What to fill in after installing
The clean theme leaves out the demo store’s phone, email and demo-only links, so their buttons stay hidden until you fill them in. Everything below is in Page Builder > Theme Styles.
| What | Where in Theme Styles |
|---|---|
| Phone, email, opening hours and sign language page | Ariade header > Store contact. They appear in the top bar, the footer and the cart, so customers can always reach a person. |
| Contact page links | Ariade header > Store contact, Ariade footer > Help panel and Ariade home page > Help. The clean theme points them to /contact-us/, the contact page every BigCommerce store has. |
| Shipping and returns link | Ariade product page, Shipping and returns link. The clean theme points it to /shipping-returns/. |
| Accessibility statement link | Ariade home page > How we test, Link. The Accessibility settings panel uses the same link for its statement button. |
| Home slides and product of the month | Ariade home page > More sections: Slide 1 link to Slide 3 link, and Product of the month: product link. A slide shows no button until it has a link; product of the month stays hidden until it has one. |
| Demo store settings zip only | Its links use the demo store’s page addresses, for example /pages/contact/ and /pages/about/. Create pages with those addresses in Storefront > Web pages, or change the links in the groups above. |
02 Theme settings
Open Page Builder > Theme Styles. BigCommerce's own groups (Global, Header and footer, Products, Buttons and icons, Checkout page) hold colours, fonts and checkout styling; the Ariade groups hold everything that is specific to Ariade.
Text settings and the standard texts. Where a label says "empty: standard text, - hides it", leaving the box empty shows Ariade's own text (translated into the store's language), a single hyphen - hides it, and anything else replaces it. BigCommerce allows up to 64 characters in a text setting.
Colours and fonts
Page, text, link and button colours, and the heading and body fonts (Barlow by default), in BigCommerce's Global and Buttons and icons groups. The defaults pass WCAG 2.2 AA. If you change them, check every text and button colour pair with a contrast checker (4.5 to 1 for text, 3 to 1 for buttons and field edges).
Demo home page
Ariade header
Top bar message with link and an optional offer end date (shown as fixed text that does not tick), the Call, Email and Sign language help links, your store contact details and the main menu.
Demo top bar and header of any page
Ariade footer
Help panel with photo, heading, text and two buttons; the newsletter heading and text; the bottom bar text and the theme credit.
Demo footer of any page
Ariade product cards
Main category shown as a pill, the custom field used for the "Helps with" line (with or without icons), star ratings and the Add to cart / Choose options buttons.
Demo See better category
Ariade home page
Hero (heading, text, buttons, the background video and the list of pills), benefits strip, category tiles, featured products, How we test, Our story, reviews and the help rows. Each section can be switched off.
Demo home page
Ariade product page and cart
Three promises under Add to cart and the shipping and returns note on the product page. In the cart: free shipping from an amount (a bar and a sentence say how far the cart is from it), and up to three lines and a note under the checkout button.
Demo product page
Ariade blog
The blog heading (the blog name shows as a small label above it), the line under it, and your Journal categories: the first four become the topic pills, the rest go under + More, and they show as solid pills on cards. Posts get their reading time, Print and Share by themselves; the Listen button in the top bar reads them aloud.
Demo Journal
Ariade pages
Two colours: the highlight panel background (behind the figure cards, call-to-action and newsletter panels; keep it light) and the accent (icons and small labels). Used by the designed page layout; see Make a designed page.
Demo About
Checkout page
BigCommerce's checkout gets the theme's colours, fonts, focus outline and error colour from the Checkout page group. The checkout layout itself is BigCommerce's.
Demo add a product to the cart and go to checkout.
03 Home page
The home page is built from the sections in Theme Styles > Ariade home page, in this order: hero, benefits, shop by need (your categories), featured products (BigCommerce's featured products), How we test, Our story, reviews and help. Switch a section off with its Show this section box. To add your own content, Page Builder's drag-and-drop regions (for example the global region under the header) accept BigCommerce widgets; check that any widget you add has headings in order and image descriptions.
Demo home page
04 Page templates
Product
Pictures with descriptions, price, options as labelled buttons, quantity, Add to cart with a confirmation dialog, the "Helps with" line, promises, description with an "In short" summary (from the custom field of that name), reviews, and related and similar products.
Category and brand
Header band with the category picture, sub-categories, filters, sort with an Apply button, and pages. Filters and pages update the list in place; the new number of products is read out.
Demo See better
Search
Search results for products and for pages and articles, with the same filters as categories. While typing in the header search, suggestions appear and their number is read out.
Demo search for magnifier
Cart
Quantities change with labelled buttons; the new total is read out, and focus moves to the cart heading after a product is removed. Free shipping progress and your notes under the checkout button.
Demo cart
Blog and post
Blog list with the newest post as a large card, topic filters (your Journal categories first, the other topics under + More), short summaries, author initials, reading time and a newsletter panel. Each post shows its category, its summary, reading time, Print and Share, an "On this page" list for posts with sub-headings, its topics, "Was this guide helpful?" and three related guides. The Listen button in the top bar reads the post aloud. Summaries come from each post's Meta Description; set your categories in Theme Styles > Ariade blog.
Demo Journal
Web pages
Normal pages (Template Layout File default) show an "On this page" list made from their headings, bullet lists with ticks and numbered lists with round numbers, and wide tables that scroll sideways in a box you can reach with the keyboard. Contact pages use BigCommerce's contact form with clear errors. Want a designed page instead? See Make a designed page.
Demo FAQ
Designed page (ariade-designed-page)
Turns what you write in the page editor into a designed page: a header with a round photo, figure cards, a story with pictures, step cards, promise cards and buttons. No code and nothing to install: you write normal text, headings, lists and pictures, and Ariade does the layout. Use it for About, Our mission or any page you want to show off. See Make a designed page.
Demo About
Store locator (ariade-store-locator)
Create a web page and choose ariade-store-locator as its Template Layout File. In the normal editor, write each store as a Heading 2 followed by short lines: Area:, Address:, Phone:, Hours:, Time zone:, Access:, Map position: and Book: (all optional). Ariade adds the search by city or ZIP code, a filter for each access feature, "Use my location" with distances, Directions and Call buttons, and an Open now / Closed badge worked out in each store's time zone. A map is an ordinary picture you upload, so there is no map service to pay for. Step by step: Show your stores.
Demo Stores
Events (ariade-events-list, ariade-event-page)
One Events page (ariade-events-list) holds only a short intro; Ariade fills it with a countdown to the next event, Upcoming and Past tabs, filters, event cards by month and a month calendar. Each event is its own web page (ariade-event-page) with the Events page as its Parent Page, written in the normal editor as plain lines (Date:, Time:, Place:, Price:, Seats:, Access: …) and paragraphs. Ariade builds the event page with its facts, plan for the day, accessibility, add to calendar, share and a booking form. Bookings reach you by email through the store contact form; event alerts join the store newsletter. Step by step: Run events with booking.
Demo Events
Product video (custom fields Video, Video captions)
Not in BigCommerce by default: its product Videos field takes YouTube only. Ariade also plays your own MP4, uploaded to your store's files, in the browser's player under the product pictures: captions on from the start, never autoplaying, a "Read the video transcript" panel and an "Audio description of this product" link, both written in the product description. Step by step: Add an accessible product video.
Bulk order (ariade-bulk-order)
Not in BigCommerce by default. Choose ariade-bulk-order as a product's Template Layout File and its options show as one table, each with its own quantity box, a running total and one Add to cart for all of them. For bulk and business buyers, and anyone who finds choosing options one at a time tiring. Step by step: Let customers order several options at once.
Sign in, account, 404
Sign in and create account with the right autocomplete and show password buttons, account pages with a menu that marks the current page, and a page-not-found page with search and links.
Demo Sign in
Make a designed page
Any web page can look like the demo's About page: a header with a round photo, figure cards, a story with pictures, step cards, promise cards and buttons. You still write it in BigCommerce's normal page editor, with headings, lists and pictures. Ariade recognises what you wrote and lays it out. No code, and every word stays yours to edit.
Two layouts: pick yours
Every web page can use one of two layouts. You choose per page in Advanced Options › Template Layout File, and you can change your mind at any time.
| Compare | default | ariade-designed-page |
|---|---|---|
| Looks like | A clean text page, with an "On this page" list, tick lists and round numbers | A designed page with a photo header, cards and buttons |
| How you write | Any way you like, as in a word processor | The same editor, following a few simple patterns (below) |
| Best for | Shipping, Returns, policies, FAQs | About, Our mission, a landing page you want to show off |
Switching is safe. Both layouts read the same page text. Changing the Template Layout File only changes the look; no words or pictures are lost. Anything the designed layout doesn't recognise is shown as normal text, so nothing breaks.
What you get
Step by step
- In Storefront › Web pages, open the page (or click Create a Web Page).
- Keep the page type on Contain content created using the WYSIWYG editor. Never choose "raw HTML".
- Write the page following the top of the page and the section patterns, or start from the sample.
- Under Advanced Options, set Template Layout File to ariade-designed-page.
- Click Save & Exit and open the page on your store.
The top of the page
Everything before the first Heading 2 becomes the header band.
| In the editor | On the store |
|---|---|
| A short line in italic (the editor's I button) | The small label above the heading, e.g. About us |
| A line in Heading 1 | The big heading. Without one, the page name is used; the page name is also the menu label, so keep that short ("About"). |
| The first paragraph | The intro |
| The first picture | The round photo beside the intro |
| The paragraph after the picture | The photo's caption, e.g. Since 2019 run by and with disabled people. Keep the intro to one paragraph before the picture: the second paragraph of the header always becomes the caption. |
Sections and what they become
Each Heading 2 starts a section. A short italic line just before the heading becomes its small label (e.g. Our story). Ariade looks at what the section holds and picks one layout, in this order:
| If the section has… | It becomes | Example item |
|---|---|---|
| A bulleted list whose items each start with a bold number | Figure cards in a coloured panel, each with a round icon. The heading is kept for screen readers but not shown. | 120 products, each tried by disabled people |
| A numbered list whose items each start with bold words | Step cards in soft colours, with icons. Screen readers hear "Step 1", "Step 2"… | We listen. Customers tell us what is missing. |
| A bulleted list whose items each start with bold words | Promise cards with a tick | Plain language: no jargon, no pressure. |
| A paragraph that is only links | A call-to-action panel: the first link a dark button, the others outline buttons | Find a store Book a video call |
| One to three pictures | Round pictures beside the text | Pictures right after the heading, then your paragraphs |
| Anything else | Normal text |
Tip: every item in a list must start with bold words for the list to become cards. Make the bold with the editor's B button, then type the rest of the item after it. Sections take a light and a tinted background in turn by themselves.
Your own icons on figure cards
Figure cards get Ariade's icons (a tick, a pin, a person, a star). To use your own icon on a card:
- Upload a small square picture (PNG or SVG, about 64 × 64 pixels) in Storefront › Image Manager.
- In the page editor, click at the very start of the figure item, before the bold number.
- Insert the picture with the editor's picture button. It must be the first thing in the item.
Ariade puts the picture in the round icon circle and sizes it. It is hidden from screen readers, because the figure and its words already say everything, so you can leave its description empty. Items without a picture keep Ariade's icons.
Copy this sample
A short About page to start from. Paste it into Page Content, then format it as described under the box.
About us Shopping that works for every body We started our shop because finding the right aid meant guessing from tiny photos and pushy sales calls. So we built the shop we wanted. In numbers 120 products, each tried by disabled people 3 step-free stores 4.8 average review score out of 5 How we choose Three steps before anything goes on sale We listen. Customers and testers tell us what is missing. We test with real people. Every product is tried at home for two weeks. We stock what works. Only products that pass go on sale. What we promise What you can count on Plain language: no jargon, no pressure. Free returns, used or not: 30 days to try things at home. Come and see Try before you buy Visit a store, or book a free video call with our team. Find a store Book a video call
Then, in the editor:
- Italic: About us, How we choose, What we promise, Come and see.
- Heading 1: Shopping that works for every body. Heading 2: In numbers, Three steps…, What you can count on, Try before you buy.
- Bulleted list for the three figures and the two promises; numbered list for the three steps. In each item, make the first words bold: 120, We listen., Plain language: and so on.
- Links: link Find a store and Book a video call to your pages, leaving them alone on their line.
- Photo: insert a picture after the intro paragraph, with a description, and type a caption paragraph after it.
Colours and icons
- Panel background and accent colour: Storefront › Themes › Edit in Page Builder › Theme Styles › Ariade pages. The panel colour is behind the figure cards and the call-to-action panel (and the newsletter panels across the store); keep it light, because the text on it stays dark. The accent colours the icons and the small labels.
- Fonts and main colours: the store-wide Theme Styles settings apply here too.
- Icons: your own on figure cards, see above. Step and promise icons are Ariade's.
- Don't use the editor's colour and font-size buttons. Ariade's styles are tested for contrast and size.
Something doesn't look right?
The page looks like a normal text page
Check that Template Layout File is ariade-designed-page, and that sections start with Heading 2, not just bold text.
A list shows as a plain list, not cards
Every item must start with bold words. One item without bold keeps the whole list plain. For figure cards, the bold part must contain a number.
A section shows cards I didn't want
Ariade picks the first pattern it finds in the section (see the order). Remove the bold from the start of the items to keep a list plain.
The figure section has no heading on the page
That is on purpose: the cards speak for themselves. The heading is still there for screen readers and search engines.
A picture is broken
Pictures pasted from the clipboard are saved as broken files by BigCommerce. Upload the picture in Image Manager and insert it with the picture button.
Keep it accessible
- Give photos a description in the picture settings; leave it empty only for pictures that are pure decoration.
- Keep headings in order: one Heading 1 at the top, Heading 2 for sections.
- Use link words that make sense on their own: "Find a store", not "click here".
- Keep the bold lead-ins short. They are what people scan first.
Show your stores
Your store locator is one normal web page. You write each store as a heading and a few short lines in BigCommerce's page editor, and Ariade builds the rest: a search by city or ZIP code, filters for access features, "Use my location", directions, call buttons and an Open now / Closed badge for every store. No code, no apps, no map service to pay for.
What you get
- Search: customers type a city, area, street or ZIP code; the list shows the stores that match and says how many.
- Filters: one button for each access feature you list, such as Step-free or Hearing loop.
- Use my location: sorts the stores nearest first and shows the distance. It appears only when your stores have a map position, and it asks the customer's permission first.
- Open now / Closed: worked out from the store's opening hours in the store's own time zone, so it is right for customers anywhere. It also says when the store opens or closes next.
- Buttons: Directions (Google Maps, in a new window), Call (opens the phone app) and your own booking link.
Step by step
- In your BigCommerce control panel, go to Storefront › Web pages and click Create a Web Page.
- Leave the page type on the first option, Contain content created using the WYSIWYG editor. Never choose "raw HTML": that page type loses your store's header and footer.
- In Page Name, type the menu label, for example Stores.
- In Page Content, paste the sample below and change it to your stores. Make each store name a Heading 2 (select the line, then choose Heading 2 in the editor's "Paragraph" menu) and the big heading at the top a Heading 1.
- Under Advanced Options, set Template Layout File to ariade-store-locator.
- Click Save & Exit, then open the page on your store to check it.
Already have a Stores page? Open it, rewrite the content as in the sample and change its Template Layout File to ariade-store-locator. Its address and menu place stay the same.
Copy this sample
Paste it into Page Content, then change the words. Keep the words before each colon (Area:, Address: …) exactly as they are, in English. Delete any line you don't need.
Visit us Find a store Try products before you buy. Every store is step-free, with staff trained to help, and most have a hearing loop and a quiet room. New York Area: Brooklyn Address: 214 Atlantic Avenue, Brooklyn, NY 11201 Phone: (555) 010-0142 Hours: Mon to Sat 10 am to 7 pm, Sun 11 am to 5 pm Time zone: America/New_York Access: Step-free, Hearing loop, Quiet room, ASL staff Map position: 40.6880, -73.9900 Book: Book a visit Chicago Area: Wicker Park Address: 1520 N Milwaukee Avenue, Chicago, IL 60622 Phone: (555) 010-0175 Hours: Mon to Sat 10 am to 7 pm, Sun 11 am to 5 pm Time zone: America/Chicago Access: Step-free, Hearing loop, Parking Map position: 41.9088, -87.6776 Book: Book a visit
After pasting, format three things in the editor:
- Visit us: select it and click the I (italic) button. It becomes the small label above the heading.
- Find a store: Heading 1. New York and Chicago: Heading 2.
- The words Book a visit: select them and use the editor's link button to link them to your booking or contact page.
Tip: keep each store's lines together in one block by pressing Shift+Enter at the end of each line. Every line in that block must start with one of the labels below; a block with a normal sentence in it is shown as a note instead.
The top of the page
Everything before the first store (the first Heading 2):
| In the editor | On the store |
|---|---|
| A short line in italic | The small label above the heading |
| A line in Heading 1 | The big heading (without one, the page name is used) |
| The first paragraph | The intro under the heading |
| A picture | The map beside the store list (see The map picture) |
| The paragraph right after the picture | The caption under the map |
Distance unit: km or Distance unit: mi | The unit for "Use my location" distances. Without it: miles for US English, kilometres for every other language. |
The store lines
Each store starts with its name in Heading 2. All lines are optional and can come in any order.
| Line | What it does | Example | If you leave it out |
|---|---|---|---|
Area: | Shown after the store name; customers can search for it. | Brooklyn | Only the name shows. |
Address: | The address on the card, the search, and the Directions button. | 214 Atlantic Avenue, Brooklyn, NY 11201 | No address and no Directions button. |
Phone: | A Call button that opens the phone app. | (555) 010-0142 | No Call button. |
Hours: | Shown as you write them, and read for the Open now / Closed badge. Opening hours: works too. | Mon to Sat 10 am to 7 pm, Sun 11 am to 5 pm | No hours and no badge. |
Time zone: | The store's time zone, so the badge is right for customers anywhere. Find yours in the list of time zones (the "TZ identifier" column). | America/New_York · Europe/London | No badge (the hours still show). |
Access: | Access features, separated by commas. Each one becomes a filter button and is listed on the card. | Step-free, Hearing loop, Parking | No features on the card; the store shows only under "All". |
Map position: | Latitude and longitude, for "Use my location" and distances. In Google Maps, right-click the store and click the numbers at the top of the menu to copy them. | 40.6880, -73.9900 | No distance for this store. When no store has one, the button is hidden. |
Book: | A button with your own link: write the button words and link them. | Book a visit (linked) | No booking button. |
Anything else under a store
- A normal paragraph (for example "Free parking behind the store") appears as a note on that store's card.
- A paragraph with only links becomes extra buttons on the card, next to Directions and Call.
Opening hours that work
Write the days, then the times. Separate groups of days with a comma or a semicolon.
- Mon to Sat 10 am to 7 pm, Sun 11 am to 5 pm
- Mon-Fri 9:00 - 17:30; Sat 10 am to 4 pm; Sun closed
- Daily 9 am to 5 pm
- Mon, Wed, Fri 9:30 am to 6 pm
- Usual shop hours
- 10 to 7 (no days, no am or pm)
Days missing from the line count as closed. Day names can be in English (Mon, Monday) or in your store's language.
The map picture
The map is an ordinary picture, so there is no map service, no key and no cost. Customers who cannot see it lose nothing, because every store is in the list.
- Make a picture of a map with your stores marked and numbered in the same order as the list (1 = the first store on the page). A screenshot of a map with pins added works; use PNG or JPG, about 1200 pixels wide.
- Upload it in Storefront › Image Manager, or put it in the page with the editor's picture button, right after the intro.
- In the picture settings, write a description that names the stores and their numbers, for example Map of the United States with our stores: 1 New York; 2 Chicago; 3 Austin.
- Optional: add a short paragraph right after the picture as its caption.
Don't paste a picture from your clipboard into the editor. BigCommerce saves pasted pictures as broken files. Always upload the picture first.
Add, change or close a store
- Add a store: add a new Heading 2 with its lines. The store numbers, the "All" count and the filters update by themselves.
- Change hours: edit the
Hours:line and save. The badge follows the new hours straight away. - Holiday closing: add a note under the store, for example "Closed 25 and 26 December". The badge follows the weekly hours only.
- Close a store: delete its heading and lines. If it is on the map picture, update the picture too.
Something doesn't look right?
The page shows plain text, not store cards
Check that Template Layout File is ariade-store-locator and that each store name uses Heading 2 (not just bold).
A store's lines show as a note
Every line in the block must start with a label from the store lines, followed by a colon. Move any sentence to its own paragraph.
There is no Open now / Closed badge
The badge needs both a Hours: line in a style from Opening hours that work and a Time zone: line such as America/Chicago.
"Use my location" is missing
Add a Map position: line to your stores. The button only appears when at least one store has one.
The map is broken
The picture was probably pasted. Upload it in Image Manager and insert it again with the picture button.
Keep it accessible
- List the access features people need to plan a visit: step-free entrance, accessible toilet, hearing loop, quiet room, parking, staff who sign.
- Use the same words for the same feature at every store ("Hearing loop", not "Loop" at one and "Hearing loop" at another), so one filter finds them all.
- Give the map a description that names the stores, and keep the store numbers on the map in the same order as the list.
- Write the address in full, as people would type it into a map app.
Run events with booking
Your events live in normal web pages. One Events page lists them all, with a countdown to the next event, Upcoming and Past tabs, filters and a month calendar. Each event is its own page with the details, a booking form and "Add to calendar". You write everything in BigCommerce's page editor; Ariade lays it out. No code, no apps.
Part 1: the Events page (once)
- Go to Storefront › Web pages and click Create a Web Page. Keep the first page type (Contain content created using the WYSIWYG editor).
- In Page Name, type the menu label, for example Events.
- In Page Content, write the short text described below. No events go here: each event is its own page.
- Under Advanced Options, set Template Layout File to ariade-events-list.
- Click Save & Exit. The page says there are no upcoming events until you add your first event.
Ariade builds the rest from your event pages:
- Next event ticket in the header, with a live countdown.
- Upcoming and Past tabs. Events move to Past by themselves after their day.
- Filters from the events' Format, Price, City and Access lines. Four show first; the others are under "+ More".
- Event cards by month: date badge, labels, time, place, access features, seats left and the event's button.
- A month calendar with the event days linked, and an event alerts form that adds people to your store newsletter.
What to write on the Events page
Events Learn with us, in store and online Free workshops, product fairs and online sessions. Every event is step-free, captioned or interpreted, and has a quiet space. Filters shown first: In person, Online, Free, New York Run a group or school? We bring products and a trainer to you, free for groups of ten or more. Request a visit
| In the editor | On the store |
|---|---|
| Events in italic | The small label above the heading |
| Learn with us… in Heading 1 | The big heading (without one, the page name is used) |
| The first paragraph | The intro |
Filters shown first: and filter words, separated by commas | The filters shown before "+ More", in your order. Use the same words as in your events. Leave the line out to let Ariade choose. |
| A Heading 2 with text and links under it (optional) | A box beside the events, e.g. Run a group or school? Link Request a visit to your contact page. |
Part 2: add an event
Each event is one web page under your Events page.
Step by step
First: your store needs the Events page from Part 1. Every event goes under it.
- In your BigCommerce control panel, go to Storefront › Web pages and click Create a Web Page.
- Leave the page type on the first option, Contain content created using the WYSIWYG editor. Never choose "raw HTML": that page type loses your store's header and footer.
- In Page Name, type the event's name, for example VoiceOver on iPhone, step by step. It becomes the big heading.
- In Page Content, paste the sample below and change the words to your event.
- Under Navigation Menu Options, untick "show this web page on the navigation menu" and choose Events as the Parent Page. This is what puts the event on your Events page.
- Under Advanced Options, set Template Layout File to ariade-event-page.
- Click Save & Exit, then open the page on your store to check it.
Copy this sample
Paste it into Page Content, then change the words. Keep the words before each colon (Date:, Time: …) exactly as they are, in English. Delete any line you don't need.
Date: 20 November 2026 Time: 7 to 8 pm ET Time zone: America/New_York Place: Online, live captions Format: Online Price: Free Status: Open Access: Captioned Booking options: ASL interpreter, Wheelchair space Booking note: Bring a carer free Button: Register One hour online: turn VoiceOver on, learn the main gestures and use your favourite apps with confidence. Follow along on your own iPhone. Live captions throughout, and a captioned recording afterwards.
Tip: to keep the detail lines together, press Shift+Enter at the end of each line. Pressing Enter works too.
The detail lines
All lines are optional and can come in any order, but they must be the first thing in the page content.
| Line | What it does | Example | If you leave it out |
|---|---|---|---|
Date: | The day: date badge, calendar day, countdown, Upcoming or Past. | 20 November 2026 | The event shows, but not in the calendar or countdown. |
Time: | Start and end, shown as you write them. The length ("1 hour") is worked out. | 7 to 8 pm ET | Treated as an all-day event. |
Time zone: | Makes "Add to calendar" and the countdown right for visitors anywhere. | America/New_York | Times follow each visitor's own clock. |
Place: | Where. Lines after it are the address. | Brooklyn store, Atlantic Ave | No "Where" card. |
City: | A filter on the Events page. | New York | No city filter for this event. |
Format: | The coloured label and a filter. | In person · Online | No label. |
Price: | Shown on the card, the label and the booking card. | Free · Ticket $5 | No price shown. |
Seats: | Places left, with a bar when you give the total. | 12 · 12 of 20 · Sold out | No seats card. |
Status: | Your own short status instead of seats. | Open · Waitlist | Seats are shown instead. |
Access: | Access features on the event card, separated by commas. | Captioned, Hearing loop | No "Access:" line on the card. |
Booking options: | Tick boxes in the booking form. | ASL interpreter, Wheelchair space | No tick boxes. |
Seats per booking: | Highest number in the seat picker. | 4 | Up to 6. |
Booking note: | A short note next to the seat picker. | Bring a carer free | No note. |
Button: | The words on the event's button. | Register · Get ticket | "Book a seat" ("Join waitlist" when sold out). |
Book: | A link to booking elsewhere (e.g. a ticket site). Replaces the booking form. | a link with the words "Get tickets" | Ariade's booking form is used; requests reach you by email. |
Dates and times that work
Dates
- 20 November 2026
- November 20, 2026
- 20 Nov 2026
- 2026-11-20
- 20/11/2026 (could be read two ways)
- next Friday
Times
- 7 to 8 pm
- 11 am to 1 pm
- 19:00 - 20:00
- 7 to 7:45 pm ET
- evening
- 7-8 (no am or pm)
Sections below the details
Start each section with a heading in the editor's Heading 2 style (the "Paragraph" menu). The heading words are yours; Ariade looks at what follows the heading.
| In the editor | On the store |
|---|---|
| A bulleted list e.g. under "What you will learn" | Tick cards in two columns |
A numbered list whose items start with a bold time11:00 am Welcome and tea: Meet the trainer. | A timeline: time, title (before the colon) and description |
A bulleted list whose items start with a bold titleHearing loop: Fitted in the room. | Feature cards with ticks |
One paragraph that starts with a bold nameAnil R. NVDA user for twelve years… | A host card with initials |
| A paragraph with only links e.g. "Open in Google Maps" | Buttons (links to other sites say they open a new window) |
| Anything else | Normal text |
Change, hide or remove an event
- Change it: edit the lines or text and save. The event page, its card and the calendar update together.
- Sold out: change
Seats:toSold out(or0). The button becomes "Join waitlist". - After the day: nothing to do. It moves to "Past" by itself.
- Take it off the Events page: set its Parent Page to "No parent page" and save. The event page itself still works for anyone who has its link.
- Remove it for good: delete the page in Storefront › Web pages. This cannot be undone.
Something doesn't look right?
The event has no calendar day or countdown
Check the Date: line uses a style from Dates that work, and that it is in the first lines of the page.
The detail lines show as text on the page
They must be the very first thing in Page Content, each starting with its label and a colon. A sentence above them stops Ariade from reading them.
A section shows as plain text, not cards
Make sure the heading uses Heading 2 (not just bold) and the list was made with the list buttons. For timelines and feature cards, the first words of each item must be bold.
The event is not on the Events page
Set Parent Page to your Events page and save. An event without a readable Date: line is listed last under Upcoming; check the line uses a style from Dates that work.
The Events page says there are no upcoming events
Check that your events have this page as their Parent Page and that their dates are in the future. Past events are under the "Past" tab.
Booking requests don't arrive
They are sent with your store's contact form. Check that your Contact page exists and is linked in Theme Styles › Ariade footer, and check your spam folder.
Keep your events accessible
- Write the accessibility features people need to plan their visit: step-free access, toilets, hearing loop, quiet space, captions, interpreters.
- For online events, say whether there are live captions and a recording, and which video platform you use.
- Give every picture a description (alt text) in the editor's picture settings, or leave it empty only if it is decoration.
- Use link words that make sense on their own: "Open in Google Maps", not "click here".
- Don't use the editor's colour and font-size buttons: Ariade's styles are tested for contrast.
Add an accessible product video
BigCommerce's own product Videos field only takes YouTube links. Ariade can also play your own MP4 file, hosted in your store, in the browser's own video player: captions on from the start, a transcript under the video and a link to the product's audio description. Nothing plays until the customer starts it, and every control works with a keyboard. You set it up with two product fields and two headings in the description. No code, no apps.
What you get
- The player: under the product pictures, with the label "Product video:" and the product name. It never starts by itself.
- Captions: shown from the start. Customers can turn them off in the player.
- Read the video transcript: a panel that opens and closes, with everything that is said and shown in the video.
- Audio description of this product: a link that opens the product's audio description and moves the reader there.
Prepare your files
For each product you need:
- The video as an MP4 file. Keep it short and under 50 MB so it starts quickly. A square video fits best next to square product pictures; other shapes are shown whole, with a dark band around them.
- The captions as a WebVTT file (
.vtt). Most video editors and caption services can save this format. Check the captions against what is said. - The transcript: everything that is said, plus what is shown on screen that matters (for example "On screen: the product from the side").
Use short file names with small letters and dashes and no spaces, for example clarity-hearing-amplifier.mp4 and clarity-hearing-amplifier.vtt.
Upload the files to your store
The files go into your store's own file storage, which BigCommerce calls WebDAV. You need a free WebDAV app; we recommend WinSCP (winscp.net) on Windows.
- In your BigCommerce control panel, go to Settings › File Access (WebDAV). Keep this page open: it shows your WebDAV path, user name and password.
- Open WinSCP. In the Login window choose File protocol: WebDAV, Encryption: TLS/SSL Implicit encryption, port 443, and type your store's host name (the WebDAV path without
https://and/dav), user name and password. - Click Advanced… › Directories and set Remote directory to
/dav/content. Then click Login. - On the right (your store), create a folder
product-videosand open it. - Drag the MP4 and the VTT file from the left (your computer) to the right.
Use WinSCP, not Cyberduck or Windows' "Add a network location". In our tests both refused or silently dropped the MP4 files, while the small caption files went through.
Your file's address in the store is /content/product-videos/ followed by its name. Open https://your-store-address/content/product-videos/clarity-hearing-amplifier.mp4 in a browser to check that it plays.
Add the video to the product
- Go to Products › All products and open the product.
- Scroll to Custom Fields and click + Add Custom Fields.
- Custom Field Name Video, Custom Field Value: the address of the MP4, for example
/content/product-videos/clarity-hearing-amplifier.mp4. - Add one more: Custom Field Name Video captions, Custom Field Value: the address of the VTT file.
- Click Save.
These two fields are not shown in the product's Specifications; the theme uses them for the player only.
Transcript and audio description
Both are written in the product's normal Description, each under its own heading, so you can change them like any other text.
- Video transcript: add a Heading 3 with the words Video transcript at the end of the description and put the transcript below it. Ariade moves this part into the "Read the video transcript" panel under the video.
- Audio description: add a Heading 3 Audio description with a description of what the product looks like. Ariade adds the "Audio description of this product" link under the video.
Write the headings exactly like this: Video transcript and Audio description. If your store shows another language, the words in that language work too, for example Transcription de la vidéo and Audiodescription in French.
Something doesn't look right?
There is no video on the product page.
Check the custom field name is exactly Video and that its address opens the video in a browser. Addresses start with /content/.
The video plays but has no captions.
Check the Video captions field and open its address in a browser: the file must start with the word WEBVTT.
The transcript panel or the audio description link is missing.
The heading in the description must read exactly Video transcript or Audio description, and be a heading (Heading 3), not bold text.
Keep it accessible
- Every video with speech needs captions, and the transcript should say everything the video says and shows (WCAG 1.2.2, 1.2.3).
- If the video shows something important that is not said, describe it in the transcript or the audio description.
- Do not add music that plays over the speech, and keep flashing below three times a second.
Let customers order several options at once
For products with options, such as colours and pack sizes, BigCommerce lets a customer add one option at a time. Ariade's Bulk order template shows every option in one table with its own quantity box, adds them all to the cart with one button, and shows the running total as the customer types. It suits bulk and business buyers, and anyone who finds choosing options one by one tiring. You switch it on per product, with one setting.
What you get
- One row per option with its price and a quantity box. Options that cannot be bought say "Sold out".
- Running total: "12 items, $201.60", updated as the customer types.
- Add to cart: adds every row with a quantity in one go. The cart count in the header updates and the page says "Added 12 items to the cart."
- The table takes the place of the option buttons and the normal Add to cart button on this product.
Step by step
- Go to Products › All products and open the product. It needs at least two options (variants).
- Scroll to Storefront Details.
- Set Template Layout File to ariade-bulk-order.
- Click Save, then open the product on your store to check it.
Prices and stock
The table shows each option's own price and stock from BigCommerce, so set them as usual in Variations:
- Price: give an option its own price when it costs more, for example a bigger pack.
- Stock: an option with no stock shows "Sold out" and has no quantity box. To keep taking orders when stock reaches 0, turn off stock tracking for the product (Inventory) or allow backorders.
Something doesn't look right?
The product still shows the option buttons.
Check Template Layout File is ariade-bulk-order and the product has two or more options. With only one option the normal Add to cart is simpler, so the table is not shown.
An option shows "Sold out".
Its stock is 0 and stock is tracked. Add stock, or see Prices and stock.
Accessibility, built in
- A real table with column and row headings, so screen readers say the option name with each price and quantity box.
- Every quantity box has its own label ("Quantity, Clear / 120 dots") and is large enough to tap.
- The total and the "Added to the cart" message are announced to screen readers; an empty order explains what to do and moves to the first quantity box.
- If JavaScript is off, the normal option buttons and Add to cart stay, so the product can always be bought.
05 Built-in features (no apps needed)
Filters that keep your place
Filter values are links, so they work without JavaScript. With it, the list updates in place, focus stays on the value you chose, and the new number of products is read out. Sort and price change only when you press Apply.
"Helps with" lines
One product custom field shows who a product helps, on cards and on the product page, with an icon for each value.
Spoken updates
Adding to the cart, changing a quantity, filtering and search suggestions are announced politely, so screen reader users hear what changed.
Forms that explain errors
Every error is written next to its field and linked to it, focus goes to the first field to fix, and password fields have a Show password button.
Listen, Print and Share
Blog posts can be read aloud by the browser's own voice (with Pause and Stop), printed without menus, and shared by email, Facebook, X, LinkedIn or a copied link.
"On this page" lists
Pages and posts with several sub-headings get a list of links to them, and wide tables scroll in their own box.
Store locator
Search, filters, nearest first and Open now badges, without any app.
Events with booking
Tabs, calendar, countdown, topic filters and a booking form that reaches you by email.
Checkout in your style
BigCommerce's checkout uses the theme's fonts and colours.
20 languages
Ariade's own texts come in English, Danish, Dutch, French, German, Italian, Japanese, Norwegian, Polish, Portuguese (two), Spanish (eight) and Swedish.
06 Keeping your store accessible
Ariade handles structure, keyboard use and contrast. Your content matters too:
Image descriptions
Write a description for every product picture (Products > edit > Images > Description). Describe what matters to a shopper. BigCommerce has no description for a blog post's picture, so Ariade treats it as decoration: say anything important in the post's text.
Headings
Use headings in order in product descriptions and pages (Heading 2, then Heading 3). Do not use bold text instead of headings.
Link text
Write links that make sense on their own, such as "Read the size guide", not "click here".
Videos
Add captions, and an audio description or transcript for videos that show important information.
Colours
Keep text and button colours at AA contrast if you change them.
Accessibility statement
Keep your statement page up to date, including known limits and other ways to order.
07 Frequently asked questions
Is Ariade really WCAG 2.2 AA compliant?
The theme code is built and tested to WCAG 2.2 AA with automated tools (axe), keyboard-only use, screen readers and 400% zoom, on every page type at desktop and phone size. Your store as a whole also depends on your content (images, videos, widgets, apps) and on pages hosted by BigCommerce such as checkout. See Keeping your store accessible.
Do I need apps for filters, reviews or a store locator?
No. Filters use BigCommerce's own Product Filtering, reviews are BigCommerce's own, and the store locator and events are built into the theme.
Why can't the theme change the layout of the checkout?
BigCommerce hosts the checkout for security. Ariade gives it your fonts, colours and focus outline through the Checkout page settings, but its layout is set by BigCommerce.
Can blog posts have comments?
BigCommerce blogs have no comments of their own. You can add a comments service yourself, but its frame is outside the theme and outside Ariade's accessibility testing.
Does it work in other languages?
Yes. Ariade's own texts are included in 20 languages and follow the store's language. Your own content (products, pages, posts) is translated in BigCommerce.
How do I update the theme?
When a new version is released, BigCommerce shows it in Storefront > Themes. Updating adds the new version with your settings; check it, then apply it.
Can I edit the code?
You can (Themes > Advanced > Edit theme files), but changes to code are not covered by support and may affect accessibility. Always work on a copy. For custom changes we suggest hiring a BigCommerce partner.
08 Support policy
How to reach us
Use the Ariade support form. Include your store URL and a description of the problem. You can attach a screenshot to the form.
Response time
We reply within 2 working days. Support hours are Monday to Saturday, 9 am to 9 pm India Standard Time (IST, UTC+5:30).
What is covered
Help with theme settings and page layouts, bugs in the theme's own code, and accessibility questions about the theme.
Not covered
Custom code changes, problems caused by edited theme code, third-party apps and widgets, and pages hosted by BigCommerce (checkout).
Accessibility issues
A WCAG failure in the theme's own code is treated as a bug and fixed in a free update.
Updates
Bug fixes and BigCommerce platform updates are free for the life of the theme.