Personalizing Your Store: Colors, Fonts, Banners and Favicon

Markdown

View as Markdown

Personalizing Your Store: Colors, Fonts, Banners and Favicon

A strong, consistent look builds trust. LaunchMyStore lets you tune every visual aspect of your storefront from one place — Theme Customizer 2.0 — without writing CSS.

Opening the customizer

Go to Online StoreThemes and click Customize on the theme you want to edit.

Promotional banners

Banners are the first thing visitors see. They're great for announcing a sale, a new collection, or a free-shipping promotion.

  1. In the customizer sidebar, click the hero / slideshow section (or add one from the section gallery).
  2. Click + Add slide for each banner you want to show.
  3. For each slide, set:
    • Image — upload or pick from the Media library. Desktop image is shown on wide screens; you can optionally provide a separate mobile image for a tighter mobile crop.
    • Heading and body text.
    • Button label and link — use the resource picker to link to a product, collection, blog post, or page.
  4. Set autoplay speed and transition style at the section level.

The exact recommended pixel dimensions are shown next to the image picker for the section you're editing — this varies by theme, but a safe default is around 1920×800 for desktop banners.

Fonts and colors

Open Theme settings (gear icon).

  • Typography — pick a heading font and a body font from the type picker. The picker offers 20+ web-safe and Google Fonts options.
  • Color schemes — LaunchMyStore uses named schemes (e.g. Background 1, Background 2, Inverse) rather than scattered color pickers. Set the background, text, accent, button background, and button text for each scheme once; every section then picks a scheme to use.

This means changing your brand's primary color updates buttons, links, and accents everywhere at once.

Logo and favicon

Both live in the header section / theme settings:

  • Logo — uploaded image shown in the header. Provide a transparent PNG or SVG that works on light and dark backgrounds. You can also set a logo width and a separate mobile logo if needed.
  • Favicon — the small icon shown in the browser tab. Recommended: 32×32 PNG.

Mobile-specific tweaks

The device toggle at the top of the customizer (desktop / tablet / mobile) shows exactly how each change looks on smaller screens. Most sections expose extra controls for the mobile layout — e.g. number of columns, slide-to-show count, hide-on-mobile toggles.

Saving your changes

Click Save to keep your work as a draft on this theme. Click Publish to push the changes live. You can revert to an earlier published version from the theme actions menu.

FAQ

Can I have separate banners for mobile and desktop?

Yes. Every image slot in the slideshow section accepts an optional mobile image; if you set one, it's used on phones and the desktop image is shown elsewhere.

Will my changes survive a theme update?

All theme settings (colors, fonts, sections, blocks) are stored in config/settings_data.json. When you update or reinstall the same theme, your saved settings are preserved.

Can I use a custom font that isn't in the picker?

Yes. Open the code editor and add a @font-face rule in your theme's CSS, then reference the font family in the typography setting. Power users only.

Where can I see the recommended logo and favicon sizes?

Each image picker shows the recommended dimensions next to the upload button, based on the theme you have installed.

How do I add my brand color to buttons without breaking the rest of the design?

Edit the relevant color scheme in Theme settingsColors. Change the button background on the scheme used by your buttons — the change applies everywhere consistently.


Was this article helpful ?