Aprelux: Hugo E-commerce Theme Documentation

Welcome to Aprelux, a sophisticated and highly customizable Hugo theme designed for modern e-commerce. Aprelux (Version: 1.0.0) combines elegant design with robust functionality, providing a seamless and professional online shopping experience for a wide range of products.

This theme is built with a distinctive dark/light design mode and features luxurious gold accents, ensuring your store stands out with an aesthetic polish. It offers a versatile foundation adaptable for various niches, as demonstrated by the included demo content featuring diverse product examples.

Installation Guide

Aprelux is built on Hugo, a fast and flexible static site generator. Follow the steps below to install and run the theme:

Theme File Structure

Understanding the core file structure of your Aprelux Hugo E-commerce Theme is essential before diving into configuration. This theme is built with modular clarity and premium maintainability. The theme should be placed in your Hugo site's themes/aprelux/ directory.

Quick Summary

  • 📄 theme.toml → Theme metadata and information
  • 📁 archetypes/ → Default content blueprint
  • 📁 layouts/ → Templates, partials, shortcodes
  • 📁 static/ → CSS, JS, images, theme assets
  • 📁 exampleSite/ → Demo site with sample content and configuration
  • 📁 static/js/ 📄 order-to-sheets.js → Optional Google Sheets integration script

Full Annotated Structure

Theme location: themes/aprelux/

  • 📄 theme.toml # Theme metadata, author info, and requirements
  • 📁 archetypes/
    • └── default.md # Default archetype for new content
  • 📁 exampleSite/ # Complete demo site for reference
    • ├── config.yaml # Example Hugo site configuration
    • └── content/
      • ├── _index.md # Homepage content
      • ├── about-us.md
      • ├── cancel.md
      • ├── contact-us.md
      • ├── privacy-policy.md
      • ├── return-policy.md
      • ├── shipping-handling.md
      • ├── success.md
      • ├── terms-conditions.md
      • ├── tracking.md
      • ├── trademark-copyright.md
      • ├── categories/
        • │ ├── aurea/
          • │ │ └── _index.md
        • │ ├── nova/
          • │ │ └── _index.md
        • │ ├── lux/
          • │ │ └── _index.md
        • │ ├── umbra/
          • │ │ └── _index.md
        • │ └── ignis/
          • │ └── _index.md
      • ├── products/
        • │ ├── ignis-thunderbolt-gelifier.md (demo content)
        • │ ├── umbra-ghoststrike-flow-tier.md (demo content)
        • │ └── [other demo products]
        • │ └── _index.md
      • └── reviews/
        • └── _index.md
    • └── static/
      • └── images/
        • └── products/
          • ├── ignis-thunderbolt-gelifier/ (demo content)
          • ├── umbra-ghoststrike-flow-tier/ (demo content)
          • └── [other images for demo products] (demo content)
        • └── reviews/
          • ├── ignis-thunderbolt-gelifier/ (demo content)
          • ├── umbra-ghoststrike-flow-tier/ (demo content)
          • └── [other images for demo products] (demo content)
  • 📁 layouts/
    • ├── _default/
      • │ ├── baseof.html # Main layout wrapper
      • │ ├── single.html # Default single page
      • │ ├── search.html
      • │ ├── success.html
      • │ ├── taxonomy.html
      • │ └── terms.html
    • ├── partials/
      • │ ├── analytics.html
      • │ ├── cart-modal.html
      • │ ├── footer.html
      • │ ├── global-reviews.html
      • │ ├── head.html
      • │ ├── header.html
      • │ ├── hero-cm.html
      • │ ├── pagination.html
      • │ ├── product-card.html
      • │ ├── product-gallery.html
      • │ ├── product-tabs.html
      • │ ├── sale-badge.html
      • │ └── analytics/
        • │ ├── cookie-consent.html
        • │ ├── ecommerce-events.html
        • │ ├── facebook-pixel.html
        • │ ├── google-analytics.html
        • │ ├── gtm-body.html
        • │ ├── gtm-head.html
        • │ ├── plausible.html
        • │ └── umami.html
    • ├── products/
      • │ ├── list.html
      • │ └── single.html
    • ├── reviews/
      • │ └── list.html
    • ├── shortcodes/
      • │ ├── contactusform.html
      • │ └── success-handler.html
    • ├── tags/
      • │ ├── list.html
      • │ └── terms.html
    • ├── index.html # Homepage template
    • ├── 404.html
    • └── index.json
  • 📁 static/
    • ├── css/
      • │ └── style.css # Main compiled stylesheet
    • ├── js/
      • │ ├── cart.js
      • │ ├── lightbox.js
      • │ ├── order-to-sheets.js # Optional Google Apps Script for syncing order data to Google Sheets
      • │ ├── product-gallery.js
      • │ ├── search.js
      • │ └── stripe.js
    • ├── images/
      • │ ├── logo_header_dark_theme.webp
      • │ ├── logo_header_light_theme.webp
      • │ ├── logo_footer_dark_theme.webp
      • │ ├── logo_footer_light_theme.webp
      • │ └── [other theme images]
    • ├── android-chrome-192x192.png
    • ├── android-chrome-512x512.png
    • ├── apple-touch-icon.png
    • ├── favicon.ico
    • ├── favicon-16x16.png
    • ├── favicon-32x32.png
    • ├── robots.txt
    • └── site.webmanifest

