> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/theme-settings/general.md).

# General

General settings define your store’s foundation. Elements like corner roundness, width, and scroll behavior apply globally by default, though individual sections can override them.

{% hint style="info" %}
**Where to find it:** In the theme editor (**Customize**), go to **Theme settings > General.**
{% endhint %}

### 1. Global style: Main corner

The only thing you need to set for **Global style** is **Main corner**. It controls how rounded the edges look on buttons, product cards, image frames, and banners across your entire store.

<figure><img src="https://1411897219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2FiQwGGRoMKv1J3LpdlJNR%2Fgeneral-corner-radius.webp?alt=media&#x26;token=8fb3c1c0-22e3-4804-b5c6-af2f0c2d1eeb" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="120.37109375">Value</th><th width="219.98046875">Name</th><th>Best for</th></tr></thead><tbody><tr><td>0px</td><td>Square corners</td><td>Minimal, editorial, or luxury brands</td></tr><tr><td>10px</td><td>Slightly rounded</td><td>Clean and modern; suits most stores</td></tr><tr><td>20px</td><td>Noticeably rounded</td><td>Lifestyle, wellness, or friendly brands</td></tr><tr><td>30px</td><td>Grand curves</td><td>Playful, bold, or youth-oriented brands</td></tr></tbody></table>

The accordion below explains how the Main corner setting acts as the foundation for your entire theme. Understanding this system will help you make informed choices and easily fix any layout inconsistencies.

<details>

<summary>How the <strong>Main corner</strong> affects individual sections and blocks</summary>

The value you set in the **Main corner setting** serves as your exact baseline and is applied by default to all new elements in your store.

Once you have selected your Main corner value, you can **customize the corner radius for any specific section or block**. The options will automatically scale the radius value downward relative to your main corner.

You can adjust corner radius across:

* **Theme Settings:** Section, Drawers, Product card, and more
* **Individual sections and blocks:** Banner, Slideshow, and various other theme elements. The majority of sections and blocks support this setting.

Across Theme Settings, section settings, and block settings, the corner radius setting offers these options:

<figure><img src="https://1411897219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2Fsywo3SS5kypk2SFe2fMn%2Fgeneral-corner-radius-individual-settings.webp?alt=media&#x26;token=a085a29e-88eb-4ee1-9983-29b184703cde" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="160.015625">Option</th><th>What it means</th></tr></thead><tbody><tr><td><strong>Main corner</strong></td><td>Matches the main corner value exactly</td></tr><tr><td><strong>Small</strong></td><td>A reduced value derived from the main corner, scaled to suit smaller elements</td></tr><tr><td><strong>Extra small</strong></td><td>An even smaller value, intended for tight UI elements</td></tr><tr><td><strong>None</strong></td><td>Forces square corners on that element regardless of the main setting</td></tr><tr><td><strong>Custom</strong></td><td>Set a specific pixel value for that element only</td></tr></tbody></table>

Here is how the main corner interacts with different corner radius sizes across layers, and how **Small** and **Extra small** scales adapt based on that main value.

<figure><img src="https://1411897219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2FmXzxQvMcWcF1HXPqdgfg%2Fgeneral-corner-radius-demo.webp?alt=media&#x26;token=c19e20a7-fb57-4f5d-9d4b-17914eb805dd" alt=""><figcaption></figcaption></figure>

This ensures that your corner values always stay in perfect proportion across your entire store, preventing individual elements from looking misaligned.

</details>

### 2. Container width

Controls how much of the screen your content fills. Four types are available: **Full width**, **Standard**, **Wide**, and **Narrow**. The first three can be set globally here and overridden per section. Narrow is only available at the section level.

<figure><img src="https://1411897219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2F3DXPqnsW4TybN5LgKJeI%2Fgeneral-container-width-demo.webp?alt=media&#x26;token=8c040355-30ab-41de-a0ce-4efe7846114c" alt=""><figcaption></figcaption></figure>

Set a default here and every new section you add will inherit it. If a specific section needs a different width, open that section's settings and change it there – the global default won't be affected.

