Icon settings

Icons are small, but they appear on nearly every screen a customer sees: the cart in your header, the arrows on a carousel, the marker that opens an FAQ answer. Because they repeat so often, getting them right makes a store feel considered. These settings live in Theme settings → Icons, reached with the gear icon at the bottom of the theme editor sidebar, and they apply store-wide. Options that affect only one part of a page live on the individual section instead.

Set the icon line weight

• Line weight controls how heavy the outlines of the icons are, from 1 to 2.5. Defaults to 1.2.

A lighter weight looks refined and quiet, and it suits stores built around photography or a delicate heading font. A heavier weight reads bold and technical, and it holds its shape better on dark backgrounds or at small sizes. Move in small steps: a change of 0.2 is already visible, and jumping straight to the top of the range can make icons look heavier than your text.

The quickest place to judge it is your header, where the search and cart icons sit next to your navigation. If the icons look louder than the words beside them, come down a little.

Choose your marker style

• Marker style sets the accent character the theme uses for things like the accordion open and close marker and the breadcrumb separator. Defaults to Chevron.

The options are:

• Chevron is the clean line default. It suits almost any store and never draws attention to itself.
• Plus and minus reads soft and friendly, and it makes it very obvious that an accordion row can be opened.
• Bracket [ + ] frames the marker for a more constructed, technical feel.
• Code (// and brackets) goes furthest: alongside the marker it adds // labels and [ ] button frames, which suits stores with a hardware, audio, or workshop character.

To see the difference, open a page with an accordion, such as a product page with expandable details or an FAQ page, then check a collection page for the breadcrumb. If you pick Code, look at your buttons too, since that option changes them as well.

Pick your cart icon

• Cart changes the cart icon everywhere it appears, including the header and the empty-cart message. Defaults to Line cart.

Choose the shape that matches what you sell:

• Line cart is neutral and works for any catalog.
• Filled bag is solid rather than outlined, so it stays legible in a busy header.
• Basket feels natural for food, grocery, and market-style stores.
• Square bag is more structured and sits well with sharp corners elsewhere in the theme.
• Slim bag is the lightest of the bag shapes and suits apparel and lifestyle stores.

Tip

Set the line weight first, then choose your icons. Weight affects every outlined icon at once, so tuning it before you pick a cart shape saves you from judging the shape at the wrong thickness.

Keep icons in step with the rest of your theme

Icons look best when they echo choices you have already made elsewhere. Sharp corners and a heavier line weight belong together, as do rounded shapes and a lighter line. If you switch to a different theme style, check this group afterwards, since a new style changes the mood these settings are supporting.

Note

Every icon in the theme is drawn to stay crisp at any screen size and carries the labelling that screen readers need, so whichever combination you choose, your store stays clear and accessible. See also Header and navigation and Cart.