Documentation Outline

This documentation aims to be a comprehensive guide for customizing and managing your Aprelux website, with detailed, line-by-line explanations for each setting and its implications.

Chapter I: Getting Started – Hugo Configuration (config.yaml)

This foundational chapter will cover the primary configuration file that governs your entire Hugo site. We will explore each setting to understand its role in setting up the basic site structure and functionality.

The config.yaml file is located at the root of your Hugo project: your-website/config.yaml.

1.1 Basic Site Configuration

This section defines the fundamental settings that establish your website's identity and its core operational parameters. These settings are crucial for ensuring your Hugo site functions correctly and is displayed as intended.

baseURL

languageCode

title

theme

1.2 Pagination Settings

This section controls how content is divided and displayed across multiple pages, particularly for list views such as product category pages or search results.

pagerSize

path

1.3 Taxonomies Configuration

This section allows you to define custom ways to classify and organize your website's content, beyond the default sections. Taxonomies are crucial for improving content discoverability and site navigation.

category: "categories"

tag: "tags"

1.4 Output Formats

This section defines the various formats (beyond the default HTML) that Hugo will generate for different types of content on your website.

1.5 Sitemap Configuration

This section of your config.yaml file is crucial for how your website communicates with search engines regarding its structure and content updates. Configuring your sitemap correctly helps search engines like Google efficiently crawl and index your site, ultimately impacting your search visibility.

Here's a detailed breakdown of the settings under Sitemap Configuration in your config.yaml:

changefreq

priority

filename

These settings are located under the sitemap parameter within your main Hugo config.yaml file. Proper sitemap configuration is a fundamental aspect of SEO (Search Engine Optimization) and plays a vital role in ensuring your Aprelux theme is discoverable and ranks well.

1.6 Navigation Menu (menu.main)

This section within your config.yaml file is crucial for defining the primary navigation structure of your Aprelux website. It controls what links appear in your main menu, their display text, and their order. Correctly configuring your navigation is key for user experience, ensuring visitors can easily find important sections of your site.

menu.main

This is the top-level parameter under which all your main navigation menu items are defined. Each item within this list represents a link in your website's main navigation bar.

For each menu item, you will configure the following parameters:

Here's how these menu items are structured in your config.yaml:

menu:
  main:
    - name: "Home"
      url: "/"
      weight: 1
    - name: "Shop"
      url: "/products/"
      weight: 2
    - name: "Aurea"
      url: "/categories/aurea/"
      weight: 3
    - name: "Nova"
      url: "/categories/nova/"
      weight: 4
    - name: "Umbra"
      url: "/categories/umbra/"
      weight: 5
    - name: "Lux"
      url: "/categories/lux/"
      weight: 6
    - name: "Ignis"
      url: "/categories/ignis/"
      weight: 7
    - name: "Reviews"
      url: "/reviews/"
      weight: 8

This structure allows you to have a flexible and organized navigation system for your Aprelux theme, directly impacting how users explore your product categories and essential pages.

1.7 Markup Configuration (markup.goldmark.renderer)

This section of your config.yaml file controls how Hugo processes Markdown content, specifically regarding the rendering of raw HTML within your Markdown files. It directly impacts the flexibility and potential security of your content.

markup.goldmark.renderer.unsafe:

Here's how this setting is structured in your config.yaml:

markup:
  goldmark:
    renderer:
      unsafe: true

This configuration ensures that all the rich, custom HTML elements used throughout your Aprelux theme's content are displayed as intended.

1.8 Media Types & Output Formats (mediaTypes, outputFormats)

This section of your config.yaml file defines how Hugo handles different content types and the various output formats it generates for your website. This is crucial for controlling how your site's content is served, particularly for standard HTML pages and API endpoints (like a JSON feed for search functionality).

mediaTypes:

outputFormats:

These settings ensure that Hugo correctly builds the different file types necessary for your Aprelux site to function as expected, especially for serving web pages and providing data for interactive elements like search.

1.9 Language Configuration (languages)

This section of your config.yaml file is where you configure multilingual support for your Hugo website. By default, Hugo assumes a single language, but the languages parameter allows you to define and customize settings for multiple languages, enabling your Aprelux site to serve content in different linguistic versions.

languages:

Here's how this setting is structured in your config.yaml:

#languages:
#  en:
#    title: "Aprelux"

Chapter II: Theme Parameters (params Section in config.yaml)

This chapter will delve into the params section, which contains the most frequently modified settings for theme customization. Each parameter will be explained in detail, including its purpose and how to adjust it.

2.1 General Theme Settings

This section covers fundamental options for customizing the overall look and feel of your Aprelux theme.

2.2 Site Identity & Information

This section defines crucial metadata about your website, affecting its appearance in search results and overall attribution.

2.3 Hero CM Editor Settings (hero_cm)

This section covers the Hero CM block, which is one of two main hero options available in the Aprelux theme. The Hero CM and Hero CMA blocks serve as alternative hero sections - you can choose to use either one or test both to determine which better fits your project needs. Hero CM is a more traditional, configuration-driven hero block that offers straightforward customization through config.yaml settings. It integrates directly with the layouts/partials/hero-cm.html file to control the appearance, content, and behavior of this prominent site element.

