Nextra

What's inside

assets/              # CSS, JS, icons
blocks/              # shared theme blocks (group, text)
config/              # settings_schema.json, settings_data.json
layout/              # theme.liquid, password.liquid
locales/             # 30 storefront translations + schema translations
sections/            # 45+ sections, section groups (header / footer)
snippets/            # reusable snippets (product-card, cart, search, etc.)
templates/           # index, product, collection, list-collections, cart,
                     # blog, article, page, page.contact, search, 404,
                     # password, gift_card, customers/

Installation

Before editing any code: duplicate your theme first (Online Store → Themes → ⋯ → Duplicate). Edit the duplicate, not your live theme, so you always have an unmodified copy to fall back to. Nextra is fully configurable through the theme editor without touching code — if you do need custom code changes beyond what settings allow, consider hiring a Shopify Partner.

Nextra is distributed through the Shopify Theme Store:

1. From the Theme Store listing, click Add theme — this installs Nextra into your store's Online Store → Themes library as an unpublished theme, so your live storefront is unaffected until you publish it.
2. Open it and click Customize to set your logo, menus, color scheme, and homepage sections in the theme editor — no code required.
3. When you're happy with it, go back to Online Store → Themes and click Publish to make it your live theme.

Theme Store updates are pushed as new versions you review and apply from Online Store → Themes → Nextra → ⋯ → Check for updates — they won't overwrite your store automatically.

Theme settings

These live under Theme settings in the theme editor and apply store-wide:

• Layout — boxed or full-width layout, page width (1000–1600px), page margin, section spacing (desktop + mobile), grid spacing, divider thickness, and corner-radius controls for blocks, buttons, inputs, product cards, product media, collection cards, and blog cards.
• Colors — unlimited color schemes (Shopify's native Online Store 2.0 system). Each scheme defines background / gradient, headings, text, links, buttons (including hover states), inputs, dividers, and product-card colors. Separate colors for sale / custom / sold-out badges, discount labels, star ratings, and slider arrows.
• Typography — heading font, body font, and an accent font (used by the highlight styles). Per-level heading sizes for desktop and mobile (H1–H6), heading letter spacing and line height, body scale, body line height, and body letter spacing.
• Product card — swatch shape (circular / rounded / square / rectangular), swatch style (color or variant image), swatch size, card image ratio, and card borders.
• Product page swatches — enable, shape, style, size, and a list of option names treated as color swatches (default: “Color, Colour”).
• Scroll animations — enable AOS, default animation, duration, delay, animate once, and a disable-on-mobile toggle.
• Custom cursor — optional follower cursor with color controls.
• Social media — links for 15+ networks, used by the header, footer, and announcement bar.

Building the product page

Nextra's product page is fully block-based. Open any product in the theme editor, select the Main product section, and add / reorder / remove blocks in the information column. Available blocks include price, variant picker (dropdown or buttons), quantity selector, buy buttons, inventory status with custom thresholds and messages, description (accordion or full-width), collapsible rows, size chart, pickup availability, social sharing, “ask a question”, back-in-stock, complementary products, a discount coupon, a free-shipping bar, a delivery estimate, and app blocks.

Each block has its own desktop and mobile top / bottom padding, so you control the spacing between blocks precisely. Gallery layout (thumbnail rail vs. full-bleed slideshow), the sticky add-to-cart bar, container width, and media aspect ratio are section-level settings.

Size chart

Nextra's size chart is a normal Shopify page — no metaobject setup. In Shopify admin, create a page (e.g. Online Store → Pages → Add page) with your sizing table in the rich-text editor. Then on the product page:

1. Add a Size chart block to the Main product section.
2. Choose a display style — Popup, Accordion, or Full width.
3. Set the block's Page to your sizing page and give it a heading.

Use one shared page for every product, or a different page per product by editing the block on each product's template.

FAQ

Support policy

The Plug software team provides bug fixes and answers any merchant questions about how the theme works, at no extra cost. This covers things not working as documented, theme-editor settings behaving unexpectedly, and general "how do I do X" questions.

Custom code changes, third-party app integrations, and design work beyond the theme's built-in settings are available as separate paid work — mention what you need in the contact form below and we'll follow up with scope and pricing.

License

© 2026 Plug software team. All rights reserved.