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
- Add Ariade from the BigCommerce Theme Marketplace (Storefront > Themes Marketplace), or upload the theme file in Storefront > Themes > Upload theme.
- Apply it, make a copy (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.
- Enter your phone, email, opening hours and the link to your sign language page in Theme Styles > Ariade header > Store contact. They appear in the top bar, the footer and the cart, so customers can always reach a person.
- 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-stores,ariade-eventsand, for each event,ariade-event(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.
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 line under the blog title. Posts get their reading time, Listen, Print and Share by themselves.
Demo Journal
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 first, pages of seven posts. Each post shows its reading time, Listen (read aloud), Print and Share, an "On this page" list for posts with sub-headings, topics and three related posts.
Demo Journal
Web pages
Normal pages show an "On this page" list made from their headings, and wide tables scroll sideways in a box you can reach with the keyboard. Contact pages use BigCommerce's contact form with clear errors.
Demo FAQ
Store locator (ariade-stores)
Create a web page and choose ariade-stores as its Template Layout File. The page content holds your stores; Ariade adds the search by city or ZIP code, feature filters, "Use my location" and an Open now / Closed badge worked out in each store's time zone. Start from the demo page's content.
Demo Stores
Events (ariade-events, ariade-event)
An events list page (ariade-events) with Upcoming and Past tabs, a month calendar, a countdown to the next event and topic filters, and one page per event (ariade-event) with facts, agenda, 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.
Demo Events
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
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.