# Configure your theme settings

Theme settings control the overall look and feel across every Foxify page — card styles, currency formatting, variant pickers, and more — so you set it once and it stays consistent everywhere it's used.

## When to use this

Best fits for:

* **Making product cards consistent**, so prices, badges, and quick add buttons look the same in every product grid and carousel.
* **Lining up content across pages**, by setting one content width for all sections.
* **Changing store-wide behavior**, like showing currency codes for international shoppers or switching variant pickers from dropdowns to buttons.
* **Adding site-wide code**, like a tracking script that needs to run on every Foxify page.

### How is this different from similar features?

<Cards>
  <Card title="Theme settings" subtitle="Use this" description="Store-wide defaults for cards, layout width, variant pickers, and site-wide code." fields="subtitle,icon,image,title,description" />

  <Card title="Global styles" subtitle="Use instead if..." description="You want to set brand colors, fonts, and button styles." href="https://docs.foxecom.com/foxify-app/foxstudio/page-customization/global-styles" fields="subtitle,icon,image,title,description" />

  <Card title="Custom code modal" subtitle="Use instead if..." description="Your code should only apply to one page or template, not the whole site." href="https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/custom-codes" fields="subtitle,icon,image,title,description" />
</Cards>

## Open Theme settings

1. In the page editor, click the **•••** icon in the left sidebar.
2. Select **Theme settings**, or press **⌘,** (macOS) / **Ctrl+,** (Windows).

