Auros documentation

Install & activate

After purchasing Auros, add it to your store and activate it:

1. In your Shopify admin go to Online Store → Themes.
2. Add Auros to your theme library (from the Theme Store, or via Add theme → Upload zip file if you received a package).
3. Click Customize to open the theme editor and preview your store with Auros.
4. When you’re happy, click Publish to make Auros your live theme.

Presets — Warm & Bold

Auros ships with two complete style presets. A preset sets the colors, typography and shapes in one click; you can fine-tune everything afterwards.

To switch preset: in the theme editor open Theme settings (the gear icon at the bottom of the left panel) → scroll to the bottom → Theme styles / presets → choose Auros Warm or Auros Bold.

Using the theme editor

Two areas control your storefront:

• Sections (top of the left panel) — the content blocks of the page you’re viewing. Add, reorder (drag), hide, or remove them, and open each to edit its settings and blocks.
• Theme settings (gear icon, bottom) — global settings that affect the whole store: colors, typography, layout, buttons, product cards, social links, and more.

Use the device switcher (top bar) to preview desktop, tablet and mobile.

Colors & color schemes

Auros uses Shopify color schemes. Instead of recoloring every section by hand, you define a few schemes once in Theme settings → Colors, then assign a scheme to any section from that section’s Color scheme setting.

Each scheme controls: background, text, accent (links, sale prices, highlights), button, button text, and border. Add as many schemes as you like and mix them across the page for rhythm.

Typography

In Theme settings → Typography you can set:

Layout & shapes

Under Theme settings → Layout and Shapes you control the structural feel:

Buttons & product cards

Buttons (Theme settings → Buttons): choose solid or outline style and optional uppercase labels.

Product cards (Theme settings → Product card) control how products appear in every grid:

Animations

In Theme settings → Animations you can enable reveal on scroll and hover media effects. All motion automatically respects the visitor’s “reduce motion” system preference for accessibility.

Header & navigation

The header is a section group shown on every page. Open the Header section to set:

• Logo & logo width (a text logo from your store name is used if no image is set).
• Menu — choose the navigation menu (defaults to your store’s Main menu). Multi-level menus render as a mega menu on desktop and a drawer on mobile.
• Sticky header — keep the header visible on scroll.
• Quick access to search, account and cart.

Edit menus in Shopify admin under Online Store → Navigation.

Announcement bar

Add the Announcement bar at the very top for promos or shipping notices. Add multiple message blocks (optionally with links); enable scrolling/marquee for several messages. Motion is disabled automatically for reduced-motion visitors.

Cart drawer

Auros uses a slide-out cart drawer so customers never leave the page. It supports quantity updates, line and cart-level discount display, an optional free-shipping progress bar, and accelerated checkout. Configure the threshold and color scheme on the Cart drawer section.

Footer

The footer is a section group with flexible blocks:

• Menu columns (default to your Footer menu).
• Newsletter sign-up (collects subscribers to your customer list).
• Social icons (set links in Theme settings → Social).
• Payment icons and copyright.
• Localization — country/currency and language selectors (see Localization).

Homepage sections

Build your homepage by adding any of these sections (Add section on the home template). Each has its own settings, blocks, and color scheme.

Product page

The product page is fully modular. Key features:

Add or reorder blocks (price, variants, description, collapsible rows, share, app blocks, etc.) directly on the Product information section.

Collection & search

Collection pages include faceted filtering and sorting, a grid/list toggle, and pagination. To enable filters, install Shopify’s free Search & Discovery app and configure filters there — Auros renders them automatically.

Search offers predictive search (instant suggestions as you type) plus a full results page with the same filters.

Blog, pages & system templates

Auros styles every standard template on its design system: blog, article (with social sharing), page, contact, cart, 404, password, and gift card. Edit each from its template in the theme editor.

Color swatches

Auros can render color options as visual swatches on product cards and the product page. Two ways to drive them:

• Native: if your color option values match CSS color names, swatches render automatically.
• Metafield (recommended for exact brand colors / texture images): create a product-option metafield and assign each color a hex value or swatch image, then enable swatches in the variant picker.

Size guide

The size-guide modal is powered by a metaobject so you can reuse one guide across many products:

1. In admin, go to Settings → Custom data → Metaobjects and create a size_guide metaobject (e.g. a rich-text or table field for measurements).
2. Add a product metafield custom.size_guide (type: metaobject reference) and link products to their guide.
3. Add the Size guide block to the Product information section. The button appears on linked products; it opens an accessible modal, with a link fallback when JavaScript is off.

Complementary & related products

“You may also like” (related) works out of the box. Complementary products (“pairs well with”) are powered by Shopify’s free Search & Discovery app: open it, set product recommendations, and Auros displays them on the product page.

Localization & translations

Auros ships with English (default) and Italian, and every label is translatable. For multiple countries/currencies and languages:

1. Set up Shopify Markets (admin → Settings → Markets) with your countries, currencies and languages.
2. Add languages under Settings → Languages and translate via Shopify Translate & Adapt or your translation app.
3. The footer country/currency and language selectors appear automatically when more than one is available.

Performance & accessibility

Auros is built “no-build”, with responsive images, lazy loading, deferred vanilla JavaScript (no heavy frameworks), and progressive enhancement — core flows (cart, navigation, filters, forms) work even without JavaScript. It follows accessibility best practices: semantic landmarks, keyboard operability, visible focus, ARIA on interactive components, reduced-motion support, and AA-level color contrast in the shipped presets. To keep your store fast, prefer appropriately-sized images and avoid stacking many auto-playing videos above the fold.

FAQ

Do I need to know how to code?

No. Every visible element is a section or block configured in the theme editor.

Will updating the theme erase my customizations?

Theme settings and content are stored with your theme; when updating to a new version, re-apply settings on the new copy before publishing. Keep a duplicate as backup.

My filters / complementary products don’t show.

Install and configure the free Search & Discovery app — Auros reads filters and recommendations from it.

Swatches aren’t appearing.

Either use CSS-named color values, or set up color/image swatch metafields (see Color swatches).

How do I change all the colors at once?

Edit your color schemes in Theme settings → Colors, or switch preset (Warm/Bold). Sections inherit their assigned scheme.

Support

Need a hand? Email dev.antonio.nusco@gmail.com with your store URL and a description (screenshots help). We’re happy to help you get Auros looking its best.