Configuring Global Settings Across Your Store Pages (OS 3.0 Themes)

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.

Configuring Your Store Logo

The following settings are located under Logo in Global settings.

These settings control the logo displayed in your store header. If a logo is set in your header section, it takes priority over the logo configured here. You can configure the following:

• Logo: Upload the image file to use as your store logo.
• Logo width on desktop: Sets the logo display width in pixels on desktop.
• Logo width on mobile: Sets the logo display width in pixels on mobile.

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.

Each color scheme includes the following color settings:

• Products
  • Price: Sets the color used for product prices.
  • Discount amount: Sets the color used to display the discounted amount.
  • Discount tag text: Sets the text color on discount tags.

• Other
  • Background color: Sets the default background color for the scheme.
  • Shopping cart prompt points: Sets the color for cart prompt indicator dots.
  • Shopping cart prompt text: Sets the color for cart prompt text.
  • Image background: Sets the background color displayed behind product images.
  • Matte pop-up window background: Sets the background overlay color for modal pop-up windows.
  • Shadow: Sets the color used for shadow effects across the scheme.

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. 

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.

Typography

The Typography section controls the fonts and text styling used across your entire storefront. Settings are organized by text level, from Title through Title 6 for headings, and Body through Body 6 for body text. Each text level can be configured independently with the following options:

• Font: Choose a typeface from the available font library.
• Font spacing: Sets the letter spacing as a percentage.
• Font size: Sets the text size in pixels.
• Font line height: Sets the line height for the text level.

• All caps for texts: Toggle to display all text at this level in uppercase.

  Note: The Body level does not include an All caps toggle.

Configuring Product Card Appearance  and Add-to-Cart Behavior

The Product cards section controls how individual product cards look and behave across your store, including collection pages, search results, and recommendation sections. Beyond visual styling, this section also lets you configure the add-to-cart experience, including how customers select SKUs and complete purchases directly from the product card. 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, including the add-to-cart flow for quick purchasing. 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: Controls the purchase path when a customer clicks the add-to-cart icon on a product card. Use this setting to optimize the add-to-cart experience based on your product catalog, for example, choosing a SKU selection step for products with multiple variants. 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: After the customer clicks the add-to-cart icon, a SKU selector appears as an overlay on the product card image. The customer selects a SKU, then clicks the add-to-cart icon again to complete the purchase.

    Note: To use Pop-up product card overlay, you must first add a Top-layer image overlay to the product card and configure it to display the desired product information (e.g., a variants selector). The Top-layer image overlay supports three interaction styles: Persistent overlay: The overlay is always visible. Hovering over the product or clicking the add-to-cart icon does not change its visibility. Fade-in overlay: The overlay appears when the customer hovers over the product or clicks the add-to-cart icon. Fade-out overlay: The overlay disappears when the customer hovers over the product or clicks the add-to-cart icon. The Mobile persistent overlay toggle is also available. When enabled, the overlay remains visible on mobile at all times and does not fade in or out when the customer taps the add-to-cart icon or the product. 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.

• Style: Sets the overall layout of product cards. Options are:
  • Standard: Displays product cards in a flat, borderless layout.
  • Cards: Displays product cards with a distinct card container.
• Image margin: Sets the spacing between the product image and the card edge in pixels.
• Border: Controls the outline of product cards.
  • Thickness: Sets the border width in pixels.
  • Opacity: Adjusts the border transparency as a percentage.
  • Border radius: Sets the corner roundness of product cards in pixels.
• Shadow: Adds a drop shadow effect to product cards.
  • Opacity: Sets the shadow transparency as a percentage.
  • Vertical offset: Shifts the shadow up or down in pixels.
  • Horizontal offset: Shifts the shadow left or right in pixels.
  • Blur: Controls the softness of the shadow edge in pixels.

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, ensuring a consistent call-to-action style on every page. You can configure the following:

• Border: Controls the visual outline of buttons.
  • Thickness: Sets the border width in pixels.
  • Opacity: Adjusts the border transparency as a percentage.
  • Border radius: Sets the corner roundness of buttons in pixels. Higher values create more rounded corners.
• Shadow: Adds a drop shadow effect to buttons.
  • Opacity: Sets the shadow transparency as a percentage.
  • Vertical offset: Shifts the shadow up or down in pixels.
  • Horizontal offset: Shifts the shadow left or right in pixels.
  • Blur: Controls the softness of the shadow edge in pixels.

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 across your storefront, such as size or color buttons. You can configure the following:

• Border: Controls the outline of variant selector buttons.
  • Thickness: Sets the border width in pixels.
  • Opacity: Adjusts the border transparency as a percentage.
  • Border radius: Sets the corner roundness in pixels.
• Shadow: Adds a drop shadow effect to variant selector buttons.
  • Opacity: Sets the shadow transparency as a percentage.
  • Vertical offset: Shifts the shadow up or down in pixels.
  • Horizontal offset: Shifts the shadow left or right in pixels.
  • Blur: Controls the softness of the shadow edge in pixels.

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 fields. You can configure the following:

• Border: Controls the outline of input fields.
  • Thickness: Sets the border width in pixels.
  • Opacity: Adjusts the border transparency as a percentage.
  • Border radius: Sets the corner roundness of input fields in pixels.