<table><thead><tr><th width="150.38671875">Setting</th><th width="194.68359375">Range</th><th>When to use</th></tr></thead><tbody><tr><td><strong>Standard</strong></td><td>1200px to 2160px</td><td>The go-to for most pages. Content is centered with balanced space on both sides, keeping things comfortable on desktop and large screens alike.</td></tr><tr><td><strong>Wide</strong></td><td>80% to 90% of viewport</td><td>Use this when you want content to scale with the browser window. A good fit for large image sections, banners, or comparison tables that need more room to breathe.</td></tr><tr><td><strong>Narrow</strong></td><td>600px to 800px</td><td>Best for reading-focused content. The tighter column reduces line length and keeps readers' eyes from wandering. Ideal for blog posts, policy pages, and long-form FAQs.</td></tr></tbody></table>

{% hint style="info" %}
**Narrow** isn't available in the default options. You can only apply it per section.

It's the right choice for article or editorial content, since it keeps line lengths between 60 and 75 characters, where text is easiest to read.
{% endhint %}

### 3. Effects

Controls the motion and interaction effects applied across your store to add polish and depth without getting in the way of the browsing experience.

Every effect can be toggled or adjusted independently, so you can dial in exactly how much movement fits your brand.

#### 3.1. Reduce motion

Disables all motion and interaction effects across the store. When checked, the remaining effect settings below are hidden and deactivated. This is useful for improving accessibility for visitors who prefer reduced motion.

#### 3.2. Custom cursor

Replaces the default cursor with a circle that changes color based on the background and color scheme. The cursor also adapts its shape and style depending on the interactive element underneath, for example, showing a directional indicator over slider controls or a grab handle over draggable areas.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2FdOuHeh4iqZaQEs0PLuly%2Fcustom-cursor.mp4?alt=media&token=d25520cd-0c86-4838-9241-402df8707d50%3E>" %}

#### 3.3. Magnetic effect

Applies a subtle magnetic pull to buttons and interactive elements when the cursor approaches them.

#### 3.4. Smooth scroll

Makes page scrolling feel fluid and natural rather than abrupt or mechanical. The effect gives the overall browsing experience a more polished, considered quality.

Works especially well for stores with rich visual content, animations, or storytelling layouts where guiding the visitor through each section at a gentle pace is part of the design intent.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2FOqBlTXyxMs84QXFL1Ku7%2Fsmooth-scroll.mp4?alt=media&token=a7c15235-082e-4844-b010-bb1cdda664ea>" %}

#### 3.5. Page transition

Adds a smooth transition animation between pages instead of an abrupt load. The effect makes navigation feel more fluid and refined.

Works especially well for brands where the browsing experience is part of the impression such as fashion, lifestyle, portfolio, or any store aiming for a more considered, immersive feel.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2FmHznSfCU6La3FAvavEPi%2Fpage-transition.mp4?alt=media&token=349f801e-2f5c-48af-98e7-6e09eb9d2fa4>" %}

{% hint style="warning" %}
On a slow-loading store, the fade makes the wait more noticeable. If your pages take more than 1.5 seconds to load, skip this setting.
{% endhint %}

#### 3.6. Bottom blur overlay

Creates a soft blur effect at the bottom of the page, giving the content a smoother transition as visitors scroll toward the footer. The subtle blur adds a sense of depth and polish to the overall layout.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2FBXqV9kmFQbWa2UTmEHI2%2Fbottom-blur.mp4?alt=media&token=326168b5-8241-44ac-8a4e-ed64552c5e95>" %}

#### 3.7. Animation on scroll

Adds a subtle fade-in or slide-up animation to elements as they enter the viewport during scrolling.

#### 3.8. Parallax

Controls the intensity of the parallax scrolling effect, from **20%** to **40%**. A higher value creates a more pronounced difference in movement between layers as the page scrolls, adding depth and visual energy to the layout.

Individual parallax can also be toggled per element, giving you precise control over which sections use the effect.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2FISlXol6zEbkFI35MYoM8%2Fparallax.mp4?alt=media&token=df149780-a374-48ce-98de-7c893b234940>" %}

{% hint style="warning" %}
**The effect crops your background image as it shifts.**

Before going above 20%, check that your images have enough padding around the focal point so nothing important disappears mid-scroll.
{% endhint %}