Getting started

After installing the theme, open Online Store → Themes → Customize.

1. Add your brand

Open Theme settings → Branding to upload a logo and favicon. If no logo is uploaded, Astera displays the brand text configured in the same panel. Adjust the logo width until it remains legible on both desktop and mobile.

2. Set the color system

Open Theme settings → Colors. Astera ships with a white canvas, navy text, and clear blue actions. Every important surface uses one of the theme color settings, so you can rebrand the theme without editing CSS.

Maintain a contrast ratio of at least 4.5:1 for body text and 3:1 for large text, icons, focus indicators, and borders.

3. Choose typography

Open Theme settings → Typography to choose display and body fonts. Test long product and collection titles after changing fonts because character width can vary significantly.

4. Choose the cart experience

Open Theme settings → Cart and select either:

• Drawer: keeps the shopper on the current page after adding a product.
• Page: redirects the shopper to the full cart page.

Both versions support quantities, order notes, selling-plan information, discounts, unit pricing, taxes, and accelerated checkout.

Header and navigation

Astera uses a two-deck masthead: utility icons flank a centered wordmark, and the navigation sits on its own centered row beneath a hairline. The header supports a logo or brand text, predictive search, Shopify’s account component, cart status, and navigation up to three levels deep.

When a top-level menu item contains children, desktop displays an image-led mega menu. Collection images are used first; if a collection has no image, Astera falls back to the first product image. Mobile renders the same hierarchy inside an accessible drawer.

Keep top-level labels short. Use collection images with a consistent ratio for the cleanest mega-menu composition.

Homepage sections

Hero

Astera’s hero is product-led: pick a collection and the section fills its showcase with real product cards — images, titles, prices, and working links — next to your kicker, heading, supporting text, and two actions. Choose between the Soft panel tone (light surface with a subtle glow) and the Ink tone (deep navy with an electric accent) in the section settings. A dedicated image can replace the product showcase, and with nothing configured the section renders stable placeholder cards instead of an empty banner.

Split banner

An asymmetric pair of category panels. Each panel takes a dedicated image or borrows its collection’s imagery; portrait product photography is displayed whole instead of being cropped. Use it for category discovery directly under the hero.

Featured collection

Choose a collection, product count, desktop and mobile columns, and whether to show a view-all action. Product cards support sale and sold-out states, unit pricing, swatches, and quick add.

Featured product

Select a product to create a complete shopping surface on any JSON template. The section supports images, hosted video, external video, 3D models, variant swatches, quantity, add to cart, accelerated checkout, app blocks, description, payment terms, and Custom Liquid blocks.

Image with text

Pair an image with a heading, supporting copy, and action. When no image is selected, Astera borrows real catalog imagery so the section never renders empty.

Stat bar

Three or four short trust statements — dispatch time, returns window, secure checkout — rendered as a compact row.

FAQ

An accordion of questions and answers built on native disclosure elements, so it works without JavaScript and stays fully keyboard-accessible. Add up to twelve entries.

Blog posts

Surface the latest articles from any blog with image, date, title, and excerpt. While a store has no published posts, the section shows placeholder cards.

Testimonials

Display customer quotes as a grid or carousel. Only publish authentic customer feedback and obtain permission before identifying a customer or company.

Newsletter

Collect email subscribers using Shopify’s customer form. Successful signups are stored in the customer list with email marketing consent.

Custom section and Custom Liquid

The Custom section accepts reusable theme blocks such as text, images, buttons, groups, spacing, and Custom Liquid. The standalone Custom Liquid section is available on every JSON template for integrations or small merchant-authored Liquid fragments.

Product pages

Product information is block-based. Vendor, title, price, variant picker, quantity, purchase actions, description, collapsible rows, SKU, share, pickup availability, app blocks, and Custom Liquid can be reordered or removed from the editor. Dynamic checkout buttons are styled to match the theme’s own buttons.

Variants and swatches

Variant options can display as pills or dropdowns. When Shopify provides a swatch image or color, Astera displays it with the option value. Unavailable combinations remain visible and are marked as unavailable.

Selecting a variant updates price, compare-at price, availability, SKU, pickup availability, quantity limits, URL, and associated media.

Product media

The gallery supports a stacked layout or a thumbnail rail, with images, hosted videos, YouTube or Vimeo videos, and 3D models. Add meaningful alt text to product images in the Shopify admin.

Pickup and subscriptions

Pickup availability appears when locations and local pickup are configured in Shopify. Selling-plan selections and allocations are preserved in cart line items when a compatible subscription app supplies them.

Collections and search

Collection and search templates support storefront filtering, sorting, responsive product grids, pagination, quick add, sale states, swatch filters, and empty-result messaging. Filtering and sorting keep working with JavaScript disabled through plain form submits.

Configure filters with Shopify Search & Discovery. When no filters are configured, the filter action remains hidden.

Predictive search in the header returns products, pages, and articles. The full search page supports sorting and filtering without removing the submitted search term.

Cart

The cart drawer and cart page support:

• Quantity changes and item removal.
• Variant and selling-plan details.
• Line-level and cart-level discounts.
• Unit prices.
• Order notes.
• Subtotal and accelerated checkout.

Taxes and shipping are described as calculated at checkout unless Shopify reports that taxes are included.

Accessibility

Astera includes keyboard-operable menus, dialogs, filters, product options, and forms; visible focus styles; reduced-motion handling; live regions for cart and variant changes; and responsive touch targets.

Accessibility also depends on merchant content. Always provide image alt text, use descriptive link labels, maintain heading order, and recheck contrast after changing colors.

Frequently asked questions

Why does the hero show placeholder cards?

No collection is selected, or the selected collection has no products. Pick a collection with published products in the hero settings, or upload a dedicated image instead.

Why are filters missing?

Install Shopify Search & Discovery and configure at least one storefront filter for the relevant market and collection.

Why does the mega menu show a product image?

The linked collection has no collection image. Add one in Products → Collections if you want to control the menu artwork explicitly.

Why is a color option shown as text instead of a swatch?

Configure a swatch color or image for that option value in Shopify. Astera falls back to the option label when Shopify provides no swatch data.

Why does Add to cart open a page instead of the drawer?

Open Theme settings → Cart and change the cart type to Drawer.

Can apps add content to the product page?

Yes. The main product and Featured product sections support Shopify app blocks. They also include Custom Liquid blocks for integrations that provide a Liquid snippet.

Support

Use the public support form linked from the Shopify Theme Store listing. Include the store URL, theme version, affected page, browser and device, steps to reproduce, and screenshots when possible.

Support requests receive an automatic confirmation. The target response time is two business days, with critical storefront bugs prioritized immediately.