XenonTheme guide Get support

Theme settings

Theme settings apply across your whole store. In the theme editor, click the gear icon to open them. This chapter explains each group; the settings reference lists every setting with its choices and default.

Logo and favicon

  • Logo: shown in the header, on the password page and on gift cards. Without a logo, your store name shows instead.
  • Logo width and Logo width on mobile: the logo's width in pixels. Its height follows its own shape.
  • Favicon: the icon in browser tabs and bookmarks.

The footer can show a different logo, for example a light version for a dark footer. See Header and footer.

Colors

Color schemes. Xenon has five color schemes. Each sets a Background, Text, Button, Button label and Border color. Sections and blocks choose a scheme in their own Color scheme setting. See Getting started for where each scheme is used.

You can add more schemes, for example a green one for the WhatsApp button.

Status colors:

  • In stock, Supplier stock and Unavailable color the stock labels.
  • Sale price colors prices that are below the compare-at price.

They're meant for light color schemes. Choose colors with enough contrast against your background.

Typography

  • Heading font: headings, and the names of sections and blocks.
  • Body font: everything else.

Fonts come from Shopify's font library. Xenon loads their bold, italic and bold italic styles, so text you format in the editor shows correctly.

Layout

  • Page width: the widest the page content gets on large screens.
  • Corner radius: how rounded buttons and fields are. 0 gives square corners.

Breadcrumbs show shoppers where they are, for example Home / Laptop batteries / Asus C41N1901. On a product page, the middle step is the collection the shopper came from.

  • Collections to skip: collections that are for merchandising rather than browsing, like "Featured" or "New arrivals", make poor breadcrumbs. A product never shows a collection whose handle contains one of these words. Your all and frontpage collections are always skipped.
  • Shorten collection titles at a dash: shows "Laptop batteries – Restore your runtime" as "Laptop batteries".

Each page template turns breadcrumbs on or off with its own Show breadcrumbs setting.

Store details

Your contact details, used in the footer, on your contact page and in the information Xenon gives search engines:

  • Trading name: the name shoppers know you by, if it differs from your Shopify store name.
  • Legal name: your company's registered name, for search engines.
  • Phone, Email, Address and Opening hours.
  • WhatsApp number: with its country code, for example +1 212 555 0100. It's used by the footer, the contact page and the WhatsApp button.

Leave a field blank to use the matching detail from your store's settings in Settings > Store details.

Social media

Add the link to each profile you have: Facebook, Instagram, X, YouTube, TikTok, Pinterest and LinkedIn. Each one shows as an icon in the footer's Social media icons block, and is listed in the information Xenon gives search engines. Leave a field blank to hide that icon.

Product cards

Product cards show your products in grids: collections, search results, product grids and recommendations.

  • Image ratio: Square or Portrait keep every card the same size. Natural shows each image at its own shape.

  • Image fit: Show whole image fits the image inside the frame; Fill frame crops it to fill the frame.

  • Show second image on hover: shows the product's second image when a shopper points at the card.

  • Show vendor, Show part number, Show condition badge and Show stock label: choose what each card shows.

  • Show product summary: a short line under the title, such as "6-core CPU · 16GB · 512GB SSD". It comes from a product metafield, custom.summary by default; set another in Summary metafield. See Set up your product data.

  • Show add to cart button: adds a button to each card.

    Product The button
    In stock, with one variant Add to cart, without leaving the page
    With options, a subscription or a gift card Choose options, which opens the product page
    Sold out, with a request page set Ask about this part
    Sold out, without a request page Sold out
  • Open product options in a quick view: with this on, Choose options opens a window over the page, with the product's images, options, price, stock and Add to cart. Shoppers choose and add without leaving the collection or search page. It needs Show add to cart button on.

Titles always show in full, however long.

Part numbers, Product condition and Stock source

These three groups decide where Xenon finds part numbers, condition and stock information. Set up your product data explains them, with examples.

Stock source also holds the Request page: the page shoppers go to when they ask about a sold-out product or a part you don't list. See Contact page and part requests.

Cart

  • Cart type: Drawer opens a panel from the side when a shopper adds a product. Page goes to the cart page.
  • Free shipping threshold: shows a bar telling shoppers how much more to spend for free shipping. Enter the amount in your store's currency; shoppers paying in another currency see it converted. Set it to 0 to hide the bar.
  • Show order note: lets shoppers add a note to their order on the cart page.
  • Show accelerated checkout buttons in the drawer: shows buttons like Shop Pay in the cart drawer, when they're set up in Settings > Payments.

See Cart.

  • Enable predictive search: shows live results as shoppers type in a search field.
  • Show vendor in results and Show price in results: what each live result shows.
  • Search products only: leaves pages and blog posts out of search results.

See Collections and search.

WhatsApp

A floating button that opens a WhatsApp chat with your store.

  1. Enter your WhatsApp number in Theme settings > Store details.
  2. Turn on Theme settings > WhatsApp > Show WhatsApp button.

The button needs both. Its other settings:

  • Button label: the button's text. On phones, only the icon shows.
  • Message: the message typed in for the shopper, who can change it before sending. The default is "Hi [your store name], I have a question."
  • Add the product to the message on product pages: adds the product's name and link, so you know what the shopper is asking about.
  • Position: Right or Left.
  • Color scheme: WhatsApp green isn't one of the default schemes. To use it, add a green scheme in Theme settings > Colors and choose it here.