1. Getting started
Add the theme to your store
- Open the Hoodrack listing in the Shopify Theme Store and click Try theme to add it to your theme library, or buy it to keep it.
- In your Shopify admin, go to Online Store > Themes. Hoodrack appears in your theme library.
- Click Customize to open the theme editor and set up your store before you publish.
- When you are happy with it, click Publish.
Recommended setup order
- Upload your logo and pick colors and fonts in Theme settings.
- Build your navigation in Content > Menus (see Header and mega menu).
- Create collections for your sports, teams, styles and weights.
- Add the product metafields so the team chips and product details show (see Product metafields).
- Edit the homepage sections and replace the demo images and text.
2. Theme settings
Open the theme editor and click the gear icon to see global settings. These apply across the whole store.
| Group | What you can change |
|---|---|
| Logo and favicon | Logo image, logo width on desktop (60 to 260 px) and on mobile (60 to 200 px), favicon. Without a logo, the store name is shown as text. |
| Colors | Background, text, secondary text, surface (light gray sections), borders, inverse background and text (dark sections), accent, text on accent, primary button and primary button text. |
| Typography | Heading font, uppercase headings on or off, heading size (80 to 130%), body font and body text size (90 to 120%). |
| Layout | Page width (Standard, Wide, Extra wide), side margins on mobile and desktop, corner radius for cards, buttons and inputs. |
| Product cards | Image ratio (Portrait 4:5, Square, Adapt to image), second image on hover, show brand, show a call to action button, sale badge style (Sale, Percent off, Hidden). |
| Cart | Cart type (Drawer or Page), free shipping threshold, order note, and a collection to suggest when the cart is empty. |
| Search | Search suggestions while typing, with optional brand and price. |
| Social media | Links for Instagram, TikTok, Facebook, X, YouTube and Pinterest. Icons show in the footer and on the password page. |
Most sections also have a Background setting with three choices: Default, Light gray (uses the Surface color) and Dark (uses the Inverse colors).
3. Header and mega menu
The header has the announcement bar, logo, main menu, search, account and cart.
Announcement bar
Add one Message block per announcement. With more than one message, the bar rotates between them and shows arrows.
Building the mega menu
- Go to Content > Menus and open your main menu.
- Top level links appear in the header bar, for example Sports, Style, Weight, Sale.
- Drag links under a top level link to nest them. Second level links become column headings in the mega menu.
- Third level links are listed under their column heading. For example: Sports > Football > Harborview Hawks.
A top level link with no nested links shows as a plain link.
Header settings
- Highlighted menu item: enter a top level menu title, for example
Sale, to show it in the accent color. - Sticky header: keep the header visible as customers scroll.
- Mega menu promo block: adds an image card inside a mega menu. Set Show under menu item to the top level title it belongs to, for example
Sports.
Customer accounts
The account icon uses Shopify's built in account menu, so customers can sign in, view orders and manage their profile. Turn on customer accounts in Settings > Customer accounts.
4. Homepage sections
All sections below can be added on the homepage or any other JSON template. Click Add section in the theme editor, then reorder by dragging.
| Section | Use it for | Key settings |
|---|---|---|
| Hero | A large banner at the top of the page. | Image (2000 px wide or more), optional mobile image, optional looping video, overlay darkness, height (Small to Full screen), eyebrow, heading, subheading, alignment and up to two buttons. |
| Shop by sport | Tiles that link to each sport. | One League block per sport with an image, title and link. Tile style and tiles per row. |
| Shop by team | Team logos grouped by sport. | One Team block per team with logo, name, sport and link. Turn on Show sport tabs to filter teams by the sport entered on each block. |
| Shop by style | Image cards for pullover, zip, crewneck and so on. | Style blocks with image, title, text and link. |
| Shop by weight | Compare lightweight, midweight and heavyweight. | Weight blocks with fabric weight (for example 280 to 340 GSM), warmth level and description. |
| Trending now | A product grid from one collection. | Collection, products to show, columns on desktop, optional button below the grid. |
| Featured collection | A product slider from one collection. | Collection, products to show, products visible on desktop. |
| Promo banner split | Two image banners side by side. | Banner blocks with image, text, button, text color and alignment. |
| Brand logos | A row of brand or partner logos. | Logo blocks (transparent PNG or SVG). Optional grayscale that turns to color on hover. |
| Trust bar | Short promises such as free shipping or easy returns. | Item blocks with an icon and text. |
| Rich text | A heading, text and button. | Eyebrow, Heading, Text and Button blocks in any order. |
| FAQ | Questions and answers that open and close. | Group heading and Question blocks. |
| Newsletter | Email signup. | Heading, text and button label. Signups go to Customers in your admin. |
| Contact form | A contact form on any page. | Heading and text. Messages go to your store email. |
| Collection banner | A banner for a collection page. | Uses the collection image and description. |
| You may also like | Product recommendations. | Uses Shopify's recommendations for the current product. |
| Custom Liquid | Your own Liquid, HTML or app snippets. | Liquid code, full width, background. |
5. Product page
The Product information section is built from blocks you can add, remove and reorder:
- Brand: the product vendor.
- Title and Price: price shows the sale price, compare at price, unit price and installment messaging when available.
- Sport and team chips: small links to the sport and team collections (see Product metafields).
- Buy buttons: variant picker, quantity selector, add to cart and dynamic checkout buttons such as Shop Pay. Also shows subscription options, gift card recipient fields and store pickup when they apply.
- Product details: a short list of style, weight and fit.
- Text, Collapsible tab and Share.
- Apps: app blocks such as reviews can be added here.
Size guide
In the section settings, enter your size option names in Size option names (for example Size). A Size guide link then shows next to that option. Choose a page for the guide or type the content in Size guide content.
Collapsible tabs
Each tab can show the product description, the size guide, a page or custom text. Use them for fabric and care, shipping, or returns.
6. Product metafields
Hoodrack reads five optional product metafields. When a metafield is empty, nothing shows, so you can add them over time.
To create them, go to Settings > Custom data > Products > Add definition.
| Name | Namespace and key | Type | Shows as |
|---|---|---|---|
| Sport | custom.league | Single line text or list of text | Sport chip |
| Team | custom.team | Single line text or list of text | Team chip |
| Style | custom.style | Single line text | Product details row |
| Weight | custom.weight | Single line text | Product details row |
| Fit | custom.fit | Single line text | Product details row |
Harborview Hawks links to /collections/harborview-hawks.7. Collections and filters
The Product grid section controls collection pages: products per page, columns on desktop and mobile, pagination style (numbered or load more), product count, sorting and filters.
Filters
- Install Shopify's free Search & Discovery app.
- In the app, open Filters and add the filters you want, such as Availability, Price, Size, Color, Product type or Vendor. Metafields such as Weight or Team can also be filters.
- In the theme editor, open a collection page and make sure Enable filtering is on. Choose a sidebar or drawer layout for desktop. On mobile, filters always open in a drawer.
8. Cart
- Cart type: Drawer opens a side panel when a product is added. Page sends customers to
/cart. - Free shipping threshold: shows a progress bar telling customers how much more they need to spend. Enter the amount in your store currency, for example 75. Leave it empty to hide the bar. This setting only changes the message, so also set up the free shipping rate in Settings > Shipping and delivery.
- Order note: lets customers add a note to their order.
- Empty cart collection: products to suggest when the cart is empty.
9. Search
Search opens from the magnifier icon in the header. With search suggestions on, matching products, collections and pages appear as customers type. The search results page has the same filters and sorting as collection pages.
10. Footer, markets and languages
- Add Newsletter, Menu and Text blocks to build the footer columns.
- Turn on social icons, payment icons and policy links in the section settings. Policies come from Settings > Policies.
- Country/region selector: shows when your store sells to more than one country. Add countries in Settings > Markets.
- Language selector: shows when more than one language is published. Add languages in Settings > Languages.
- Follow on Shop: a button that lets customers follow your store in the Shop app. It only shows when Shop Pay is turned on.
11. Pages and templates
| Template | How to use it |
|---|---|
page.about | An about page with rich text and image sections. |
page.contact | A page with a contact form. |
page.faq | A page with the FAQ section. |
page.shipping-returns | A page for delivery and returns information. |
| Blog and article | Blog grid and article pages with featured images. |
| 404 | A not found page with links to collections you choose. |
| Password | Shown while your store is password protected. Includes your logo, message, email signup and social icons. |
To use a template, create the page in Online Store > Pages and pick the template under Theme template.
12. Selling features
These features turn on automatically when your store is set up for them. No theme setting is needed.
| Feature | How to turn it on |
|---|---|
| Gift cards | Create a gift card product in Products > Gift cards. Customers can send it to a recipient with a name, message and delivery date. |
| Subscriptions | Install a subscription app. Purchase options appear on the product page. |
| Store pickup | Turn on local pickup for a location in Settings > Shipping and delivery. Pickup availability shows under the buy buttons. |
| Installments | Turn on Shop Pay Installments in Settings > Payments. A message shows under the price. |
| Unit prices | Add a unit price to a variant in the product editor. It shows next to the price and in the cart. |
| Multiple currencies | Add markets and currencies in Settings > Markets. Prices convert automatically. |
13. Apps and Custom Liquid
- App blocks: apps built for Online Store 2.0 add blocks you can place in the Product information section or as their own sections.
- App embeds: turn them on in the theme editor under App embeds.
- Custom Liquid: add the Custom Liquid section anywhere to paste your own Liquid or HTML.
14. Performance and accessibility tips
- Upload images at about 2000 to 2400 px wide. Shopify resizes them for each screen automatically.
- Add alt text to images in Content > Files or in the product editor, so screen readers can describe them.
- Keep enough contrast between text and background colors, especially on the accent color.
- Each app adds code to your store. Remove apps you no longer use.
15. Troubleshooting
The mega menu shows a plain link
The menu item has no nested links. Nest second level links under it in Content > Menus.
Team chips or product details do not show
Check that the metafield definitions use the exact keys in section 6 and that the product has values.
The country or language selector does not show
Your store sells to one country or has one language. Add another in Markets or Languages.
Follow on Shop does not show
Turn on Shop Pay in Settings > Payments.
Filters only show availability and price
Add more filters in the Search & Discovery app.
How do I update the theme?
When a new version is released, Shopify shows an update notice in Online Store > Themes. Updating adds a new copy of the theme with your settings, so you can check it before you publish.
16. Changelog and credits
Changelog
- 1.0.0 (2026): first release.
Credits
- Demo photos: Shopify Burst, free for commercial use. Demo images are not included with the theme.
- Team names, brands and products in the demo store are fictional.