• Shadow: Adds a drop shadow effect to input fields.
  • Opacity: Sets the shadow transparency as a percentage.
  • Vertical offset: Shifts the shadow up or down in pixels.
  • Horizontal offset: Shifts the shadow left or right in pixels.
  • Blur: Controls the softness of the shadow edge in pixels.

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. You can configure the following:

• Border: Controls the outline of dropdown menus and pop-up windows.
  • Thickness: Sets the border width in pixels.
  • Opacity: Adjusts the border transparency as a percentage.
  • Border radius: Sets the corner roundness in pixels.
• Shadow: Adds a drop shadow effect to dropdown menus and pop-up windows.
  • Opacity: Sets the shadow transparency as a percentage.
  • Vertical offset: Shifts the shadow up or down in pixels.
  • Horizontal offset: Shifts the shadow left or right in pixels.
  • Blur: Controls the softness of the shadow edge in pixels.

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 scheme for the cart display in this section.

Collection Cards

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

These settings control the appearance of collection preview cards across your storefront. You can configure the following:

• Style: Sets the overall layout of collection cards. Options are:
  • Standard: Displays collection cards in a flat, borderless layout.
  • Cards: Displays collection cards with a distinct card container.
• Border: Controls the outline of collection cards.
  • Thickness: Sets the border width in pixels.
  • Opacity: Adjusts the border transparency as a percentage.
  • Border radius: Sets the corner roundness of collection cards in pixels.
• Shadow: Adds a drop shadow effect to collection cards.
  • Opacity: Sets the shadow transparency as a percentage.
  • Vertical offset: Shifts the shadow up or down in pixels.
  • Horizontal offset: Shifts the shadow left or right in pixels.
  • Blur: Controls the softness of the shadow edge in pixels.

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. You can configure the following:

• Style: Sets the overall layout of blog cards. Options are:
  • Standard: Displays blog cards in a flat, borderless layout.
  • Cards: Displays blog cards with a distinct card container.
• Border: Controls the outline of blog cards.
  • Thickness: Sets the border width in pixels.
  • Opacity: Adjusts the border transparency as a percentage.
  • Border radius: Sets the corner roundness of blog cards in pixels.
• Shadow: Adds a drop shadow effect to blog cards.
  • Opacity: Sets the shadow transparency as a percentage.
  • Vertical offset: Shifts the shadow up or down in pixels.
  • Horizontal offset: Shifts the shadow left or right in pixels.
  • Blur: Controls the softness of the shadow edge in pixels.

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. You can configure the following:

• Border: Controls the outline of other card elements.
  • Thickness: Sets the border width in pixels.
  • Opacity: Adjusts the border transparency as a percentage.
  • Border radius: Sets the corner roundness in pixels.
• Shadow: Adds a drop shadow effect to other card elements.
  • Opacity: Sets the shadow transparency as a percentage.
  • Vertical offset: Shifts the shadow up or down in pixels.
  • Horizontal offset: Shifts the shadow left or right in pixels.
  • Blur: Controls the softness of the shadow edge in pixels.

Social Media

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

This section lets you connect your store's social media presence and configure how sharing options appear to customers.

• Accounts: Add your store's profile links for any of the following platforms: Facebook, X (Twitter), Pinterest, Instagram, Snapchat, TikTok, YouTube, Vimeo, Tumblr, WhatsApp, LINE, and LinkedIn.
• Custom social media links: You can also add up to five custom social media entries not listed above. For each entry, provide a Name and a Link.
• Share: Toggle sharing options to let customers share your products on social media directly from your storefront. You can enable sharing for the following platforms individually:
  • Official icon style
  • Display social media name
  • Share on Facebook
  • Tweet on X (Twitter)
  • Pin on Pinterest
  • Share on LINE
  • Share on WhatsApp
  • Share on Tumblr

Customizing Social Media Icons

To help merchants promote niche or region-specific platforms (such as Discord, LINE, or Reddit) beyond universal icons like Facebook and Instagram, SHOPLINE now supports custom social media displays. This allows you to upload personalized icons and set destination links without any custom coding or third-party apps.

How to Set Up

To configure custom social media icons for your store's header or footer:

1. From your SHOPLINE admin panel, go to Online Store > Design > My theme. Choose a compatible OS 3.0 theme (e.g., Fashion) and click Design to enter the theme editor.
2. In the theme editor, go to Theme settings > Social media.
   
3. Scroll to the bottom to find the Custom social media section. You will see five available slots labeled Social media 1 through Social media 5. Select any slot to begin your configuration.
   
4. Configure the following settings for each entry:
   
   • Icon upload: Upload your custom image (icons will appear gray until an image is successfully uploaded).

   • Link: Enter the full destination URL.

     Note: The Link field is mandatory. You must enter a valid URL format (e.g., https://...) to save your settings.

5. Click Save to apply the icons to your Header or Footer.
   

Icon Specifications

To ensure optimal display, please follow these guidelines:

• Supported formats: JPG, SVG, and PNG
• File size: Recommended to be under 200KB.
• Recommended dimensions: 20px x 20px or 25px x 25px

Feature Limitations

• Quantity limit: You can add a maximum of 5 custom social media icons.
• Theme availability: This feature is supported on all official OS 3.0 free themes, except the Bottle theme. It is not supported on third-party paid themes.

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.