Loco Help center Support

Start

Getting started

Install Loco from the Shopify Theme Store, choose a preset, preview your store and publish it, then set up your logo, menus and collections.

Install Loco

Loco comes with three presets. Each one is the same theme with its own colors, fonts, shapes and page layouts:

  • Loco: dark and modern, for electronics and audio brands. See Loco.
  • Almanac: light and bookish, for tea, coffee, food and drink. See Almanac.
  • Roster: light and dense, for tools, hardware and large catalogs with trade buyers. See Roster.

To install a preset:

  1. Open Loco in the Shopify Theme Store.
  2. Choose the preset you want. Its demo store shows what your store will look like.
  3. Click Try theme to add a copy to your theme library without buying it, or buy the theme to keep it.
  4. In your Shopify admin, go to Online Store > Themes. Loco appears in your theme library.

Choose the preset when you install. Each preset brings its own page layouts. If you later switch to another preset's style in the theme editor, Shopify changes theme settings such as colors and fonts, but the sections on your pages stay as they are.

Preview and publish

  1. In Online Store > Themes, find Loco in your theme library.
  2. Click Customize to open the theme editor and set up your store.
  3. To see the store as a customer would, open the ... menu next to the theme and click Preview.
  4. When you are ready, open the ... menu and click Publish. Shopify asks you to buy the theme first if you are still trying it.

Your current theme stays in the theme library after you publish, so you can switch back.

What your new theme includes

When you install a preset, your store gets the same layout as the preset's demo store:

  • the sections on each page, in the same order
  • the color schemes and fonts
  • the shapes of panels, buttons and fields
  • example text that tells you what to write in each place

What you add yourself

Some things in the demo stores belong to those stores, so they are not copied to yours:

In the demo store In your store after installing
Photos and videos Placeholders show where an image or video goes until you add your own.
Products, collections and blog posts Sections that show them use placeholders until you choose your own.
Menus The header uses your main menu and the footer uses your footer menu. Every Shopify store has both.
Discount codes In Theme settings > Popup, Show popup is off and Discount code is empty.
Sale dates End date is empty in Promo banner, so no countdown shows until you add a date.
Shipping and return promises Trust badges and the announcement bar have no numbers or prices. Free shipping threshold is set to 0, so the free shipping progress bar is hidden.
Background text Empty. Most sections then show your store name, and the product page shows the product's vendor. See Loco preset.
Social media links Empty.
Press quotes Example quotes tell you what to add. Only use quotes you have permission to use.
Product ratings The Rating block is in place and stays empty until a product reviews app adds ratings.

First steps

Work through these in the theme editor. Open it from Online Store > Themes > Customize.

Add your logo and favicon

  1. Click Theme settings, then Logo and favicon.
  2. Upload your Logo. Any shape of logo works. Use Logo width to set its size in the header. The default is 140px.
  3. Upload your Favicon: 32 x 32px .png recommended.

Without a logo, the header shows your store name.

Menus are managed in your Shopify admin, not in the theme editor.

  1. In your Shopify admin, go to Content > Menus.
  2. Open Main menu and add the pages and collections customers should find first. Nest items under a top-level item to make submenus.
  3. Open Footer menu and add links such as your policies, contact page and FAQ.
  4. In the theme editor, click the Header section and check that Main menu is set to your main menu.
  5. Click the Footer section. Each Menu block shows one menu, up to four. Check that Footer menu is set in each block.

In the Header section, Highlighted menu item marks one top-level item. Enter the item's name exactly as it appears in your menu, or leave the field empty for no highlight.

Choose collections for your home page

Sections such as Featured collection and Collection tiles show placeholders until you choose collections.

  1. In your Shopify admin, create your collections in Products > Collections. Give each one an image: sections that show collections use it.
  2. In the theme editor, open the home page and click each section with placeholders.
  3. Choose a Collection in Featured collection, or Collections in Collection tiles and Collection list.

The page for your preset lists what is on its home page: Loco, Almanac or Roster.

  1. Click Theme settings, then Social media.
  2. Paste the full link to each profile you have, for example your Instagram page.

Icons show in the footer when Show social media icons is on in the Footer section. Empty links show no icon.

Check your color schemes

Each preset has four color schemes. Sections, the header and the footer each use one of them.

  1. Click Theme settings, then Colors, to see the schemes and change their colors.
  2. To use a different scheme for one section, click the section and change its Color scheme.

If text in a scheme is hard to read on its background, the theme editor shows a note above each section that uses that scheme. Customers do not see this note. See Color schemes.

Replace the example text

Sections come with example text that says what to write, for example "Describe how and where you ship." Click each section and block and replace it with your own words. Delete the blocks and sections you do not need.

Before you edit code

Most changes need no code: sections, blocks and Theme settings cover them. If you or a developer want to edit the theme's code, duplicate the theme first so you have a copy to go back to:

  1. Go to Online Store > Themes.
  2. Open the ... menu next to Loco and click Duplicate.
  3. Edit the copy, not your published theme.

Code changes are not covered by theme support. See Code customizations and the Support policy.

Next steps