Getting Started

Everything you need to install the Alpha Nutrition theme, navigate the Shopify editor, and configure your global settings.

The Alpha Nutrition theme is a premium Shopify theme built for health, supplement, and nutrition brands. It ships with 50+ configurable sections, a modular block system, light and dark presets, and first-class mobile support.

Installing the Theme

After purchasing the theme from the Shopify Theme Store, it's automatically added to your store — just preview and publish when you're ready.

1. Purchase from the Shopify Theme Store When you buy the Alpha Nutrition theme, Shopify automatically installs it into your store's theme library. No download or upload needed.
2. Find it in your theme library Go to Online Store → Themes in your Shopify admin. You'll see the theme in your theme library, ready to customize.
3. Preview before going live Click Customize to open the theme editor and start building your store. Use the preview link to check how everything looks on your actual domain before publishing.
4. Publish when ready Once you're happy with your setup, click the … menu on the theme and select Publish. Your store is now live with the Alpha Nutrition theme.

Using the Theme Editor

A quick tour of how to add sections, configure blocks, and preview changes.

Key Concepts

Sections are the large building blocks of every page — hero banners, product grids, testimonials, etc. You add them via "Add section" in the sidebar.

Blocks live inside sections. For example, a Hero section contains slide blocks, button blocks, badge blocks, and text blocks. Click a section to see its blocks.

Theme settings are global — colors, typography, button styles, etc. Access them by clicking the paintbrush icon in the editor sidebar.

Pre-Built Page Templates

The theme includes several ready-made page templates that you can assign to any Shopify page:

• Default page — Simple content page
• About — Pre-configured with Image with Text, Icon Grid, Stats Counter, and Testimonials sections
• Contact — Full contact form with info cards, map, and trust items
• FAQs — Accordion FAQ groups
• All Sections — A showcase template with every available section for quick previewing

To assign a template, go to Pages in your Shopify admin, edit a page, and select the template from the Theme template dropdown on the right side.

Adding a Section

1. Open the page you want to edit Use the page dropdown at the top of the editor (e.g. "Home page", "Product page").
2. Click "Add section" Scroll down the sidebar and click the button. Browse or search for the section you want.
3. Configure settings Click the section to open its settings panel. Fill in content, choose colors, and adjust layout.
4. Add blocks Inside the section, click "Add block" to add items like slides, trust items, testimonials, etc.
5. Reorder Drag sections and blocks up/down to reorder them. Click Save when done.

Theme Settings

Global settings that affect your entire store — colors, fonts, buttons, layout, and more.

Access these by clicking the paintbrush icon (Theme settings) in the editor sidebar. Changes here apply site-wide.

Colors

Set your brand's primary and secondary colors, background, text, and accent tones. These feed into CSS custom properties that every section uses, so changing them here updates your entire store.

Typography

Choose your heading and body fonts from Shopify's font library. Adjust base sizes. The theme uses a responsive type scale — mobile sizes are calculated automatically.

Rounded Corners

Control the border radius for buttons, cards, images, and input fields globally. Set to 0 for a sharp, modern look or higher values for a softer feel.

Buttons

Configure button styles — fill vs outline, hover effects, padding, and font weight. This affects every button across the store.

Social Media

Add your social media profile URLs (Instagram, Facebook, TikTok, X/Twitter, YouTube, etc.). These are used by social icons in the footer, header, and anywhere you add a social links block.

Localization

Choose between Drawer mode (a sliding sidebar panel for currency + language) or Dropdown mode (inline dropdown on desktop, bottom sheet on mobile). Both display country flags automatically.

Layout

Set your container max-width (default 1280px) and section spacing. These control the overall rhythm and width of your content.

Favicon

Upload a square image (at least 32×32px) for your browser tab icon.

Theme Presets (Light & Dark)

The theme ships with two complete presets — a light default and a dark mode. Switch between them instantly or use either as a starting point.

Alpha Nutrition (Light)

The default preset — clean white backgrounds, dark text, and your brand's primary accent color. Ideal for most stores, especially those with bright product photography.

Dark

A fully designed dark mode preset with deep black/charcoal backgrounds, light text, and inverted UI elements. Every color — backgrounds, cards, borders, inputs, cart drawer, buttons — is tuned for a premium dark aesthetic. Great for brands going for a bold, premium feel.

