Features
Performance and accessibility
Unoque loads images at the size each screen needs, loads videos only when they're played, and supports keyboards, screen readers and reduced motion. The content you add matters just as much. This page covers what you can do.
Image sizes
Shopify creates smaller versions of every image you upload, and Unoque picks the right one for each screen. Upload images at least as large as these sizes, so they look sharp on large screens:
| Where | Recommended size |
|---|---|
| Slideshow slide | 2400 x 1200px, plus an 1100 x 1400px mobile image if needed |
| Image banner | 2400 x 1000px |
| Image with text | 1200 x 1200px |
| Before and after | 1200 x 1200px, the same size for both images |
| Video cover image | 1920 x 1080px |
| Password page image | 1200 x 1600px |
| Mega menu and mobile menu promotions | 4:3 aspect ratio |
| Product images | 2048 x 2048px, the same shape for all products |
| Logo | .svg or transparent .png |
| Favicon | 48 x 48px .png |
Tips:
- Save photos as .jpg or .webp, and graphics or logos as .svg or .png.
- Compress large photos before you upload them. Files over a few megabytes slow down uploads but rarely look better.
- Use the same aspect ratio for all product images, and set Image ratio in Product cards to Square or Portrait so rows line up.
- Keep text out of images. Text in sections is sharper, translatable and readable by search engines and screen readers.
Keep apps lean
Apps often add code to every page of your store, even pages where you don't use them.
- Remove apps you no longer use. Some apps leave code in your theme after you uninstall them. Ask the app's developer how to remove it.
- Turn off app embeds you don't need, under App embeds in the theme editor sidebar.
- Prefer apps that use app blocks. You can place, move and remove app blocks in the theme editor without editing code.
- Before you install an app, check whether Unoque already does what you need. For example, Unoque includes a cart drawer with a free shipping bar, quick add, a before and after section and a comparison table.
Other ways to keep pages light
- Use fewer sections at the top of the home page. The first screen loads first.
- Use one slideshow per page, and keep it to a few slides.
- Leave Autoplay videos and Autoplay muted when in view off unless video is central to the page. Videos then load only when customers play them.
- Fonts marked as system fonts in the font picker don't need to download.
Accessible colors
Text needs enough contrast with its background for everyone to read it, including customers with low vision and customers reading a phone outdoors.
- Body text should have a contrast ratio of at least 4.5:1 with its background.
- Large headings, icons and button borders should have a contrast ratio of at least 3:1.
Check each color scheme you use with a contrast checker, especially after you change colors. In each scheme, check:
- Text and Subdued text on Background.
- Solid button text on Solid button background.
- Outline button and links on Background.
- Accent on Background, because benefit chips and star ratings use it.
Sale badges and the cart count bubble show text on the Accent color. Unoque picks that text color for you: white when it's readable, otherwise the scheme's Background, Text or black, whichever stands out most from the accent.
For text over images, such as in Slideshow and Image banner, raise Image overlay opacity, or turn on Show content in a card.
Don't use color alone to show meaning. For example, if you mark a sale with red, keep the sale badge text too.
Alt text
Alt text describes an image for customers who use screen readers, and for search engines.
- Product images: in your Shopify admin, open a product, select an image, and add alt text.
- Images in sections: in the theme editor, select the image, then select Edit in the image picker to add alt text. You can also edit alt text in Content > Files.
- Logos: describe the brand, for example "Acme logo". In the Logo list section, the Name setting is used as the alt text when an image has none.
- Videos: fill in Video alt text in the Video section.
- Slideshows and scrolling text: fill in Slideshow description and Description for screen readers.
Write what the image shows, in a short sentence: "Amber serum bottle with a dropper on a stone tray". Leave out "Image of". Decorative images can have empty alt text.
Motion
- Customers who turn on reduced motion on their device don't see the scroll reveal animation, the scrolling text movement or the logo list movement.
- You can turn off Reveal sections on scroll and Enable hover effects for everyone in Animations.
- Slideshows that rotate on their own have a pause button.
What Unoque does for accessibility
- A Skip to content link for keyboard users.
- Visible focus outlines on links, buttons and form fields.
- Menus, drawers, the search window and the quick view work with a keyboard. Esc closes them.
- Form fields have labels, and error messages are announced to screen readers.
- Buttons and links are large enough to tap on a phone.
Accessibility also depends on your content and apps. Test your store with a keyboard: press Tab to move through each page, and check that you can reach and use everything.
Updated 2026-10-24