Loco preset

Who Loco is for

Loco is made for electronics and audio brands: headphones, speakers, cameras, small devices and their accessories. It is a dark storefront with raised panels, product cutouts with a soft shadow, a yellow price and a green Add to cart button.

Loco looks complete with a single product line and scales to catalogs of hundreds of products. No layout depends on how many products you sell. See Small and large catalogs below.

The Loco demo store, Circle, sells headphones, smart watches, mini speakers and smart glasses: about 33 products.

What the preset sets

You can change any of these in Theme settings. See Theme settings and Typography.

Home page

The home page has these sections, from top to bottom:

1. Promo banner: your news or offer, with a large background word and a button.
2. Featured collection: four products in a row, right under the banner.
3. Slideshow: large images, for example the colors of one model.
4. Video: your product in use.
5. Collection tiles: four product lines, such as headphones, earbuds, speakers and accessories.
6. Trust badges: shipping, returns, warranty and support, on a panel.
7. Press coverage: quotes from publications that wrote about your products.
8. FAQ: the questions customers ask most.

Below the home page sections, the footer group has an Email signup section and the Footer. Above them, the header group has an Announcement bar and the Header.

To get started, click Featured collection and choose a Collection, then click Collection tiles and choose your Collections. The section shows one row of four tiles, so extra collections stay hidden.

Images to prepare

Loco is designed for product cutouts: photos of the product alone on a transparent background, which the theme places on a panel.

Avoid text inside images. Headings, prices and buttons are live text in the theme, so they stay sharp, translate and can be read by screen readers.

Product cutouts

1. Photograph the product on a plain background, with the key light from the top left.
2. Remove the background with a photo editor or a background removal tool.
3. Export a .png with a transparent background, at least 2048px on the longest side.
4. Upload it to the product in your Shopify admin.

Images for each color

When a customer picks a color, the gallery shows that color's photo. To set this up:

1. In your Shopify admin, open the product.
2. Add one photo per color.
3. In the Variants list, open each variant and choose its image.

To show color swatches instead of color names, set a color or an image for each option value in your Shopify admin. Swatches also appear on product cards when Show color swatches is on in Theme settings > Product cards.

Background text

Loco shows a large word behind the product on the product page and behind some sections. It is decoration: screen readers skip it.

Short words work best, such as your brand, a season or a product line. The Background text settings in Product, Featured product and Slideshow appear when Design style in Theme settings is set to Soft panels, which is Loco's style.

Color schemes

In Theme settings > Colors, Loco has four color schemes. The theme editor lists them as Scheme 1 to Scheme 4.

To make your store light, set Color scheme to Scheme 3 in the Header, the Footer, the Announcement bar, the Email signup and every section on your pages. See Color schemes.

Small and large catalogs

Loco looks complete with a single product line and scales to catalogs of hundreds of products. The same sections and pages work at any size.

With one product or a few:

• Add a Featured product section to the home page to show one product with its gallery, price and Add to cart button.
• In Featured collection, set Products to show to the number you sell, from 2 to 12.
• Remove Collection tiles if you have only one collection.
• The product page carries the detail: a Specification sheet with your figures and a Video.

With hundreds of products:

• In the Header, the Contents button opens every level of your main menu, in columns on desktop. Nest collections in your main menu to make departments and sub-departments.
• On collection pages, the Collection page section has filters, sorting and a choice of Pagination type: Pages, Load more button or Infinite scroll. Choose which filters appear in the Search and Discovery app.
• In the Collection page section, choose a Sub-collection menu to link to smaller collections. See Roster preset for the steps.
• Add a Brands A–Z section to a page to list your vendors or collections in alphabetical order.
• Featured collection shows up to 12 products, and Collection list shows up to 12 collections.

Tips

• Highlighted menu item in the Header is set to "Catalog". If your main menu has no item with that name, change it to the name of an item you want to stand out, or clear the field.
• Specification sheet rows can read from product metafields, so each product shows its own figures. Connect a metafield to Value with the dynamic source button. Rows with no value are hidden.
• Trust badges has Show panel turned on in Loco. Turn it off to show the badges without a panel.
• Promo banner shows a countdown only when you add an End date. See Honest promotions.

Related pages

• Getting started
• Product page
• Collections and search
• Almanac preset
• Roster preset