How to Switch Presets

1. Open the theme editor Go to Online Store → Themes and click Customize.
2. Open Theme Settings Click the paintbrush icon in the sidebar.
3. Change the preset At the very top, click Change preset and select either Alpha Nutrition (light) or Dark.
4. Customise from there The preset sets all your base colors and styles. You can then fine-tune any individual setting — the preset is just a starting point.

Header

Your store's main navigation — logo, menu, search, account, and cart.

Key Settings

• Layout — Choose between logo left / nav center, logo center, or logo left / nav left.
• Logo — Upload your logo image and set the desktop logo width (recommend 120–180px).
• Navigation menu — Select which Shopify menu to use. The theme supports up to 3-level dropdowns.
• Sticky header — Toggle sticky behaviour so the header follows users as they scroll.
• Transparent mode — Makes the header background transparent on the homepage hero. Set text to white for dark hero images.

Account Dropdown

The Account block in the header supports 4 configurable link slots. Use these to add custom links (e.g. "Loyalty Points", "Refer a Friend") above the default account/login links.

Announcement Bar

A dismissible bar at the top of your store for promotions, shipping info, or important notices.

Supports multiple rotating messages with auto-rotation. Each message can include a link. Customize background color, text color, and link styles. Social icons can optionally display alongside messages.

Mobile Navigation

The bottom navigation bar and full-screen mobile menu for touch-first browsing.

The theme includes a fixed bottom navigation bar on mobile with configurable buttons: Home, Shop, Search, Cart, and Menu toggle. Tapping "Menu" opens a full-screen navigation drawer with accordion submenus, account links, and a currency selector.

Block Types

• Home — Links to your homepage
• Shop — Links to a collection or /collections
• Search — Opens the search drawer
• Cart — Shows the cart with live item count badge
• Menu toggle — Opens the mobile navigation drawer

Hero

A full-width hero section with multiple slides, each supporting images, video, text overlays, badges, and buttons.

Block Types

• Slide — Background image or video, link URL, overlay settings. Add multiple slides for a slideshow
• Badge — Small tag labels (e.g. "NEW", "BEST SELLER") with customizable style and color
• Heading — Rich text heading with size and weight controls
• Text — Body copy with rich text editing. Supports custom text color
• Button — CTA button with label, URL, and style (primary/secondary/outline)
• Button group — Two side-by-side buttons
• Trust row — Inline icons with text (e.g. "Free shipping" "Money-back guarantee")
• Icon + text — Icon with supporting text, great for USPs
• Product card — Embed a product card directly in the hero
• Newsletter form — Capture emails right from the hero

Section Settings

Control slide height (desktop & mobile separately), autoplay speed, overlay color & opacity, content alignment, and text colors. Upload a separate mobile image per slide for best results on phones.

Image with Text

A versatile split layout — image on one side, text content on the other. The workhorse of content pages.

Key Settings

• Image position — Left or right
• Image style — Contained, full-bleed, or rounded
• Content alignment — Top, center, or bottom
• Background color — Custom section background
• Content blocks — Badge, heading, text, buttons, trust row, icons, bullet lists, and more

Stack multiple Image with Text sections to create an alternating content layout (image left → image right → image left). Set different background colors on alternating sections for visual rhythm.

Rich Content

A flexible full-width or contained content section for rich text, headings, images, buttons, and more — no image split.

Use for centered content areas — mission statements, feature descriptions, or any content that doesn't need an image alongside. Supports all the standard content blocks: headings, text, buttons, badges, icons, spacers, and more. Control max-width, alignment, and spacing.

Split Content

A two-column layout with highly configurable left and right panels — each can hold an image, text content, or a newsletter form.

Each panel has its own layout mode (image, content, or form), background color, and content alignment. Great for newsletter sign-ups with an accompanying lifestyle image, or any two-panel content layout.

Tabbed Content

Organize content into clickable tabs — each tab reveals its own content panel with images, text, and blocks.

Perfect for product benefits, ingredient spotlights, or multi-category content. Each tab can hold its own image, heading, text, and CTA buttons. The tabs are fully responsive — they scroll horizontally on mobile.

