Ariade is an accessible Shopify theme built to WCAG 2.2 AA. This guide explains how to set up every part of the theme in the Shopify theme editor. It is written for store owners; no coding is needed.
Before you start: duplicate your theme. In Shopify admin go to Online Store > Themes, open the menu (…) next to Ariade and choose Duplicate. Make changes on the copy, preview them, then publish. If something goes wrong you can switch back in one click.
1. Install and first steps
- Add Ariade from the Shopify Theme Store: Online Store > Themes > Add theme.
- Duplicate it (see above) and click Customize on the copy.
- Upload your logo in Theme settings > Logo and favicon. Also upload a white or light logo for the dark footer in the Footer section.
- Enter your phone, email and opening hours in Theme settings > Contact. They appear in the top bar, the footer and the cart, so customers can always reach a person.
- Create the menus the theme uses (Content > Menus): main-menu (header), footer (footer columns), and optionally shop-by-need, used to order the "Helps with" tags.
- Create these pages (Online Store > Pages) and pick the matching template in the page's Theme template box: Contact (
contact), Accessibility statement (accessibility), Wishlist (wishlist), Store locator (stores), About (about) and My account (account). - In Theme settings > Accessibility, link your contact page, sign language page and accessibility statement.
2. Theme settings
Open Customize > Theme settings (the gear icon).
- Logo and favicon
- Logo, logo width and the small browser-tab icon.
- Colors
- Six colors in pairs: page background, text and links; card background; button background and button text. The defaults pass WCAG 2.2 AA. While you edit, a warning appears in the preview if any pair falls below AA (4.5 to 1 for text, 3 to 1 for button and field outlines). Only you see this warning, never your customers. Fix every warning before you publish.
- Typography
- Heading and body fonts from Shopify's font library. Choose fonts with clear letter shapes; avoid thin or decorative fonts for body text.
- Contact
- Phone, email and opening hours, plus links to your contact and sign language call pages.
- Accessibility
- Shows or hides the Accessibility settings button (AA) in the header. Customers can turn on larger text, a dyslexia-friendly font, reduced motion, high contrast and paused videos. Choices are saved on their device. Also links your accessibility statement.
- Product cards
- Show star ratings, "Helps with" tags and the quick Add to cart button on product cards.
- Cart
- Cart drawer or cart page, the free shipping goal shown as a progress bar, and order notes.
- Journal
- Blog tags to treat as categories (Shopify blogs have no categories). They are shown first and highlighted on cards and articles.
- Social media
- Links for Facebook, Instagram, YouTube, TikTok, X, Pinterest, Threads, LinkedIn and WhatsApp. Leave a field empty to hide that icon.
3. Sections
Add sections with Add section in the editor. Every section is keyboard accessible and announces changes to screen readers; you only need to fill in the content.
| Section | How to set it up |
|---|---|
| Top bar | Short message, optional sale end date (a fixed "ends in" time, never a ticking countdown), and Call, Email and Sign language links from Theme settings. |
| Header | Choose the main menu. Items with sub-items open accessible drop-down menus. Search, accessibility settings, wishlist, account and cart are built in. |
| Hero with video | Heading, text, two buttons and an image or a short muted video. The video has a visible Pause button and never plays when customers ask for reduced motion. |
| Benefits strip | Up to four short promises with icons, for example free shipping or 30-day returns. |
| Collection tiles | Choose collections, for example by need (See better, Hear better). Each tile shows an image and a short description. |
| Featured products | Choose a collection and how many products to show. |
| Featured product | Choose one product. Blocks: kicker, title, price, description, variant picker, buy buttons, link to the product page, and app blocks. |
| Collection guide | Helps customers choose inside a collection, with tiles that link to searches or collections. |
| Image with text | Image, heading, text and button. Always write a description for the image. |
| Image with steps | An image with numbered steps, for example how you test products. |
| Testimonials | Customer quotes with name and detail. |
| Rich text | Heading, text and button, left or center aligned. |
| Call to action panel | A highlighted panel with heading, text and up to two buttons. |
| Help rows | Rows of help topics with icons and links, for the contact and help pages. |
| Newsletter | Email sign-up with a clear label and a success message. |
| Events teaser, Upcoming events | Show upcoming workshops and webinars from your Events blog. |
| Related articles | Latest or related posts from a blog. |
| About header, About story, Promises, Steps, About in numbers | Sections for an About page: story, values, process and key figures. |
| Store locator | Stores as blocks with address, time zone and opening hours. |
| Product reviews, Questions and answers | On product pages. Reviews come from the Customer review entries (see Built-in features); questions are blocks you write. |
| Product recommendations, Recently viewed | Related and complementary products from Shopify, and the customer's recently viewed products. |
| Theme showcase | Optional demo section that presents theme features. Remove it from your home page if you do not need it. |
| Custom Liquid | Paste app snippets or other Liquid code. Give any embedded iframe a title and keep headings in order. |
| Apps | A place for app blocks on any page. |
| Footer | Help panel with photo and buttons, newsletter, menu columns, payment icons, white footer logo, social icons, and the Follow on Shop button (shown when Shop Pay is on). |
4. Page templates
- Product
- Blocks you can reorder: breadcrumbs, "Helps with" tags, title, vendor and SKU, rating, price with savings, tax note with Shop Pay Installments, variant picker (color swatches and option pills), stock and pickup, buy buttons, trust list, description and accordions, and app blocks. Below it: reviews, questions and answers, recommendations and recently viewed products.
- Collection
- Filters and sorting come from Shopify's free Search & Discovery app (by Shopify). On phones filters open in an accessible dialog.
- Search
- Tabs for All, Products, Guides and Pages, with the same filters on the Products tab, and suggestions when nothing is found.
- Cart
- Quantity steppers, Save for later, order note, "Make it easier to use" delivery options, free shipping progress and unit prices.
- Blog, article and events
- Reading time, table of contents, Listen, Print and Share, categories and tags, and accessible comment forms. Use a blog named Events with the
eventstemplate for workshops and webinars. - Contact, About, Accessibility statement, Store locator, Wishlist, My account, 404, Password, Gift card
- Each has its own template and editable sections. The Accessibility statement template includes a known-limits table and a "Tell us about a barrier" form.
5. Built-in features (no apps needed)
"Helps with" filter
Create a product metafield custom.helps_with (list of single line text) and add values such as Low vision or Arthritis. Then add it as a filter in Search & Discovery.
Product reviews
Reviews are entries of the Customer review type in Content > Metaobjects (name, rating, title, review, date, verified buyer, helped with). Link them to a product in its Reviews field. Set the product's standard Rating and Rating count fields so stars appear on product cards. Review apps can still add their own blocks to the Reviews section.
Wishlist
Customers save products with the heart button. The Wishlist page shows the date added, price drops since saving, and a Share list link. Lists are kept on the customer's device.
Email me when it is back
Sold-out products show a form that sends the request to your contact form inbox with the product name and link. Add a product metafield custom.restock_date (date) to show "Back in stock around [date]".
My account page
With Shopify's customer accounts, create a page using the account template and add it as the first item of the menu customer-account-main-menu. Signed-in customers see their orders, order details, addresses and access settings in your theme's design. Sign-in and editing of the profile and addresses stay on Shopify's secure pages, which use your colors and fonts from Settings > Checkout > Customize.
Store locator
Add stores as blocks with address, time zone and opening hours. "Open now" and "Opens tomorrow" are worked out in each store's own time zone.
6. Keeping your store accessible
Ariade handles structure, keyboard use and contrast. Your content matters too:
- Image descriptions: write alt text for every product and section image (Products > image > Add alt text). Describe what matters for a shopper. Leave it empty only for purely decorative images.
- 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.
- Colors: fix every warning the theme editor shows before you publish.
- Accessibility statement: keep your statement page up to date, including known limits and other ways to order.
7. 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, WAVE, Lighthouse), keyboard-only use, screen readers and 400% zoom. Your store as a whole also depends on your content (images, videos, apps) and on pages hosted by Shopify such as checkout. See Keeping your store accessible.
Do I need apps for reviews, wishlist or filters?
No. Reviews, wishlist and back-in-stock requests are built in. Filters use Search & Discovery, a free app made by Shopify.
Why can't the theme change the look of the sign-in and checkout pages?
Shopify hosts these pages for security. The theme brands them with your colors, fonts and logo through Shopify's checkout settings, but their layout is set by Shopify.
Can I change the colors?
Yes, in Theme settings > Colors. The editor warns you if a color pair falls below the contrast customers need.
Does it work in other languages?
Yes. All theme text is translatable, and English and French are included. Add languages in Settings > Languages and translate with Shopify's Translate & Adapt app.
How do I update the theme?
When a new version is released, Shopify shows an update notice in Online Store > Themes. Updating adds a new copy with your settings; check it, then publish.
Can I edit the code?
You can, but changes to code are not covered by support and may affect accessibility. Always work on a duplicate.
8. Support policy
- How to reach us: use the Ariade support form. Include your store URL and a description of the problem. To send screenshots, reply to the confirmation email you receive.
- 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 sections, 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 pages hosted by Shopify (checkout, sign-in, accounts).
- 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 Shopify platform updates are free for the life of the theme.
9. Release notes
Version 0.2.0 (October 2026)
- All page templates, including a designed My account page for Shopify customer accounts.
- Built-in reviews, wishlist and back-in-stock requests.
- Color settings with a contrast check in the theme editor.
- Custom Liquid and Featured product sections, Follow on Shop, filters on search, unit prices in the cart.
