# Theme settings

Foxify theme settings control the overall look and feel of your Foxify pages. These settings apply globally across your **Foxify pages.**

You can manage and edit theme settings either from the **app dashboard** or directly within the **page editor**.

## How to access Theme settings

You can access **Foxify theme settings** in two ways:

{% hint style="success" %}

1. **From the app dashboard**:

Navigate to **Settings > Theme settings** in the left sidebar.
{% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Fhpac4CpHzS2iP8Xj6oN5%2Fimage.png?alt=media&#x26;token=9b2c347f-d59d-4aa7-b23d-66fc42caf246" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
2\. **From within the page editor**:

* Open the **Theme settings** tab at the top of the right-hand panel in the page editor.
  {% endhint %}

<div><figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FkJlgMY80cBEsKFITrWMU%2Fimage.png?alt=media&#x26;token=707b32b5-3089-4ad9-afe4-f189d273b377" alt=""><figcaption></figcaption></figure> <figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FwubFhH7X4MokIi2055Cw%2Fimage.png?alt=media&#x26;token=ce0dc9c8-0209-4ea7-b64e-804dc583cff0" alt=""><figcaption></figcaption></figure></div>

## How to edit Theme settings&#x20;

**Foxify theme settings** include several customization options that impact your entire store’s appearance.&#x20;

{% hint style="info" %}
These settings include:

1. [#layout-settings](#layout-settings "mention")
2. [#product-cards](#product-cards "mention")
3. [#collection-cards](#collection-cards "mention")
4. [#article-cards](#article-cards "mention")
5. [#variant-picker](#variant-picker "mention")
6. [#currency-format](#currency-format "mention")
7. [#custom-codes](#custom-codes "mention")
   {% endhint %}

### Layout settings

* **Fixed container width**: Adjusts the width of your page content across all pages. Drag the slider to set a specific width.

{% hint style="info" %}
This setting applies to the **Fixed width** option of the section.

![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F1pbfuHCPaZcCvDL2F5Gh%2Fimage.png?alt=media\&token=af01cf6f-d9b3-41aa-812d-184d5838df66)<br>

[#change-the-section-container-width](https://docs.foxecom.com/foxify-app/foxstudio/page-customization/edit-a-section#change-the-section-container-width "mention")
{% endhint %}

* **Narrow container width**: Allows you to set a narrower content width for sections or blocks that you want to be more compact.

{% hint style="info" %}
This setting is for the [Legacy editor](https://docs.foxecom.com/foxify-app/legacy-editor) *(deprecated).*

![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FTg6H4ivLBPJhyvKiwcKJ%2Fimage.png?alt=media\&token=de12d148-d8af-4cae-aee5-b0aa4852c487)
{% endhint %}

* **Vertical space between sections**: Adjust the space between sections to create more breathing room or tighter layouts, depending on your design preferences. This setting is for the [Legacy editor](https://docs.foxecom.com/foxify-app/legacy-editor) *(deprecated).*

### Product cards

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Ftadg82Ek3JcMNcu9Fxmd%2Fimage.png?alt=media&#x26;token=290cadfe-b547-40cc-952f-2845cf1f43d6" alt=""><figcaption></figcaption></figure>

* **Card style**: Choose the style for displaying product cards based on your design preferences.
* **Display price:** Set the price display option to show the **default price (min price)** or **maximum price** for variant-based products.
* **Text align:** Control the alignment of product information like title, price, and description (left, center, or right).
* **Image ratio**: Control how product images are displayed inside the cards.
* **Show second image on hover**: Display a second image of the product when customer hover over the card. This is especially useful for showcasing the product in a different angle or feature.
* **Placeholder image:** Select a placeholder image to show when no product image is available.
* **Other addons**: Enable other addons to show on product cards

{% tabs %}
{% tab title="Product vendor" %}
Display the **vendor name** (brand or creator) on the product card, which can add trust and help differentiate your products.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FZeBkN3cu4QfVX9e7wLl4%2Fimage.png?alt=media&#x26;token=8e0a516f-ce29-4378-8c7a-3e59422ad429" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FCnc8pKDOnwlUYSFfmPkJ%2Fimage.png?alt=media&#x26;token=cfec431f-bd1d-4bbd-9efa-192915470a2b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Quick add button" %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FL0kIknpstWWFdEUmuval%2Fimage.png?alt=media&#x26;token=9d9a3512-a622-4a24-9e37-8be1ec76bcbc" alt=""><figcaption></figcaption></figure>

Enable a **Quick add button** on product cards for faster add-to-cart functionality without leaving the page.

* If the product has variants → The **Quick add** button becomes the **Select options** button. Customer must enter the product page to select the variant before adding to the cart.

{% hint style="info" %}
:bulb: **Tip**: Use **Product Quick View** extension to allow customers to see product details in a popup without leaving the current page

*Learn more:* [quick-view](https://docs.foxecom.com/foxify-app/page-management/app-extensions/quick-view "mention")

The position of the Quick view button depends on the Product card style you're using.
{% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FzNyEQ7XTTpXH1aIXZqjj%2Fimage.png?alt=media&#x26;token=56f22e04-a3bb-4c2c-b4c3-390bf15cd013" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F4RsAMsCBh2y1JzM156e8%2Fimage.png?alt=media&#x26;token=2139a594-999c-48b7-813c-2ea9a5c0e2e9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Sold out badge" %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F4AFGUuF7yhdeSTYiJW7m%2Fimage.png?alt=media&#x26;token=66d61e8c-d312-4f7e-aef3-b1f26cddf024" alt=""><figcaption></figcaption></figure>

Show a **sold-out badge** on products that are out of stock, helping manage customer expectations and avoid frustration.

* When the item is out of stock, the [Quick add button](#quick-add-button) will be hidden.
  {% endtab %}

{% tab title="Sale badge" %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FV2XFsDTkwMF5LAL9qEu1%2Fimage.png?alt=media&#x26;token=b4aa2e3b-4b3b-469e-85d9-556d83dbd0de" alt=""><figcaption></figcaption></figure>

Display a **sale badge** to highlight discounted products. You can choose between:

* **Percentage**
* **Fixed price**&#x20;
  {% endtab %}
  {% endtabs %}

{% hint style="success" %}
:sparkles: Want to change the label of the quick add button or badges?&#x20;

Go to Foxify **Translation > Default Foxify theme content**.

![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FEnHjY5HHsNBKM9VXNa0Z%2Fimage.png?alt=media\&token=a4accd27-43ea-4773-94a5-6125c7aed799)
{% endhint %}

* **Card radius**: Adjust the card radius to round the corners of your product cards. Set it to **0px** for sharp edges.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Fcx39pFdKViyeGsYHkrYb%2Fimage.png?alt=media&#x26;token=78e1251c-a6cc-4a74-a325-ba6ab0ce8ae1" alt=""><figcaption></figcaption></figure>

* **Additional content:** Add custom content to appear at the **bottom of the product card.**

{% hint style="info" %}
The typography of the product info will follow the settings you've defined in [global-styles](https://docs.foxecom.com/foxify-app/page-management/global-styles "mention")

This ensures consistent styling across your site.

:pushpin: If you're using a premade template, the custom content might be affected by specific code tailored for that template.

* For **quick assistance** or custom code issues, feel free to contact us via **in-app live chat**. We're happy to help! :love\_letter:
  {% endhint %}

### Collection cards

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F1IW3tuEbecu4jKXHQzeu%2Fimage.png?alt=media&#x26;token=0060d85f-8cb0-4307-8625-c49f80a6639c" alt=""><figcaption></figcaption></figure>

* Customize the **collection cards** appearance, including the **display style**, **text alignment**, and **background color**.
* **Card radius**: Adjust the border radius of collection cards to round or sharpen the corners as per your preference.

### Article cards

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FFk60Doxhn9z2qxSvbnfL%2Fimage.png?alt=media&#x26;token=c16362da-dfe1-4db7-b4aa-4466d06f4a7d" alt=""><figcaption></figcaption></figure>

Set how blog article cards display.

<details>

<summary>Display options <span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></summary>

* **Show blog**: Display the blog name that the article belongs to.
* **Show published date**: Display when the article was published.
* **Show excerpt**: Show a preview snippet of the article content.
* **Show read more link**: Add a clickable 'Read more' button that directs customer to the blog post.

:writing\_hand: [*See how to add and manage blog posts in Shopify*](https://help.shopify.com/manual/online-store/blogs/writing-blogs/working-with-blog-posts)

</details>

### Variant picker

Define a global setting for your variant picker. You can still change it specifically on the template.

:point\_right: See more: [#product-information](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/product-details#product-information "mention")

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F9IGjwCAnDvEPItJSREbP%2Fimage.png?alt=media&#x26;token=3b0d4a55-262a-49c4-ac9d-6ceef49904ad" alt=""><figcaption></figcaption></figure>

### Currency format

Define whether to show the currency format (EUR, USD, AUD, etc.) in your product prices.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FcO5AlQLURXRrumA4dPJg%2Fimage.png?alt=media&#x26;token=9c191f49-f40a-4cf2-a074-3e65b33f0dca" alt=""><figcaption></figcaption></figure>

### Custom codes

Add custom **CSS**, **JavaScript**, or other code snippets for advanced customization. This allows developers to inject additional styling or functionality.

{% hint style="danger" %}
Avoid this section if you're not comfortable with custom coding. Always backup before making changes, and consider consulting a developer for complex customizations.
{% endhint %}

{% hint style="info" %}
Troubleshooting:

**If the page breaks after adding custom code:**

1. Remove the most recent code addition
2. Check for syntax errors (missing semicolons, brackets, etc.)
3. Validate your CSS using online CSS validators
4. Clear your browser cache and refresh
5. Contact us if issues persist
   {% endhint %}