Video

Embed YouTube, Vimeo, or Shopify-hosted video with a custom thumbnail and play button overlay.

Upload a cover image for fast loading — the video only loads when the user clicks play. Supports autoplay, loop, and muted background video modes. Configure aspect ratio, corner rounding, and whether the video is full-width or contained.

Icon Grid

Display a grid of icons with titles and descriptions — ideal for features, benefits, or process steps.

Choose from the built-in icon library or upload custom icon images. Set columns per row (2–6), icon size, and text alignment. Works well as a "How it works" or "Why choose us" section.

Feature Grid (Why Us)

A visually rich grid of feature cards — each with an icon, title, and description. Designed for "Why choose us" content.

Higher visual impact than Icon Grid — cards have background colors, hover effects, and more layout options. Use when you want the features to stand out as cards rather than simple icon rows.

Before / After

An interactive slider letting users drag to compare two images side by side.

Upload a "before" image and an "after" image. Users drag the slider handle to reveal the comparison. Great for transformation results, skin improvements, or product packaging redesigns.

Gallery / Lookbook

A masonry or grid gallery of images — ideal for lifestyle photography, product lookbooks, or brand imagery.

Add images as blocks — each can optionally link to a product or page. Choose between grid and masonry layouts. Control columns, gap spacing, and hover effects.

Image Hotspots

Pin clickable hotspot dots on an image that reveal product cards or info tooltips on hover/tap.

Upload a lifestyle or flat-lay image, then add hotspot blocks positioned by X/Y percentage. Each hotspot links to a product and shows a mini product card popup. Fantastic for "shop the look" layouts.

Brand Timeline

Tell your brand's story chronologically — milestones, achievements, and key dates on an interactive timeline.

Each milestone block has a date/year, title, description, and optional image. The timeline renders with a connecting line and alternates left/right on desktop, stacking vertically on mobile.

Comparison Table

Compare your product against competitors in a structured table — checkmarks, x-marks, and feature rows.

Define column headers (your brand + competitors), then add rows for each feature. Mark each cell as ✓, ✗, or custom text. Your column is visually highlighted. Scrollable on mobile.

Stats Counter

Animated number counters — show key metrics like "10,000+ customers" or "50+ countries".

Numbers animate from 0 to the target value when they scroll into view. Add a prefix (e.g. "$") or suffix (e.g. "+", "K", "%"). Set the animation duration and per-counter colors.

Map

Embed an interactive Google Map to show your location, warehouse, or pop-up store.

Enter an address or paste a Google Maps embed URL. Configure map height, zoom level, and add an optional text panel alongside the map with your address, hours, and contact info.

Product Page

The main product template — gallery, variants, add to cart, and all the product detail blocks.

Layout Options

Choose your gallery style — thumbnail strip, grid, carousel, or stacked. The product form sits beside (or below on mobile) the gallery with variant pickers, quantity selector, and add-to-cart.

Available Blocks

• Vendor — Product brand/vendor name
• Title — Product title with configurable size
• Price — Price with compare-at / sale price support
• Variant picker — Swatches or dropdown for variant selection
• Buy buttons — Add to cart + dynamic checkout button
• Description — Product description with collapsible option
• Trust icons — Trust badges below the buy button
• Custom liquid — Inject your own Liquid/HTML for reviews, widgets, etc.
• Complementary products — Show complementary items

Collection Page

The main collection template — product grid with filtering, sorting, and layout controls.

Key Settings

• Products per row — Set columns for desktop (2–5) and mobile (1–2)
• Products per page — Pagination count
• Enable filtering — Toggle Shopify's native storefront filters
• Enable sorting — Let customers sort by price, date, best sellers, etc.
• Card style — Configure how product cards appear (image ratio, hover effects, show vendor, show price, etc.)

Product Grid

A standalone section to display products from any collection — use on your homepage, landing pages, or content pages.

Select a collection, set the number of products to show, and configure columns. Supports headings, subtext, and a "View all" link button. Includes the same product card styles and hover effects used elsewhere in the theme.

Featured Product

Highlight a single product with a large image, description, and add-to-cart — designed for homepage or landing pages.

Pick any product from your store. The section renders a mini product page inline with image, title, price, variant picker, and buy button. Great for drawing attention to a bestseller or new launch.