Both hero blocks can be enabled simultaneously for testing purposes by setting their respective enabled parameters to true in config.yaml, but in practical implementation, it's recommended to use only one hero block to avoid visual conflicts and maintain a clean, focused homepage design. Choose Hero CM if you prefer a simpler, configuration-based approach with direct control over layout positioning and styling options.

Here's a detailed, line-by-line explanation of the Hero CM parameters:

Here's how these settings are structured in your config.yaml:

hero_cm:
  enabled: false                         # Set to false to disable hero section
  image_position: "left"                 # "left" or "right"
  background_color: "black"              # Direct CSS color (hex, rgb, named colors, etc.)
  text_alignment: "right"                # "left", "center", or "right"
  mobile_breakpoint: "768px"             # Custom breakpoint for mobile layout
  text_wrapper_max_width: "55%"          # Max width for text wrapper (%, px, rem, etc.)

  # Text Content
  button_text: "Explore Variants"
  headline: "Geometry-Aligned <br> Reviewer-Ready."
  slogan: "Modular layout. No drift.<br> Symbolic categories."

  # Images
  image_left: "/images/hero-cm-image-left.webp"
  image_right: "/images/hero-cm-image-right.webp"
  image_alt_left: "Symbolic category image - left"
  image_alt_right: "Symbolic category image - right"

  # Spark Effect Settings
  spark_effect:
    enabled: true                      # Set to false to disable spark effect
    color: "gold"                      # Hex color for spark effect
  
  # Button Settings
  button:
    link: "/products"                    # Button destination URL
    target: "_self"                      # "_self" or "_blank"
    use_button_element: true             # Use <button> instead of <a> for theme styling

This comprehensive breakdown covers all parameters within the Hero CM section.

2.4 Hero CMA (hero_cma)

This section covers the Hero CMA block, which is one of two main hero options available in the Aprelux theme. The Hero CMA and Hero CM blocks serve as alternative hero sections - you can choose to use either one or test both to determine which better fits your project needs. Hero CMA is a more dynamic, content-driven hero solution that offers greater flexibility by combining configuration settings from config.yaml with rich content management through the content/_index.md file, rendered via Hugo's layouts/index.html partials.

Both hero blocks can be enabled simultaneously for testing purposes, but in practical implementation, it's recommended to use only one hero block to maintain optimal site performance and user experience. Choose Hero CMA if you prefer a more content-driven approach with advanced features like rotating text animations, feature blocks, configurable quotes, and multi-part content sections that can be individually toggled on or off.

Here's a detailed breakdown of the Hero CMA parameters from your config.yaml and how they connect with your content/_index.md and layouts/index.html files:

Section 2.4 Hero CMA (hero_cma) Parameters in config.yaml

The Hero CMA block in your config.yaml acts as the control panel for enabling and managing the various content parts of this dynamic hero section.

Integration with content/_index.md Parameters

While the Hero CMA section in config.yaml enables and controls which parts of the Hero CMA are shown, the actual content for these parts is primarily sourced from the hero_cma parameters within your content/_index.md file. The layouts/index.html template then pulls these values to construct the final homepage.

For Hero CMA, the primary content comes from the hero_cma block in content/_index.md.

Here's how hero_cma from content/_index.md contributes:

How layouts/index.html Orchestrates Hero CMA

The layouts/index.html file is the central template for your homepage. It dynamically checks the enabled and partX_enabled flags within .Site.Params.hero_cma (from config.yaml) to decide which content blocks to render. It then accesses the relevant content from .Params.hero_cma (from content/_index.md) to populate those blocks.

For example, the presence of {{ if .Site.Params.hero_cma.enabled }} and nested {{ if .Site.Params.hero_cma.part1_enabled }} directives in layouts/index.html dictates whether the content for each part of the Hero CMA is displayed. When enabled, it directly injects the mainHeading, subHeading, textSeparator, containerRamzi, dedication, and featureBlocks values from the hero_cma section of your _index.md file.

This setup allows for powerful customization: you can quickly toggle entire sections on or off from config.yaml, while modifying the actual text content and images directly in content/_index.md without touching the theme's core HTML files.

Here's how these settings are structured in your config.yaml (snippet):

hero_cma:
  enabled: true
  part1_enabled: true
  part2_enabled: true
  part3_enabled: true
  use_quote: true
  quote_text: "Launch Your Online Store on a Static Website — Lightning Fast, Hosting-Free"
  quote_author: "Aprelux – The Ultimate Hugo E-Commerce Theme with Built-In 💰 STRIPE Integration"

And a snippet from content/_index.md for context:

