Configuring Global Settings Across Your Store Pages in the Theme Editor (OS 3.0)

Global settings in the Theme Editor (OS 3.0) is your central control panel for storefront-wide design. Changes made here apply consistently across every page of your online store, from your homepage to product and collection pages. 

This guide explains how to access Global settings, what each setting category controls, and how to use the latest configuration options to personalize your storefront.

Accessing Global Settings

To open Global settings in the Theme Editor:

1. From your SHOPLINE admin, go to Online Store > Design.
2. Locate your current theme and click the Design button to enter the Theme Editor.
3. In the left sidebar, click the Global Settings icon.

The Theme settings panel will appear, allowing you to configure settings for different sections based on your storefront needs. All changes made in this panel apply to the active theme across your entire store.

Customizing Colors and Typography

Component color

The Component color section lets you define the color palette for your storefront. You can choose from four preset color schemes, and customize the individual colors within each scheme to match your brand.

To configure your color schemes, select Component color under Theme settings. Then, choose the scheme you want to edit and adjust the individual color values within that scheme as needed.

Setting a Product Card Background Color

You can set an independent background color for product card containers across your storefront. This gives you greater control over how product cards appear against the surrounding page background, which is useful when your page background and card background need to be visually distinct.

To configure the card background color:

1. In the Theme Editor, click the Global Settings icon. to open Global settings.
2. Go to Color and select the scheme you want to edit.
3. Locate the Card background setting and choose your preferred color. 
4. Click Save to apply your changes.

The card background color follows this display priority:

• Media background color: Takes precedence and applies within the product image area when set.
• Card background color: Applies to the product card container when no media background color is configured.
• Default background: Applied when neither of the above is set. 

Typography

The Typography section controls the fonts used across your entire storefront. You can configure the following for both heading and body text:

• Font family: Choose a typeface from the available font library.
• Font size: Set the base size for text elements.
• Line height: Adjust the spacing between lines of text for readability.

Configuring Product Card Appearance

The Product cards section controls how individual product cards look and behave across your store, including collection pages, search results, and recommendation sections. It is organized into the following configuration areas:

Product Information

This section controls what information appears on each product card and how customers interact with it. The following settings are located under Product cards > Product Information in Global settings.

• Quick add-to-cart icon display: Toggles the visibility of the quick add-to-cart icon on product cards.
• Add-to-cart flow: Determines what happens when a customer clicks the add-to-cart icon. Options are:
  • Quick add-to-cart: Adds the product directly to the cart.
  • Pop-up product selection: Opens a pop-up where the customer selects a SKU before adding to cart.

  • Pop-up product card overlay: Displays a product card overlay for SKU selection.

    Note: When Pop-up product card overlay is selected, ensure each product card has Overlay trigger display enabled. If not enabled, the selected SKU will be added directly to the cart without showing the overlay. If both the overlay and the product information area have a variants selector, the SKU selected in the overlay takes priority. When Pop-up product selection is chosen, the SKU selected in the pop-up will be added to the cart.

• Display product title on desktop: Toggles the visibility of the product title on desktop.
• Display product title on mobile: Toggles the visibility of the product title on mobile.
• Product title display controls how much of the product title is shown on the card. Options are:
  • Full display: Shows the complete product title regardless of length.
  • Display up to 1 row: Truncates the title to a single line.
  • Display up to 2 rows: Truncates the title to two lines.

Product Card Discount Tag

This section controls the appearance of promotional discount tags displayed on product cards. The following settings are located under Product cards > Product card discount tag in Global settings.

• Promotion tag radius: Sets the corner roundness of the tag in pixels.
• Label style: Controls what information the discount tag communicates. Options are:
  • Default style (sale): Displays a generic "Sale" label.
  • Savings amount: Shows the exact amount saved.
  • Savings percentage: Shows the percentage discount.
• Font style: Sets the typography for the tag label, with options ranging from Body to Body 6.
• Background opacity: Adjusts the transparency of the tag's background, expressed as a percentage.

Product Card Price Display Style

The following settings are located under Product cards > Product card price display style in Global settings.

• Display style of price: Controls how prices are shown on product cards when a product has multiple price points. Options are:
  • Minimum price: Shows only the lowest available price.
  • Price range: Displays the full price range (e.g., $10 – $30).
  • From minimum price: Shows the lowest price with a "From" prefix (e.g., From $10).