Product Tabs

Add tabbed content below the product — ingredients, usage directions, shipping info, reviews, etc.

Each tab block has a title and rich text content. Tabs can also pull content from product metafields. The first tab is open by default. Use on your product template to organize detailed product information.

Nutrition + Content

Display nutritional information, supplement facts, and ingredient details for health/nutrition products.

Built specifically for supplement brands. Displays serving size, calories, macros, and ingredient lists in a structured nutrition facts format. Content can be pulled from product metafields for easy per-product data.

Related Products

Automatically show related products based on Shopify's recommendation engine.

Uses Shopify's product recommendation API — no manual configuration needed. Set the heading text, number of products to show, and column count. Products update automatically as Shopify learns your store's product relationships.

Recently Viewed

Show products the customer has recently browsed — powered by browser localStorage.

Add to any page template — it automatically tracks and displays products the visitor has looked at. Great for the product page or cart page to encourage further browsing.

Trust Bar

A horizontal strip of trust badges — shipping, guarantees, certifications, and support icons.

Each trust item block has an icon (from the built-in library or custom image), a title, and a short description. Choose between horizontal scroll or grid layout. Customize background and text colors. Commonly placed below the hero or above the footer.

Testimonials

Customer testimonials in a card layout — each with avatar, name, title, rating, and review text.

Add testimonial blocks with customer photo, name, subtitle (e.g. "Verified Buyer"), star rating, and review text. Choose between grid and carousel layouts. Set the number of visible cards and the autoplay speed for carousel mode.

Logo List

Display logos of press mentions, partners, certifications, or "As seen in" brands.

Upload logo images as blocks. Set a consistent height so logos align regardless of original aspect ratio. Optionally link each logo. Use for "Featured in", "Certified by", or partner showcase bars.

UGC Videos

Showcase user-generated video content — TikToks, Reels, and customer video reviews.

Add video blocks with Shopify-hosted video or external URLs. Each displays in a vertical (9:16) format optimized for social media content. Renders in a horizontal scroll carousel. Great for authenticity and social proof.

Newsletter

Capture email subscribers with a prominent newsletter sign-up section.

Includes heading, subtext, and an email input form. Subscribers are added to your Shopify customer list. Customize background image or color, text alignment, and input/button styles. Supports a split layout with an image on one side.

Email Popup

A modal popup to capture email subscribers — triggered by time delay, scroll depth, or exit intent.

Configure the delay before the popup appears, the heading text, incentive copy (e.g. "Get 10% off"), and image. The popup remembers if a visitor has dismissed it so they won't see it repeatedly. Works with Shopify's native customer marketing system.

Age Verification

A mandatory age gate popup — visitors must confirm their age before accessing the store.

Essential for stores selling age-restricted products. Customize the heading, legal text, button labels, and minimum age. The verification state is remembered in the browser so returning visitors aren't asked again.

Promo / Discount Bar

A sticky promotional bar — show discount codes, free shipping thresholds, or flash sale announcements.

Eye-catching bar with custom background color and text. Can include a discount code that copies to clipboard on click. Set it to sticky or static positioning.

Countdown Timer

Create urgency with a live countdown to a specific date — product launches, sales, or events.

Set a target date and the timer counts down in real-time showing days, hours, minutes, and seconds. Add heading text, a CTA button, and customize the visual style. Optionally hide the section after the countdown expires.

Marquee Banner

An infinitely scrolling text banner — great for announcements, brand slogans, or promotional messages.

The text scrolls continuously. Set the speed, direction, and add separator icons between repeated text. Customize colors and font size. Works as a visual divider between sections.

Slideshow

An image carousel — multiple slides with optional text overlays and links.

Different from the hero slideshow — this is a standalone section for mid-page slideshows. Auto-advance, dot/arrow navigation, and per-slide text overlays. Good for promotions, category showcases, or brand storytelling.

Pricing Table

Compare pricing tiers or subscription plans in a clean table layout.

Add tier blocks with plan name, price, features list, and CTA button. Highlight a "recommended" tier. Perfect for subscription boxes, wholesale tiers, or membership plans.

Contact Page