title: "hero_cma:
  mainHeading: |
    Turn Visitors Into Buyers
  subHeading: "Built for agencies, developers, and driven sellers"
  textSeparator: "❖╬❖"
  containerRamzi:
    - "Speed First"
    - "Stripe Native"
    - "Zero Hosting"
    - "Design Clarity"
    - "Safe Checkout"
  heroImage: "images/hero-cma-image.webp"
  dedication: "Modular variants across all categories"
  secondTextSeparator: "❖╬❖"
  featureBlocks:
    - id: "feature-variants"
      emojiAlt: "💎"
      emojiSrc: "https://s.w.org/images/core/emoji/15.1.0/svg/1f48e.svg"
      count: ""
      title: "Stripe Integration"
      description: "Sell directly from your static website․ Skip hosting fees. Aprelux processes secure payments without servers"
	  link:
	    text: ""
	    url: ""
	    external: false
	  modal: true
	  modalText: "Stripe Checkout Demo ⇲"
	- id: "feature-logic"
	  emojiAlt: "🔥"
	  emojiSrc: "https://s.w.org/images/core/emoji/15.1.0/svg/1f525.svg"
	  count: ""
	  title: "Advanced Order Triggers"
	  description: "Collect and organize order data via Google Sheets, Formspree, Airtable and send instant email alerts"
	  link:
	    text: "Google Sheets Viewer ↗"
	    url: "https://docs.google.com/spreadsheets/d/1mss-QIR4fn9LTKLFmBtdYFT9tJC4KdHry-BAZ1FLjHQ/edit?usp=sharing"
	    external: true
	  modal: false
	  modalText: ""

2.5 Closing Hero (closing_hero)

This section covers the Closing Hero block, which is a promotional content area positioned below the featured products section on your Aprelux homepage. While named "Closing Hero" for consistency with the theme's hero block architecture, this section functions more as a call-to-action or promotional area rather than a traditional hero block. Like Hero CMA, it leverages the same content management approach - combining settings from config.yaml for visibility control with rich content sourced from the closing_hero parameters in your content/_index.md file, rendered through the layouts/index.html template.

Here's a detailed breakdown of the closing_hero parameters and how they integrate with your site's content architecture:

Section 2.5 Closing Hero (closing_hero) Parameters in config.yaml

The closing_hero block in your config.yaml primarily controls the overall enablement of this section.

Content Structure and Layout Position

The Closing Hero section appears in the following sequence on your homepage:

  1. Hero CM or Hero CMA - Primary hero section (top of page)
  2. Featured Products Section - "Our Featured Products" showcase
  3. Closing Hero - Promotional/CTA section (this section)

This positioning makes Closing Hero ideal for reinforcing your brand message after visitors have viewed your product offerings, creating a natural flow toward conversion.

Integration with content/_index.md Parameters

While the Closing Hero section in config.yaml enables the section, the actual content for this area is sourced directly from the closing_hero block within your content/_index.md file. The layouts/index.html template then pulls these values to construct the final homepage.

Here's how closing_hero from content/_index.md contributes:

How layouts/index.html Renders Closing Hero

The Closing Hero section is rendered within the main layouts/index.html template using a conditional check for {{ if .Site.Params.closing_hero.enabled }}. When enabled, it creates a full-width promotional section with centered content that includes:

Here's how these settings are structured in your config.yaml:

closing_hero:
  enabled: true # Set to false to disable Closing Hero section

And the corresponding content structure in content/_index.md:

closing_hero:
  quote: "The Aprelux theme is much more than meets the eye — it offers dozens of unique features"
  textSeparator: "❖╬❖"
  heroText: |
	To better understand what can be easily tweaked, customized, or replaced with alternative versions, visit our About Us page. There, we highlight the key aspects that make Aprelux distinct from other Hugo themes — and from static website themes in general. Just click the link to explore
  secondTextSeparator: ""
  ctaText: "Explore Apreluxs"
  ctaLink: "/about-us/"
  closingHeroImage: "images/closing-hero-image.webp"

This dual-source approach allows you to quickly enable or disable the entire section from config.yaml while maintaining full editorial control over the content through content/_index.md.

2.6 Product Configuration

This section within your config.yaml's params block is crucial for customizing how products are displayed across your Aprelux site. It includes settings that affect product listings, individual product pages, and even the homepage featured product section, offering granular control over the user experience.

Here's a detailed breakdown of the product configuration parameters:

Section 2.6 Product Configuration Parameters in config.yaml

These settings are located under the params section in your config.yaml file.

These settings collectively allow you to fine-tune the presentation and interaction of your products, from how they appear in listings to the detailed layout of individual product pages and review sections.

Here's how these settings are structured in your config.yaml (snippet):

# PRODUCT CONFIGURATION

  gallery:
    horizontal_thumbnails: false   # Set to false for vertical thumbnails
  
  buttonAlignment: "center"        # "left" or "center"
  galleryAlignment: "center"       # "flex-start" (left) or "center"
  useImportantGallery: true        # to add !important when needed  
  
  enableHoverImage: true
  showProductDescription: true     # Toggle product description display
  
  productBadge:
    enabled: true                  # Toggle the availability badge globally
    availableText: "Available"     # Text when product is available
    comingSoonText: "Coming Soon"  # Text when product is not available
  
  sale_badge: "glowing"           # Options: "glowing" or "gradient"
  sale_badge_text: "Sale"         # Default text for sale badge
  
  product:
    products_per_page: 9          # Number of products shown per category/listing
    
    tabs:
      description_title: "Description"
      additional_info_title: "Additional Information"
      reviews_title: "Reviews"
    
    reviews:
      global_reviews: true
      no_reviews_message: "Be the first to review this product!"
      max_global_reviews: 5
      sort_by_date: true
      global_reviews_title: "Reviews for our shop overall"
      other_products_title: "Reviews for our other products"
      reviews_per_page: 9          # Reviews per page on the reviews page
      
  homepage:
    featuredLimit: 12              # Featured products count (homepage)

2.7 Payment Integration (stripe)

