Getting started

This chapter takes you from installing Xenon to a store that's ready to publish. Plan on about an hour, plus the time to add your own photos.

Add Xenon to your store

1. Add Xenon from the Shopify Theme Store. It arrives in Online Store > Themes, in your theme library, unpublished. Your current theme stays live while you work.
2. Click Customize to open the theme editor. Changes you make there are saved to Xenon only, and shoppers don't see them until you publish.
3. Use the theme editor's preview to check your store on desktop and on a phone. You can also preview Xenon from Online Store > Themes, and share the preview link with others.

Choose a style

Xenon comes in three styles. You choose one when you add the theme:

• Xenon, for parts stores: dense product grids, part numbers on every card, and a home page for parts, brands and part requests.
• Xeno, for refurbished laptop and PC stores: warmer colors, different fonts, condition grades and a specs line on every card, and a home page about how laptops are graded and tested.
• Xeny, for electronic component stores: a green and white palette, compact type, part numbers and a specs line on every card, photos fitted rather than cropped, and a home page that leads with categories.

All three have every feature in this guide; the style decides how your store starts out. You can change any of it afterwards.

What you start with

The Xenon style installs with a home page that shows what the theme does:

1. A Slideshow with three slides.
2. Four Product grid sections: "Featured products", "Laptop parts", "New arrivals" and "Laptops and PCs". They show placeholder cards until you choose a collection for each.
3. A Logo list of the brands you stock, showing a logo icon and a name until you upload logos.
4. A Multicolumn section with six reasons to buy from you.
5. A Call to action band, "Looking for a specific part?", that leads to your part request form.

The Xeno style starts with a slideshow, a "How we grade" section, a grid of refurbished laptops, collections by what customers need, a section about testing, best-value laptops, brands, an FAQ and a newsletter signup.

The Xeny style starts with a short slideshow, six categories, a grid of parts ready to ship, six reasons to order from you, new arrivals, the manufacturers you stock, a part request band, an FAQ and a newsletter signup. Its product page puts the part number first, and adds "Often bought together" above similar parts.

Change the headings and text to suit your store, or remove sections you don't need. The other templates come set up too: the product page has all its blocks in place, and the contact page has six request types.

Set up your store, step by step

1. Logo and favicon

Upload your logo in Theme settings > Logo and favicon > Logo, and set Logo width and Logo width on mobile. Landscape, square and portrait logos all work; the height follows the width you set.

Add a Favicon, the small icon in browser tabs. A square image of at least 32 x 32px works best.

2. Colors

Xenon uses five color schemes, set in Theme settings > Colors. Each scheme sets a background, text, button, button label and border color. Sections and blocks each pick a scheme, so changing a scheme changes every place that uses it.

Keep enough contrast between each background and its text, so everything stays easy to read.

The Status colors in the same place color the stock labels and sale prices. The words always show with them, so shoppers who can't tell colors apart still see the stock state.

3. Fonts

Choose a Heading font and a Body font in Theme settings > Typography. Both come from Shopify's font library, and Xenon loads their bold and italic styles for you.

4. Store details

Fill in Theme settings > Store details: your trading name, phone, email, address, opening hours and WhatsApp number. Xenon shows them in the footer and on your contact page, and gives them to search engines.

Leave a field blank to use the matching detail from your Shopify store settings. Enter the WhatsApp number with its country code, for example +1 212 555 0100.

5. Menus

Menus are set up in your Shopify admin, under Content > Menus.

• Main menu: the menu across the top of your store. Drag items under another item to make dropdowns, up to three levels deep. With Header > Main menu style set to Mega menu, second-level items with their own children become columns in a large panel.
• Footer menu: the links in the footer.

Xenon uses your store's main-menu and footer menus to start with. To use other menus, choose them in Header > Main menu, Header > Secondary menu and the footer's Footer menu block.

6. Your request page

Xenon's request hub lets shoppers ask about parts you don't list, or about products that are out of stock. To turn it on:

1. In your Shopify admin, go to Online Store > Pages and open your contact page, or add one.
2. Under Theme template, choose contact.
3. In the theme editor, choose that page in Theme settings > Stock source > Request page.

Out-of-stock products then show Ask about this part instead of Sold out, and search pages with no results offer to find the part for you. See Contact page and part requests.

7. Your product data

Xenon shows part numbers, condition badges and stock sources from data you already have: SKUs and tags. See Set up your product data to check that your products show what you expect, and to add specifications and compatibility lists.

8. The home page

• Slideshow: add an image to each slide. Images of at least 1920px wide look sharp on large screens. Each slide can also have a separate Mobile image.
• Product grid: choose a Collection in each grid.
• Logo list: upload a logo for each brand. Use logos only with the brand owner's permission.

9. Filters

Shoppers can filter collections and search results by availability, price, brand, type and more. You choose the filters in Shopify's free Search and Discovery app. Xenon shows whatever filters you set up there.

10. Cart

In Theme settings > Cart, choose whether adding to the cart opens a Drawer or goes to the cart Page. To show shoppers how far they are from free shipping, set a Free shipping threshold in your store's currency. The bar is a message only: create the free shipping rate itself in Settings > Shipping and delivery.

11. Social media

Add your profile links in Theme settings > Social media. Each one shows as an icon in the footer.

12. Publish

When you're happy with the preview, go to Online Store > Themes and click Publish on Xenon.

Updating Xenon

When a new version of Xenon is released, Shopify shows it in Online Store > Themes. Updating adds the new version to your theme library with your settings and content carried over, so you can check it before you publish it. Changes you made to the theme's code aren't carried over.