Style, Border, and Shadow

The following settings are located under Product cards > Style, Border, and Shadow in Global settings.

These sections control the visual presentation of the product card container itself — including card layout and image ratio (Style), border thickness and color (Border), and drop shadow depth (Shadow).

Configuring Other Storefront Elements

Layout

The following settings are located under Layout in Global settings.

• Page width: Sets the maximum width of your storefront content area.
• Component vertical spacing: Controls the vertical spacing between sections and components across your pages.
• Grid — Horizontal: Sets the horizontal gap between items in grid layouts, such as product card grids.
• Grid — Vertical: Sets the vertical gap between rows in grid layouts.

Buttons

The following settings are located under Buttons in Global settings.

These settings define the visual style of all buttons across your store, including corner radius, size, and border treatment, ensuring a consistent call-to-action style on every page.

Variants Selector

The following settings are located under the Variants selector in Global settings.

These settings control the visual style of product variant option selectors, such as size or color buttons, across your storefront, including border and shadow styling.

Inputs

The following settings are located under Inputs in Global settings.

These settings control the appearance of all text input fields across your storefront, such as search bars and form inputs, including border style and corner radius.

Dropdowns and Pop-ups

The following settings are located under Dropdowns and pop-ups in Global settings.

These settings control the visual styling of dropdown menus and modal pop-up windows across your store, including border and shadow details.

Drawers

The following settings are located under Drawers in Global settings.

These settings control the visual styling of slide-in drawer panels across your store, such as the cart drawer, including border and shadow details.

Cart

The following settings are located under Cart in Global settings.

Cart style controls how the cart experience is presented to customers. Select from the following options:

• Drawer: Opens the cart as a slide-in panel without leaving the current page.
• Enter the shopping cart page: Navigates the customer directly to the full cart page.
• Pop-up notification: Displays a brief notification when an item is added to the cart.

You can also configure the color settings for the cart display in this section.

Media

The following settings are located under Media in Global settings.

These settings control the visual styling of image and media elements across your storefront, including border and shadow treatment.

Content Containers

The following settings are located under Content containers in Global settings.

These settings control the visual styling of content wrapper elements used across your storefront sections, including border and shadow treatment.

Blog Cards

The following settings are located under Blog cards in Global settings.

These settings control the appearance of blog post preview cards on your blog listing page, including layout style, border, and shadow.

Other Cards

The following settings are located under Other cards in Global settings.

These settings control the visual style of card elements that are not product cards or blog cards, such as promotional content cards, including border and shadow styling.

Social Media

The following settings are located under Social media in Global settings.

Add links to your store's social media profiles here. These links are typically displayed in your storefront footer.

Favicon

The following settings are located under Favicon in Global settings.

Upload a small icon to represent your store in browser tabs and bookmarks. For best results, use a square image.

Custom CSS

The following settings are located under Custom CSS in Global settings.

Any CSS entered here applies across every page of your online store. Use this section for storefront-wide style changes only. For modifications scoped to a specific page, apply Custom CSS within that page's settings instead.

Configuring Color Schemes for Featured Sections (Bottle Theme)

The Featured products and Product recommendations sections in the Bottle theme support color scheme configuration at the section level. This allows you to connect each section's title, link text, and background colors to your theme's color scheme, giving you greater control over how these sections appear across your storefront.

To configure the color scheme for Featured products:

1. In the Theme Editor, navigate to the page containing the Featured Products section.
2. Click the Featured Products section to open its settings.
3. Under Color, select your preferred color scheme. The section's title, link text, and background color will update accordingly.
4. Click Save to apply your changes.

To configure the color scheme for Product recommendations:

1. In the Theme Editor, navigate to the page containing the Product Recommendations section.
2. Click the Product Recommendations section to open its settings.
3. Under Color, select your preferred color scheme. The section's title and background color will update accordingly.
4. Click Save to apply your changes.

Color scheme settings follow this display priority:

• Block-level color scheme: Takes priority within that block's content area when configured.
• Section-level color scheme: Applies to the section's overall title and background outside of any block-specific areas.

For example, if a block is set to a white background and the section is set to a light gray background, the block's content area will appear white while the surrounding section area remains light gray.