This section is dedicated to configuring your Stripe settings within the params block of your config.yaml file, which is essential for handling secure payment processing on your Aprelux site.

Section 2.7 Payment Integration Parameters in config.yaml

These settings are located under the params section in your config.yaml file.

These two parameters are crucial for enabling your e-commerce functionality, allowing customers to make purchases through Stripe's payment gateway.

Here's how these settings are structured in your config.yaml (snippet):

# PAYMENT INTEGRATION

stripe:
  publishable_key: "pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  currency: "usd"

For a detailed tutorial on integrating Stripe into your site, refer to Stripe Integration.

2.8 Analytics & Tracking

This section in your config.yaml's params block is vital for integrating various analytics and tracking services into your Aprelux site. These settings allow you to monitor website traffic, user behavior, and marketing campaign performance.

Section 2.8 Analytics & Tracking Parameters in config.yaml

These settings are located under the params section in your config.yaml file.

These parameters provide comprehensive control over your site's data collection and privacy settings, allowing you to choose which services to use and configure them according to your needs and local regulations.

Here's how these settings are structured in your config.yaml (snippet):

# ANALYTICS & TRACKING

analytics:
  enabled: true
  
  # Google Analytics 4
  google:
    enabled: true
    id: "G-xxxxxxxxxx"
    enhanced_ecommerce: true
    anonymize_ip: true
	
  # Google Tag Manager
  gtm:
    enabled: false
    id: "GTM-XXXXXXX"
	
  # Facebook Pixel
  facebook:
    enabled: false
    pixel_id: "XXXXXXXXXXXXXXX"
    advanced_matching: true
	
  # Plausible Analytics
  plausible:
    enabled: false
    domain: "yourdomain.com"
	
  # Umami Analytics
  umami:
    enabled: true
    script_url: "https://cloud.umami.is/script.js"
    website_id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
	
  # Privacy & Compliance
  privacy:
    enabled: false
    gdpr_compliance: true
    cookie_consent: true

2.9 Social Sharing

This section in your config.yaml's params block is dedicated to configuring the social sharing buttons on your Aprelux site. These settings allow visitors to easily share your product pages or other content across various social media platforms.

Section 2.9 Social Sharing Parameters in config.yaml

These settings are located under the params section in your config.yaml file.

These parameters give you granular control over how and where social sharing features are presented on your e-commerce site, crucial for extending your reach and marketing efforts.

Here's how these settings are structured in your config.yaml (snippet):

socialShare:
  enabled: true
  style: "icons"    # Options: "icons", "buttons", "minimal"
  
  buttons:
    facebook:
      enabled: true
      url: "https://www.facebook.com/xxxxxxxxxx/"
    twitter:
      enabled: true
      username: "xxxxxxxxxx"
    pinterest:
      enabled: true
      username: "xxxxxxxxxx"
    whatsapp:
      enabled: true
    email:
      enabled: true
    copyLink:
      enabled: true

2.10 Pagination Styling

This section in your config.yaml's params block is dedicated to configuring the appearance and behavior of pagination controls on your Aprelux site. These settings allow you to customize how users navigate through product listings, review pages, or any other content split across multiple pages.

Section 2.10 Pagination Styling Parameters in config.yaml

These settings are located under the params section in your config.yaml file.

These parameters ensure that your site's pagination is both functional and visually appealing, adapting to the amount of content and your design preferences.

Here's how these settings are structured in your config.yaml (snippet):

paginationStyle:
  show_page_numbers: true
  show_prev_next: true
  max_page_links: 7

This section in your config.yaml's params block is dedicated to configuring the content and structure of your website's footer on Aprelux. This includes company information, a newsletter signup, and two distinct footer menus.

Section 2.11 Footer Configuration Parameters in config.yaml

These settings are located under the params section in your config.yaml file.

These parameters collectively define the content and navigation structure of your site's footer, making it a critical area for user information and conversion.

Here's how these settings are structured in your config.yaml (snippet):

  footer:
    # Company Information
    about: "About us"
    email: "[email protected]"
    extra_line: "Active since 2022"
    address: "Address: Placeholder for buyer customization"
    
    # Newsletter Signup
    sign_up: "Signup for Newsletter"
    slogan: "Latest News and Discounts"
    formspreeID: "f/xxxxxxxx"
    
    # Footer Menu 1: Policies
    footer_menu_1: "Our Policies"
    policiesMenu:
      - name: "Privacy Policy"
        url: "/privacy-policy/"
      - name: "Terms & Conditions"
        url: "/terms-conditions/"
      - name: "Shipping & Handling"
        url: "/shipping-handling/"
      - name: "Return Policy"
        url: "/return-policy/"
      - name: "Trademark & Copyright"
        url: "/trademark-copyright/"
    
    # Footer Menu 2: Support Center
    footer_menu_2: "Support Center"
    helpMenu:
      - name: "About Us"
        url: "/about-us/"
      - name: "Tracking"
        url: "/tracking/"
      - name: "Contact us"
        url: "/contact-us/"

2.12 Contact Form Configuration

This section in your config.yaml's params block is dedicated to configuring the Formspree ID for your site's contact form on Aprelux. This ensures that messages submitted through the contact form are correctly routed to your Formspree endpoint for processing.

Section 2.12 Contact Form Configuration Parameters in config.yaml

These settings are located under the params section in your config.yaml file.