A fully featured contact form with 9 block types — text inputs, phone picker, dropdowns, map embed, FAQ, and more.

Available Block Types

• Text input — Single-line field with optional icon and required asterisk
• Email input — Email field with validation
• Phone (International) — Flag + country code picker with 17 pre-configured countries. The hidden form field combines code + number on submit
• Dropdown — Custom-styled dropdown (not a native select) with configurable options
• Message field — Multi-line textarea with optional icon
• Info card — Display contact details, hours, or any info alongside the form
• Trust item — Trust badges within the contact section
• Map — Google Maps embed from an address string or embed URL
• FAQ question — Inline FAQ accordion within the contact page

FAQ Page

A clean accordion-style FAQ section — group questions into categories with expandable answers. Use as a full page or drop into any template.

Add FAQ group blocks, each containing a group title and multiple questions. Each question expands to reveal its answer. Clean styling with light dividers and bold question text.

The theme includes a page.faqs.json template — assign it to a Shopify page to create a dedicated FAQ page. You can also drop the FAQs / Accordions section into any page template (homepage, product page, etc.) for inline FAQs wherever you need them.

Track Order

Let customers track their order status by entering their order number or tracking ID.

Simple form where customers enter their order number or tracking number. Configure which tracking service to redirect to (17Track, AfterShip, etc.) and add support info alongside the form.

Blog

Blog index and article templates — list posts, feature images, and full article pages.

The blog index shows article cards in a grid layout with featured images, titles, excerpts, dates, and author names. The article template provides a clean reading experience with a featured image hero, rich content area, author bio, and social sharing. Configure the sidebar, related posts, and comment display.

Legal Page

A clean, readable template for privacy policies, terms of service, refund policies, etc.

Optimized for long-form legal text with good typography, readable line lengths, and a table of contents. Assign the page.legal template to any Shopify page.

Footer

Your store's footer — navigation columns, newsletter signup, social icons, payment icons, and legal links.

Features

• Navigation columns — Multiple menus displayed in columns
• Newsletter form — Email capture in the footer
• Social icons — Pulled from your Theme Settings > Social Media URLs
• Payment icons — Show accepted payment methods (Visa, Mastercard, Amex, PayPal, Apple Pay)
• Copyright text — Auto year or custom text
• Currency selector — Inline currency/language picker (opens the localization drawer or dropdown)

Cart & Cart Drawer

Both a full cart page and a slide-out cart drawer — with upsells, free shipping bar, and custom messaging.

The cart drawer slides in from the right when a product is added. It shows line items with quantity controls, a free shipping progress bar, and a customizable message bar at the top (configurable text, background color, and icon via Theme Settings).

Currency & Language

Let customers switch currencies and languages with a polished selector — drawer or dropdown mode.

Two Display Modes

• Drawer mode — Clicking the currency trigger opens a full sidebar drawer with country/currency selection and language options
• Dropdown mode — Desktop shows an inline dropdown (opens upward in the footer). Mobile shows a bottom sheet

Both modes display country flag emojis automatically. Set the mode in Theme Settings → Localization. The currencies and languages available are configured in your Shopify Markets settings.

Chatbot

An embeddable chatbot widget — connect your support chat service.

Configure your chat provider's embed code (Tidio, Intercom, Zendesk, etc.) and the section handles positioning and display. The chat bubble appears in the corner of the page with configurable styling.

Back to Top

A floating button that appears on scroll and takes customers back to the top of the page.

The button appears after the user scrolls down a configurable distance. Smooth-scrolls back to the top. Simple to enable — just add the section in the theme editor. Configure the scroll threshold and button style.

Custom Liquid

Inject your own custom Liquid, HTML, CSS, or JavaScript anywhere in a template.

Add a Custom Liquid section to any page and paste in your code. Use this for third-party app integrations, custom widgets, tracking scripts, or any one-off content that doesn't fit an existing section. Supports full Liquid syntax with access to all Shopify objects.

Form Builder

Build custom forms with configurable fields — beyond the contact page's form.

Create custom forms with text fields, email fields, dropdowns, textareas, and more. Use for feedback forms, surveys, event registration, or any data collection need. Submissions go through Shopify's contact form system.

All Sections Reference

A quick reference of every section included in the theme.