![](https://docs-assets.foxecom.app/foxify-app/0ca21138-37d1-42a6-a629-f2674eaf35e5.png)

<Hint type="info" title="Changes apply to every Foxify page">
  Theme settings affect all your Foxify pages at once. Preview a few different pages, like your home page and a collection page, after making changes.
</Hint>

## Layout

**Fixed container width** sets how wide your content is on every section that uses **Fixed width**. Drag the slider to set it. Learn more: [Change the section container width](https://docs.foxecom.com/foxify-app/foxstudio/page-customization/edit-a-section#change-the-section-container-width)

![](https://docs-assets.foxecom.app/foxify-app/84941773-a19f-4f53-a73c-b9f0bd7b7eb3.png)

## Product cards

Product cards show up wherever products are listed: collection pages, product grids, carousels, and recommendations.

![image](https://docs-assets.foxecom.app/foxify-app/image_zMcbb1p3.png)

<Table widths="30%">
  | Setting                        | How to choose                                                                                                                                                                                 |
  | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | **Card style**                 | Pick the style that fits your brand. For a fully custom layout, see [Product card](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/product-card).                                                              |
  | **Display price**              | For products with variants at different prices. **Default price** shows the lowest price, which looks more attractive. **Max price** avoids surprising shoppers when most variants cost more. |
  | **Image ratio**                | Choose a fixed ratio, like **Portrait** or **Square**, if your product photos come in different shapes. This keeps every card the same height.                                                |
  | **Show second image on hover** | Turn on if your products have a second photo worth seeing, like the back of a shirt or the product in use.                                                                                    |
  | **Text align**                 | Left works best for most grids. Center suits minimal, image-led designs.                                                                                                                      |
  | **Card radius**                | Round the card's corners — 0px for sharp edges                                                                                                                                                |
  | **Placeholder image**          | Shown when a product has no image. Use your logo or a branded image so empty cards don't look broken.                                                                                         |
  | **Additional content**         | Extra content at the bottom of each card.                                                                                                                                                     |
</Table>

#### Other addons

<Table widths="30%">
  | Setting              | What to know                                                                                                                                                                      |
  | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | **Quick add button** | Lets shoppers add to cart without leaving the page. For products with variants, it becomes **Select options** and opens the product page. It's hidden when a product is sold out. |
  | **Sale badge**       | **Percentage** ("-20%") works best for big discounts. **Fixed price** ("Save $10") works best for expensive products, where a dollar amount sounds bigger.                        |
  | **Sold out badge**   | Lets shoppers see right away which products are unavailable.                                                                                                                      |
  | **Product vendor**   | Shows the brand name. Useful if you sell several brands.                                                                                                                          |
</Table>

<Hint type="info">
  **Want shoppers to preview products in a pop-up?** Use the [Product quick view](https://docs.foxecom.com/foxify-app/integrations/foxify-extensions/product-quick-view) extension.
</Hint>

<Hint type="info">
  To change the text on the Quick add button or badge&#x73;**,** go to **Translation** > **Default Foxify theme content**. Learn more: [Translate Foxify's default wording](https://docs.foxecom.com/foxify-app/pages/translation#translate-foxify-s-default-wording)
</Hint>

## Collection cards

Collection cards show up in collection lists and grids.

![image](https://docs-assets.foxecom.app/foxify-app/image_K3gf0O88.png)

Set **Card style**, **Image ratio**, **Image radius**, **Background color**, and **Card radius**. Match the image ratio and radius to your product cards, so collection and product grids look like they belong together.

## Article cards

Article cards show up in blog post lists.

![image](https://docs-assets.foxecom.app/foxify-app/image_qMZWZP5O.png)

<Table widths="30%">
  | Setting                                               | What to show                                                                                                                      |
  | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
  | **Card style**                                        | Choose the display style for the article cards. For custom layout, see [Blog posts](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/blog-posts). |
  | **Show excerpt**                                      | Turn on to show a short preview of each article. Helps readers decide what to open.                                               |
  | **Show published date**                               | Turn on for news or seasonal content. Turn off for evergreen guides, so they don't look outdated.                                 |
  | **Show blog** and **Show read more link**             | Turn on if you have several blogs, or want a clear link to the full article.                                                      |
  | **Text align**, **Background color**, **Card radius** | Match these to your product and collection cards.                                                                                 |
</Table>

## Variant picker

Sets the default variant picker for all product pages. You can still change it on a specific product template. [Learn more](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/product-details#product-information)

![](https://docs-assets.foxecom.app/foxify-app/e014632b-2d3d-4a02-b8b5-5624d535bb32.png)



<Table widths="30%">
  | Setting                 | How to choose                                                                                                                                      |
  | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
  | **Picker type**         | **Buttons** show all options at once, best for products with a few options, like sizes S–XL. **Dropdown** saves space when there are many options. |
  | **Show selected value** | Turn on so shoppers can see which option they've picked, especially useful with buttons.                                                           |
</Table>

For color or image swatches, use the [Color swatches](https://docs.foxecom.com/foxify-app/integrations/foxify-extensions/color-swatches) extension.

## Currency format

**Show currency codes** adds the currency code after prices, like `$1.00 USD` instead of `$1.00`. Turn it on if you sell in several currencies, so international shoppers know exactly which currency they're paying in.

## Custom codes

Add **Custom CSS**, **Custom code before `</head>`**, or **Custom code before `</body>`**.

![](https://docs-assets.foxecom.app/foxify-app/ed05a91e-4604-4f98-bc04-9072fa7e3c07.png)

<Table widths="30%">
  | Field                | Use it for                                                            |
  | -------------------- | --------------------------------------------------------------------- |
  | **Custom CSS**       | Styles that should apply on every Foxify page.                        |
  | **Before `</head>`** | Scripts that need to load early, like analytics or verification tags. |
  | **Before `</body>`** | Scripts that can load after the page, like chat widgets.              |
</Table>

<Hint type="warning" title="This code runs on every Foxify page">
  Only use it if you're comfortable with code. Save a copy of your code before changing it. For code that only applies to one page or template, use **Custom codes modal** instead. Learn more: [Add custom code to your page](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/custom-codes)
</Hint>

## FAQs

#### Where do I access Theme settings?

From inside the page editor — click **•••** in the left sidebar, then select **Theme settings**.

#### Can I show color swatches instead of a dropdown for variants?

The built-in Picker type only offers Dropdown or Buttons. For swatches, use the [Color Swatches](page://531d4da5-bbf8-41c8-8672-65626927d42f) extension.

#### Where do I change the text on the Quick add button or badges?

Go to **Translation > Default Foxify theme content** — that's where Foxify's built-in labels live, separate from your page content.

#### What if my page breaks after adding custom code?

Remove the most recent code you added, check for syntax errors (missing semicolons or brackets), validate your CSS with an online validator, and clear your browser cache. Contact us if the issue persists.

## Related articles

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/page-customization/global-styles">
  Apply global styles across your store
</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/page-customization/edit-a-section">
  Edit a Section
</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements">
  Add and edit elements
</PageLink>