These parameters are crucial for enabling a functional contact form on your Aprelux site, allowing users to easily get in touch with you.

Here's how these settings are structured in your config.yaml (snippet):

contact_page:
  formspreeID_contact: "f/yyyyyyyy"

2.13 Success Page Order Notifications

This section in your config.yaml's params block is dedicated to configuring how order data is handled and notifications are sent after a successful payment on your Aprelux site. This includes options for email notifications via Formspree, integration with Google Sheets, Airtable, and settings for placeholder images on the success page.

Section 2.13 Success Page Order Notifications Parameters in config.yaml

These settings are located under the params section in your config.yaml file. They are used to configure order notification behavior on the success page, which interacts with the shortcode {{< success-handler >}} to process and dispatch order data. Additionally, these settings define image assets and placeholders used for visual feedback on the success page.

These settings provide comprehensive options for post-order data management and notification, crucial for e-commerce operations.

Here's how these settings are structured in your config.yaml (snippet):

  success_page:
    notifications:
	
      # METHOD 1: Email via Formspree
      formspree:
        enabled: false              # Set to "false" or "true"
        id: "f/zzzzzzzz"            # Your Formspree form ID (after f/)
      
      # METHOD 2: Google Sheets integration
      googlesheets:  # Note: lowercase 's' in 'sheets'
        enabled: false             # Set to true to enable
        scripturl: "https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/exec"             # Your Google Apps Script Web App URL
      
      # METHOD 3: Airtable integration  
      airtable:
        enabled: false            # Set to true to enable
        apikey: ""                # Your Airtable API key (starts with pat_)
        baseid: ""                # Your Airtable base ID (starts with app)
        tablename: "Orders"       # Name of your Airtable table
    
    # Image settings (optional)
    usePlaceholderImagesOnSuccess: false # Set to true to use placeholder images
    placeholderImageName: "placeholder"  # Name of placeholder image file
    imageExt: "webp"                     # Default image extension

2.14 Search Suggestions

This section in your config.yaml's params block is dedicated to configuring search suggestions — including their display names, target URLs, and the total number shown in the modal search box. This box is triggered by clicking the Search option in the header menu.

The search functionality relies on JavaScript (search.js) to load and filter content from a JSON index (index.json). However, the ability to define search suggestions has been moved to config.yaml for convenience and ease of customization.

Here’s how these settings are structured under your theme parameters:

  searchSuggestions:
	enabled: true
	maxSuggestions: 5
	tags:
	  - label: "Aurea Forms"
		query: "aurea"
	  - label: "Nova Emitters"
		query: "nova"
	  - label: "Umbra Shields"
		query: "umbra"
	  - label: "Lux Frames"
		query: "lux"
	  - label: "Ignis Cores"
		query: "ignis"

Chapter III: Content Structure and Archetypes

This chapter will explain how content is organized within the Aprelux theme and how to create new pages and products using archetypes. Understanding this structure is key to managing your site's content effectively, from basic informational pages to detailed product listings and customer reviews.

3.1 Core Content Directories

This section explores the primary directories responsible for content within your Aprelux Hugo E-commerce Theme. Understanding these directories and their purpose is fundamental to adding, modifying, and organizing your website's content.

This foundational understanding of your content directories and their associated front matter is crucial for effectively managing and expanding your Aprelux theme website.

Chapter IV: Layouts and Partials (layouts/ directory)

This chapter is crucial for understanding how the Aprelux Hugo E-commerce Theme's structure and appearance are defined using HTML templates and reusable components. It will explain how Hugo takes your content and wraps it in these layouts to render the final web pages.

4.1 Core Layout Templates (_default/)

This section is vital for understanding the foundational HTML structures that Hugo uses to render the various pages of your Aprelux website. The layouts/_default/ directory contains fundamental templates that serve as the base for most page types on your site. These templates define the overarching structure, including where content, headers, footers, and other common elements are placed.

4.2 Reusable Components (partials/)

This section delves into smaller, reusable HTML snippets that are included across multiple layouts, promoting reusability and simplifying maintenance.

4.3 Content-Specific Layouts

This section focuses on the specialized HTML templates within the layouts/ directory that are tailored for specific content types on your Aprelux website. These layouts define how particular kinds of content, such as individual products, product listings, or customer reviews, are structured and presented to users.

4.4 Root Layouts

This section details critical HTML templates and data files located directly within the layouts/ directory, serving foundational roles for your Aprelux website's functionality and user experience.

Chapter V: JavaScript (static/js/ directory)

This crucial chapter will explain the various JavaScript files responsible for adding interactivity and core e-commerce functionalities to your Aprelux site. These scripts manage everything from user interactions like adding items to a cart to essential backend integrations for order processing.

5.1 Core Functionality

This section details the JavaScript files that drive the main interactive and e-commerce features directly on your website:

5.2 Backend Integration

This chapter details how these JavaScript files work together to provide a dynamic and functional e-commerce experience for your Aprelux users.

Chapter VI: CSS Styling (static/css/style.css)

This chapter explains the Aprelux Hugo E-commerce Theme's styling, providing details on its color palette and responsive design principles. Understanding these foundational CSS settings will enable you to customize the visual appearance of your Aprelux website effectively.

6.1 Color Palette and Variables (:root)

