> 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/faqs/generic.md). # Generic ### 1. Getting started
How do I access the Theme Editor? From your Shopify Admin, go to **Online Store → Themes**, find Arctos in your theme list, and click **Customize**. This opens the Theme Editor (also called "Customize"), where you can edit every page, section, and block in your store.
What's the difference between Theme Settings and Section Settings? **Theme Settings** (the gear icon at the bottom of the sidebar) are global — changes you make apply to your entire store. **Section Settings** only affect one specific section on one specific page. Think of Theme Settings as your store-wide defaults, and Section Settings as per-section overrides.
How do I preview my store before publishing changes? Changes you make in the Theme Editor are saved to a draft — they don't go live until you click Save. You can also use the Preview button (the eye icon) to open a live preview of your current changes in a new browser tab without publishing them.
Can I have multiple theme versions and switch between them? Yes. You can duplicate your Arctos theme from **Online Store → Themes → Actions → Duplicate**. This creates a copy you can edit freely without affecting your live store. When you're ready, click **Publish** on the new version to make it live.
How do I create a custom template for a specific product or page? In the Theme Editor, click the template selector dropdown at the top. At the bottom of the dropdown, click **Create template**. Give it a name, then assign it to your specific product or collection from your **Shopify Admin → Products** (or Collections) by selecting the template in the **Theme template** field. {% hint style="info" %} **Note:** Custom templates let you create completely different layouts for specific products, collections, or pages — without affecting your store-wide defaults. {% endhint %}
I made changes but they aren't showing on my live store. Why? You need to click **Save** in the Theme Editor to publish your changes. If you've saved but still don't see the changes, try doing a hard refresh in your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to clear your browser's cached version.
Can I undo changes I've made in the Theme Editor? The Theme Editor does not have a multi-step undo history. However, you can click **Discard changes** (before saving) to revert everything back to the last saved version. This is another reason to work on a duplicated theme when making major changes.
*** ### 2. Layout & design
How do I control how wide my content is on desktop? Go to **Theme Settings → General → Container width** and set your **Standard**, **Wide**, and **Narrow** values. These are used by sections across your store. You can then choose which width to apply per section using the **Container width** setting inside each section.
Why does my section look different on mobile than on desktop? Arctos is fully responsive — it automatically adjusts layout, container widths, and font sizes for mobile. However, you have precise control: most settings (Gap, Padding, Font size, Direction) have a **Custom on mobile** toggle that lets you define separate mobile values. Enable it to override the mobile layout independently.
How do I add more space between sections? Go to **Theme Settings → Section → Section gap** and increase the value. The default is 4px — increasing this to 40–80px creates a cleaner, more spacious layout. You can also control spacing per-section using the **Padding** setting inside each section's Spacing settings.
How do I make a section fullscreen (hero-style)? Open the section in the Theme Editor and enable **Fullscreen** in the Layout settings. This stretches the section to fill the full browser window height (100vh). Pair this with a background image or video and a Media overlay for best results.
How do I add a parallax effect to a background image? 1. Open your section and enable **Custom background**. 2. Set **Background type** to *Media* and upload an image. 3. Enable **Enable parallax effect** at the bottom of the Background settings. Adjust the global parallax speed in **Theme Settings → General → Parallax strength**.
How do I change the corner radius of buttons and cards? Go to **Theme Settings → General → Main corner** to set the global corner radius. This applies to buttons, cards, inputs, and section containers by default. Individual elements (like section containers or product cards) have their own **Corner radius** overrides if you need finer control.
Can I apply a different color scheme to just one section? Yes. Open the section in the Theme Editor and look for the **Color scheme** setting. Disable **Inherit color scheme** to reveal a dropdown where you can pick any color scheme you've defined in **Theme Settings → Colors**.
My two side-by-side blocks are stacking vertically on mobile. How do I keep them side by side? Open the section's **Inner content layout** settings. Find **Custom on mobile** and enable it. Set **Mobile Direction** to *Horizontal*. Note that on very narrow screens (375px), a horizontal layout may become cramped — test at 375px to confirm it still looks clear.
*** ### 3. Products & collections
How do I change how many products appear per page on a collection? Open the **Collection** template in the Theme Editor, click the **Collection Listing** section, and find the **Products per page** setting. Adjust the number between 3 and 30. A range of 12–16 works well for most stores.
How do I show a second image when hovering over a product card? Go to **Theme Settings → Product card → Hover interaction** and select **Reveal second image**. Then make sure each product in your Shopify Admin has at least two images uploaded — the second image will appear on hover automatically.
How do I display color swatches on my product cards? * Go to **Theme Settings → Product swatches → Product card** and enable **Enable color swatches on cards**. * Set **Swatches type** to *Custom color* and configure your color list (one color name and hex code per line, e.g., `Navy Blue: #1a1a2e`). * Set the **Trigger** to match your product option name exactly (default is `Color`).
How do I add a "Sale" or "Sold Out" badge to product cards? Go to **Theme Settings → Product card → Product badges**. Enable **Show sale badge** and/or **Show sold out badge**. For sale badges, you can choose whether to display the badge as a text label ("Sale"), a percentage off ("-20%"), or a fixed amount.
How do I show a Quick View button on product cards? Go to **Theme Settings → Product card → Quick actions** and make sure **Enable quick view** is toggled on. Customers will see a Quick View button on hover, which opens the product in a slide-in panel without leaving the current page.
How do I add a featured image or video to a collection header? Open the collection in the Theme Editor and click the **Page Header** section. Enable **Show collection image** — this automatically pulls the cover image assigned to the collection in your Shopify Admin. Alternatively, enable **Custom background** and choose **Media** as the background type to upload a custom image or video specific to that header.
How do I give one collection a completely different layout? Create a new Collection template in the Theme Editor (template selector → **Create template**), customize it however you want, then assign it to that collection from **Shopify Admin → Collections → select collection → Theme template**. {% hint style="success" %} **Tip:** Custom collection templates are ideal for seasonal promotions, brand collaborations, or editorial collections where the standard grid layout doesn't match the creative direction. {% endhint %}
How do I control the aspect ratio of product images? Go to **Theme Settings → Product card → Image ratio**. Choose between *4:5 (portrait)*, *1:1 (square)*, or *5:7 (tall portrait)*. Use a consistent ratio across all your product photography for a clean, uniform grid.
*** ### 4. Cart & checkout
How do I switch from a cart drawer to a full cart page? Go to **Theme Settings → Cart → Cart type** and switch from *Drawers* to *Page*. Customers will be taken to `/cart` when they click the cart icon, rather than seeing a slide-in drawer.
How do I add a free shipping progress bar to the cart? Go to **Theme Settings → Cart → Free shipping bar**. Enable **Show free shipping bar** and set your **Free shipping goal** to the order value (in your store's currency) required to qualify for free shipping. The bar automatically appears in the cart drawer and updates as customers add items.
How do I show product recommendations in my cart? Go to **Theme Settings → Cart → Recommended products**. Use **Additional products** to manually select products to recommend, and set **Maximum products** to control how many are shown. These appear below the cart items in both the drawer and the cart page.
How do I add a discount code field to the cart? Go to **Theme Settings → Cart → Cart features** and enable **Discount field**. The input will appear inside the cart drawer and/or cart page, depending on your cart type.
How do I add an order notes field for customers? Go to **Theme Settings → Cart → Cart features** and enable **Order notes**. An open text field will appear in the cart where customers can leave special instructions for their order.
What appears on the cart page when it's empty? The **Cart empty** section handles the empty cart experience. Open the Cart template in the Theme Editor and click **Cart empty**. Enable **Show empty cart recommendations** to show products from a collection you specify in **Theme Settings → Cart → Empty cart recommendations → Collection**. {% hint style="success" icon="lightbulb" %} **Tip:** Always configure the empty cart experience. Leaving it with no content or recommendations means customers who arrive with an empty cart have no clear path forward — they're likely to leave your store entirely. {% endhint %}
How do I enable Apple Pay / Google Pay buttons in the cart? Go to **Theme Settings → Cart → Cart features** and enable **Accelerated checkout buttons**. This displays Shopify Pay, Apple Pay, and Google Pay buttons in the cart. Note: availability depends on which payment providers you have enabled in your Shopify Admin.
*** ### 5. Navigation & header
How do I set up my main navigation menu? Your menu is built in **Shopify Admin → Online Store → Navigation**. Create your menu with top-level items and sub-items (nested items create dropdowns). Then in the Theme Editor, open the **Header** section and confirm your primary menu is selected.
How do I make the header transparent over my hero image? In the Theme Editor, click **Header** in the sidebar, then find **Inside header**. Enable it and set **Type** to *Transparent*. Set **Active page** to target only the pages where you want transparency (e.g., Home page only). Set an **Inverse scheme** to ensure your navigation links stay readable against dark or colorful backgrounds.
How do I change my logo? Go to **Theme Settings → Logo and favicon → Logo** and upload your logo image. Upload a second version under **Logo inverse** — this is the alternate logo used when the header is transparent over a dark background. PNG format with a transparent background is recommended.
How do I add a mega menu with images? In the Theme Editor, open the **Header** section. Click **Add block** and select **Mega menu**. In the block settings, link it to a specific top-level menu item by entering the exact name of the link (it must match exactly). Then configure the columns, images, and featured links within the block.
How do I change the mobile header layout? In the **Header** settings, find **Mobile layout**. Choose from options like *Logo center, menu left* or *Logo left, menu right*. This controls where your logo and the hamburger menu icon appear on phones. {% hint style="success" %} **Tip:** * The most common mobile layout is *Logo center, menu right* — it places your brand front and center while keeping the navigation icon within easy reach of the right thumb. *** * Always check your header at 375px width after changing the mobile layout. Some logo/icon combinations can feel cramped on very narrow screens. {% endhint %}
How do I add a promotional banner above the header? In the Theme Editor, look for the **Announcement bar** section at the very top of the page layout (above the Header). Click it to add text, a link, and styling. It sits above the header and is visible on every page.
How do I add links to the footer? Add a **Menu** block to the **Footer** section in the Theme Editor. In the block settings, select a navigation menu you've built in **Shopify Admin → Online Store → Navigation**. You can add multiple Menu blocks to create multi-column footer navigation.