Theme
Instructions
Everything you need to take this from a clone to a running site, in the order you will need it.
Instructions
This theme is a Hugo theme. You need Hugo 0.158 or newer, standard or extended; Node.js is only needed if you change the theme's stylesheets.
Support
Questions about the theme go through the marketplace listing you bought it from. Include the version number from the change-log page — it is the fastest way to a useful answer.
Setting the site up
Open `hugo.toml` first. It holds the site name, the URL, the contact details, the menus, the demo cart and the form endpoints. Changing a menu entry there changes it everywhere it is drawn.
Editing images and text
Text and images live in `content` and `data` rather than in the markup. Products and posts are Markdown files; the lists — reviews, questions, awards — are JSON.
Photographs go in `assets/images` and are referenced by a path such as `images/<file>`, so the build can resize them for every screen.
Adding products and posts
A product is one Markdown file in `content/products`, a post one in `content/blog`. The front matter holds the name, the photographs and the price; the body holds the description.
`weight` sets where an entry sits in its list; lower numbers come first in every grid and tab.
Components
Anything that appears on more than one page is a partial in `layouts/_partials`. The `sections` folder holds whole bands; `ui` holds the pieces they are built from.
Breakpoints
The design's four breakpoints are 1920, 1440, 991 and 767 pixels, and the stylesheet is written against them. Check any change at 1440, 900 and 390 before shipping it.
Custom animation
Scroll and hover behavior lives in `assets/js/motion.ts`, driven by `data-anim` attributes in the markup. Remove the attribute to remove the effect; nothing else has to change.
Backups
The theme is a git repository. Commit before you start editing, and the worst case is a `git checkout` rather than a re-download.
Adding a cart
The theme is a storefront without a cart. The original design was built on a hosted commerce runtime that an export cannot carry, so rather than ship a checkout that charges nobody, the theme ships the parts that work and leaves the cart to you.
What is already in place is the markup a cart needs: the mini-cart panel in the header, an Add to Cart control on every product, and a quantity field on the product page. Each is a real form control rather than a link, so wiring one up is a matter of handling the submit — with Shopify, Snipcart, Stripe or your own API.