This section breaks down all defined CSS variables within the :root pseudo-class in style.css. These variables are fundamental to the theme's visual consistency and allow for easy modification of the site's entire color scheme. The explanation also details their intended use cases and mentions RGB values for transparency.

The variables are categorized by their primary use, and their intended application is provided for clarity:

This detailed color palette provides a robust foundation for the Aprelux theme, allowing for both precise control over individual elements and efficient global style adjustments.

6.2 Light Theme Override (html.theme-light)

This section provides a detailed explanation of how the light theme is implemented by inverting or adjusting colors for optimal accessibility and visual consistency. When the html element has the theme-light class, the CSS variables defined within this block override the default dark theme values.

Here's a breakdown of the key color adjustments in the light theme override:

This comprehensive override ensures that all elements correctly adapt their colors when the user switches to the light theme, providing a cohesive and accessible visual experience.

6.3 Key Styling Sections

This section outlines the primary CSS styling areas that define the visual presentation of the Aprelux theme. Each of these sections governs a specific aspect of the website's appearance, ensuring a consistent and responsive design across various elements.

Chapter VII: Third-Party Service Integrations

This chapter provides comprehensive, step-by-step guides for integrating essential third-party services into your Aprelux e-commerce site, allowing you to streamline order management and payment processing.

7.1 Google Sheets Integration

To effectively manage product order data, you can set up an automated system that sends order details directly to a Google Sheet. This integration utilizes a Google Apps Script provided with the theme (order-to-sheets.js), which acts as a bridge between your website's successful order page and your Google Sheet.

Overview: The provided Google Apps Script functions as a Web App endpoint. When an order is successfully placed on your Aprelux site, the theme sends a POST request with the order data to this Web App. The script then processes this data, adds it to your designated Google Sheet, and can even send you an email notification.

Step-by-Step Setup:

  1. Create a New Google Sheet:
    • Go to Google Sheets ↗
    • Click "+ Blank" to create a new spreadsheet
    • You can rename it to something like "Aprelux Order Data"
  2. Access Google Apps Script:
    • In your new Google Sheet, navigate to Extensions > Apps Script from the top menu. This will open a new browser tab with the Google Apps Script editor
  3. Paste the Provided Script:
    • In the Apps Script editor, you will see a default Code.gs file. Replace all existing code in this file with the content from the order-to-sheets.js file located in your theme's static/js/ directory
    • Save the project by clicking the floppy disk icon or File > Save. You can also rename the project (e.g., "Aprelux Order Sync")
  4. Deploy as a Web App:
    • In the Apps Script editor, click the Deploy button (usually top right) and select "New deployment"
    • For "Select type", choose Web app
    • Configure the deployment settings: Execute as: Select "Me" (your Google account). Who has access: Select "Anyone". This is crucial for your website to be able to send data to the script without requiring authentication from every visitor
    • Click Deploy
    • Google might ask you to authorize the script's access to your Google account. Follow the prompts to review permissions and grant access
    • Once deployed, you will be presented with a "Deployment succeeded" dialog. Copy the "Web app URL". This is the unique URL that your website will send order data to. Keep this URL safe
  5. Configure config.yaml:
    • Open your Hugo site's main configuration file, config.yaml, located at the root of your project
    • Navigate to the params.success_page.notifications.googlesheets section
    • Set enabled: true to activate Google Sheets integration
    • Paste the copied "Web app URL" into the scripturl field
    • Save your config.yaml file

Data Organization and Access

By default, the newest orders appear at the bottom of your Google Sheet, with the oldest orders at the top. This chronological organization helps you track order patterns over time.

To access and share your Google Sheet:

  1. Click the "Share" button in the upper-right corner of your Google Sheet
  2. You can keep the link private for your own use or share it with team members by adjusting the access permissions
Demo Example: You can view a sample of how the Google Sheets integration works by visiting our Aprelux Demo Google Sheet ↗

Email Notifications and Public Display

Once configured, all order notifications will be automatically organized in a "Aprelux Shop" label/folder in your Gmail account. Additionally, you can create a public display page that shows recent order emails without requiring visitors to have a Google account.

To set up the public email display page:

  1. Return to your Google Apps Script editor where you deployed the order integration script
  2. Select the checkDeploymentStatus function from the function dropdown
  3. Click the "Run" button to execute the function
  4. If successful, check the execution log for a public URL that will display order emails from the last 30 days
Demo Example: See how this works in practice at our Public Order Display Demo ↗

Troubleshooting: Development vs Production URL Issue

Common Issue: Google Apps Script sometimes generates development URLs instead of production URLs, which require authentication for access. This can prevent the public display feature from working correctly.

This is a known Google Apps Script deployment issue where ScriptApp.getService().getUrl() returns a development URL even after proper deployment. To resolve this:

Step 1: Configure Production URL Manually

After deploying your script but before updating your config.yaml, add your production Web App URL to the script:

const PRODUCTION_WEB_APP_URL = ""; // PASTE YOUR /exec URL HERE

Replace the empty string with your actual production URL:

const PRODUCTION_WEB_APP_URL = "https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.../exec";
Step 2: Test and Verify
  1. Save the script with the updated production URL
  2. Run the checkDeploymentStatus function again
  3. Verify that the execution log shows the correct production URL (ending in /exec)
  4. Optionally, run the setupPublicOrderDisplay() function to confirm the setup

