Theme settings overview


Theme settings control global styles and options used across Array. These settings affect multiple templates and sections.

Open Theme Settings

  1. Go to Online Store > Themes.
  2. Find Array and click Customize.
  3. Click the gear icon or Theme settings in the left sidebar.

Colors

Use Colors to create and edit color schemes. Sections and templates can then use those schemes.

Color schemes let you reuse the same group of colors across multiple sections. For example, you might create a light scheme for general content, a dark scheme for footer or hero sections, and an accent scheme for promotional areas.

Color scheme settings:

  • Background: The main section background color.
  • Background gradient: Optional gradient background. Use this only when a gradient is part of the visual system; simple solid backgrounds are usually easier to reuse.
  • Text: Main text color used by headings, body text, and icons.
  • Button background: Background color for primary buttons.
  • Button label: Text color for primary buttons.
  • Secondary button label: Text/border color for secondary buttons and links where used.
  • Shadow: Color used for shadow or overlay effects where supported.

Tips:

  • Use color schemes consistently so the storefront feels intentional.
  • Check contrast between text and background before publishing.
  • Avoid creating too many similar schemes. A small set is easier to maintain.

Typography

Use Typography to choose fonts for headings and body text.

Array includes:

  • Heading font: Used for headings, some navigation elements, and prominent interface text.
  • Body font: Used for paragraph text, product information, forms, and general interface copy.

Choose fonts that are readable at small sizes as well as large heading sizes. If a font is decorative, it is usually better as a heading font than a body font.

Logo

Use Logo to upload brand assets for different theme areas.

  • Header logo: Main logo used in the header on desktop.
  • Header logo width: Controls the desktop header logo size.
  • Header logo (small): Smaller logo used for sticky header and mobile contexts.
  • Header logo (small) width: Controls the small header logo size.
  • Footer logo: Logo used in the footer.
  • Footer logo width: Controls the desktop footer logo size.
  • Footer logo (small): Smaller footer logo used on mobile.
  • Footer logo (small) width: Controls the small footer logo size.
  • Password page logo: Logo used on the password page.
  • Password page logo width: Controls the password page logo size.

The small logo is used where a more compact logo is needed, such as sticky header or mobile layouts.

Tips:

  • Upload logos with transparent backgrounds where possible.
  • Use the width settings to size the logo instead of uploading multiple oversized versions.
  • Preview header, footer, sticky header, mobile header, and password page after adding logos.

Layout

Use Layout to set the global page width. This affects contained page layouts across the theme.

  • Page width: Controls the maximum width for contained layouts. Increase it for a more spacious storefront, or reduce it for tighter editorial layouts.

Full-width or fluid sections can still extend wider than the standard page width when their section settings allow it.

Animations

Use Animations to control the section fade-in effect used across the storefront.

When enabled, sections fade in as they enter the viewport. This can make pages feel smoother and more considered, especially on image-led landing pages. If you prefer an instant, static page load, disable the animation.

Image reference: Animations settings in the Shopify theme editor

  • Enable section fade-in animation: Turns the fade-in effect on or off. Disable this if you want sections to appear immediately with no motion.
  • Translate amount: Controls how far a section moves upward as it fades in. The default is 20px  . Use a smaller value for a subtler effect, or 0px   if you want fade only with no movement.
  • Animation duration: Controls how long the fade-in takes. The default is 600ms  . Shorter durations feel snappier; longer durations feel softer but can make the site feel slower if overused.
  • Stagger delay: Controls the delay between multiple sections animating in sequence. The default is 150ms  . Use a lower value for a quicker page feel, or a higher value for a more noticeable sequence.
  • Viewport trigger threshold: Controls how much of a section must enter the viewport before the animation starts. The default is 20%  . Lower values trigger earlier; higher values wait until more of the section is visible.
  • Easing: Controls the motion curve. Ease   is the default and works well for most stores. Ease out   feels quick at the start and gentle at the end. Ease in out   feels balanced. Linear   moves at a constant speed and usually feels more mechanical.

Tips:

  • Keep animation subtle for product and collection pages.
  • If a page feels sluggish, reduce the duration, reduce the stagger delay, or disable the animation.
  • Avoid using strong animation settings when the page already has sliders, marquees, video, or other moving content.

Currency

Enable Show currency codes if you want prices to display currency codes such as USD, AUD, or EUR.

Use currency codes when selling internationally so customers can distinguish between currencies with similar symbols, such as USD, CAD, AUD, and NZD.

Product Badges

Use Product Badges to choose color schemes for:

  • Sale badge color scheme: Controls the colors used for sale badges on product cards and product areas.
  • Sold out badge color scheme: Controls the colors used for sold-out badges.

Use badge colors that stand out from product imagery without clashing with the overall palette.

Favicon and Meta

Use the favicon setting to upload the small browser icon for your store.

Use meta theme color to control supported browser UI color treatment.

  • Favicon image: Small icon shown in browser tabs, bookmarks, and some search/browser contexts.
  • Meta Theme Color: Color used by some browsers for browser chrome or page preview UI.

Use a simple favicon that remains recognizable at very small sizes.

Social Media

Add links for supported social networks. These links are used by social icon areas, such as the footer.

Supported fields include Facebook, Instagram, X, TikTok, YouTube, Pinterest, LinkedIn, and Snapchat.

Only add links for accounts you actively use. Empty fields will not be useful to customers and should be left blank.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.