Accessibility and performance

Loco is built so that customers can shop with a keyboard, a screen reader or a slow phone connection. Most of the work is done by the theme. Some of it depends on your content.

What the theme does

Every menu, drawer, filter and dialog works with a keyboard, and the focused element is always outlined.
Drawers and dialogs keep the keyboard inside them while open, and return it to the button that opened them.
Cart updates, filter results and form errors are announced to screen readers.
Slideshows and announcements don't rotate on their own unless you turn on Auto-rotate slides or Auto-rotate announcements. When they rotate, customers can pause them.
A background video can always be paused.
When a customer's device asks for reduced motion, Loco keeps only short fades and color changes.
The first image on a page loads first. Images further down load as customers scroll.

Alt text for images

Alt text describes an image for customers who can't see it, and helps search engines.

Product images: in Products, open a product, click an image and add alt text.
Images in sections: images you choose in the theme editor are stored in Content > Files. Open the file there and add alt text.

Describe what the image shows in a short sentence, for example “Walnut desk speaker, front view”. Leave out “image of”. A purely decorative image can stay without alt text.

Captions for videos

In the Video section, add a Captions URL to a video you uploaded:

Create a captions file in WebVTT format (.vtt).
Upload it in Content > Files and copy its link.
Paste the link into Captions URL.

The setting appears when the section plays a video you uploaded and Play in background without sound is off. A background video plays without sound, so it shouldn't carry information that customers need to hear.

Headings

Each page has one main heading, and Loco sets it for you: the product name, the collection name, the page title. In rich text fields, start with Heading 2 and go down in order. Don't skip levels for looks, and don't add another Heading 1.

Colors

Text needs enough contrast against its background, at least 4.5:1. The Text, Panel text and Button label colors in each color scheme carry this note.

When a pair in a color scheme falls below that, the theme editor shows a line above each section that uses the scheme: “Text in this color scheme may be hard to read. Choose colors with more contrast.” Customers never see this line. The theme still uses the colors you chose, so fix them in Theme settings > Colors. See Color schemes.

Don't put text inside images. Customers can't zoom it, translate it or read it aloud. Use the section's Heading and Text instead.

Motion

Reveal sections on scroll in Theme settings > Animations brings sections into view with a short fade or slide as customers scroll. Turn it off if you prefer a still page. Customers who ask their device for reduced motion don't see the effect either way.

Images and speed

Shopify resizes your images for each screen, so customers download a smaller copy on a phone. Still:

Upload images at the size shown under the image setting, such as “2000 x 1200px recommended”. Much larger files don't look sharper. They only take longer to upload and process.
Use .jpg for photos. Use .png only when you need a transparent background, such as product cut-outs in slides and promo banners with the Loco preset.
Crop large empty areas before you upload.

Sections and apps

Each section adds content to load. The home pages of the presets use 8 to 10 sections. Start from there and remove sections you don't fill, instead of leaving them with placeholder images.

Apps often add their own scripts to every page. When your store feels slow, check Online Store > Themes > Customize > App embeds and turn off the ones you no longer use.

Fonts

Every font and weight you choose is one more file to download. Loco loads the body font and the font of the first screen first. Pick fonts from the Shopify font library in Theme settings > Typography. See Typography.