Once this is configured correctly, your public order display page will be accessible to anyone with the link, without requiring Google account authentication. At first it will be empty, so don't forget to run test orders.

7.2 Stripe Integration

Integrating Stripe allows your Aprelux e-commerce theme to process secure payments for products. The theme leverages Stripe Checkout, a pre-built, hosted payment page solution, which is ideal for static websites like those built with Hugo. Stripe Checkout handles sensitive payment information securely on Stripe's servers, meaning your Hugo site doesn't need to directly process or store credit card data.

Step-by-Step Setup:

  1. Create a Stripe Account:
    • If you don't already have one, create a Stripe account at stripe.com ↗
    • Follow Stripe's onboarding process to set up your business details
  2. Enable Client-Only Integration (Critical for Static Sites):
    • Purpose: This is mandatory for static sites like Aprelux. Without this setting, Stripe will block checkout redirects in live mode
    • Steps:
    • What happens if you skip this: Stripe will return an error "Integration not configured for client-only checkout" and payments will fail
  3. Configure Payment Method Domains:
    • Purpose: In live mode, Stripe requires you to explicitly authorize which domains can use your checkout
    • Steps:
      • Go to Sripe's payment method domains page ↗
      • Add your exact domain(s) as they appear in your URL:
      • yourdomain.com
      • www.yourdomain.com (if you use www)
      • shop.yourdomain.com (for subdomains)
    • What happens if you skip this: In live mode, Stripe will block the redirect with "Domain not authorized for checkout". Test mode works with any domain, but live mode enforces this list strictly
  4. Obtain Your API Keys:
    • Once logged into your Stripe Dashboard, navigate to Developers > API keys ↗ for test mode
    • You will see two types of keys:
      • Publishable key (starts with pk_live_ for live mode or pk_test_ for test mode): This key is used in your theme's config.yaml and is safe to be publicly exposed
      • Secret key (starts with sk_live_ or sk_test_): This key is not needed for client-only integration on static websites. However, it is required if you implement serverless functions or backend logic.
    • Copy your Publishable key. You can use a test key during development and testing
  5. Configure config.yaml with Stripe Keys:
    • Open your Hugo site's main configuration file, config.yaml, located at the root of your project
    • Navigate to the params.stripe section
    • Paste your Publishable key into the publishable_key field
    • Set the currency to your desired transaction currency (e.g., "usd", "eur", "gbp")
    • Save your config.yaml file
  6. Create Products and Prices in Stripe:
    • In your Stripe Dashboard, navigate to Products > Product catalog
    • Click "+ Add product"
    • Create a product for each item you sell (e.g., "ignis-thunderbolt-gelifiert")
    • For each product, create a Standard pricing plan. Crucially, when you create a price for a product, Stripe assigns a unique "Price ID" (e.g., price_1RhTzwHTyljN5qDmUvo5iK1c)
    • Copy the Price ID for each product you create
  7. Insert Price IDs into Product Content Files:
    • Open the Markdown file for each of your products in the content/products/ directory
    • Locate the stripe_price_id field in the front matter of each product file
    • Paste the corresponding Price ID you copied from Stripe for that specific product
    • Ensure the price in your Markdown file matches the price you set in Stripe for that stripe_price_id
  8. Testing Your Stripe Integration:
    • Stripe provides a test mode to simulate transactions without using real money. Ensure your publishable_key starts with pk_test_
    • You can find test credit card numbers and other test data on Stripe's official documentation ↗
    • After a successful test payment, you should see the order details in your Stripe Dashboard under test data. You can also receive a more detailed copy of this information via email, if you've correctly configured one of the three notification options: Formspree, Google Sheets integration, or Airtable.

Addressing Product Variations and Checkout Experience:

When working with products that have variations (like "Color" or "Size"), it's important to understand how Stripe Checkout integrates with these. The Aprelux theme is designed to pass selected variations to the cart and the success page order data. However, Stripe Checkout's standard integration has specific behaviors regarding how product options are displayed and recorded directly within Stripe itself during the checkout process:

Stripe's Behavior with Variations: Stripe Checkout typically focuses on the Price ID for the transaction. While the theme's backend system captures your customers' selected variations and includes them in the order data sent to Google Sheets (if enabled) and stored in the success page's URL parameter, these specific variation choices (e.g., "Red" or "Small") might not always be explicitly displayed as line item details on Stripe's hosted checkout page itself

By following these steps, you will have a robust payment system and an organized order tracking system in place for your Aprelux theme.

8. Support and Contact Information

The Aprelux theme is thoroughly documented to help you configure, customize, and deploy it with confidence. Before reaching out for support, please follow this recommended support flow:

  1. Step 1: Review the Documentation
    This guide provides detailed explanations of theme configuration, layout customization, integrations, and troubleshooting. Most issues can be resolved by following the instructions provided.
  2. Step 2: Use the Selling Platform’s Support Mechanisms
    If the documentation does not resolve your issue, please use the support tools available on the platform where you purchased Aprelux. This ensures your request is properly tracked and prioritized.
  3. Step 3: Direct Contact (if needed)
    For unresolved issues or licensing questions, you may contact the theme author directly via email:
    [email protected]

Theme Highlights Recap

Thank you for choosing Aprelux. We hope this documentation has helped you make the most of your theme. For updates, support, or feedback, feel free to reach out.