Local > Product card

Product thumbnail

You can start by choosing a media aspect ratio upon all of your product thumbnails will be resized. Choose whatever suits better for your products in order to reduce the amount of cropping you get.

We also have a Natural option which will make sure that the thumbnail will not crop, but show at it's normal aspect ratio.

Fit media inside container works when you set a fixed aspect ratio and want all the images to be resized (but not cropped!) to fit inside that specific area. This works very well with very tall images or if your product photos are not resized in the same way.

Product caption

You have a few options for the text alignment / size & buy buttons.

One note about the buy button position, in Local the products grid are flexible and all the content inside the card is aligned from top to bottom. However, if you have variable content (like longer titles, custom icons or text), you can stick the buy buttons at the bottom of the product card, in order to have the all aligned in the same way.

Product badges

Dynamic icons list

Local has this unique feature where you can showcase different product features with icons, based on metafields. 

Each product can hold up to six different icons like these and you can add them in two ways. First, as you can see in the Theme Settings, for each icon you need to set two metafields - one for the icon, one for the label. In this area of the customizer you are basically connecting product data to the proper icon.

If you don't have experience with metafields, you might want to read this article from Shopify documentation: https://help.shopify.com/en/manual/metafields/metafield-definitions

Step 1

You need to create the metafield definitions in the metafields area of your store. So go to Settings > Metafields > Products and create two definitions for each icon, one for product icon, one for product label. Then, after metafields are created, you have to populate the theme settings area with the namespace and key from each metafield you've created. 

Please note that icon metafileds should be set as IMAGES, while label metafields should be set as SINGLE LINE TEXT.

Look at the following graphic on how should these work side-by-side:

Step 2

The metafields will now appear in your individual product pages as well, so when you add values for certain products, these will appear in the product cards. 

Pro tip

Because it can be time consuming to add the same icons & labels all over again, we've also come up with a way to simplify this process and only work with LABEL Metafields. For this to work, you need to upload your specific ions in the Files area of your store, and make sure the filenames correspond to the labels that you will use (in a handle form).

Example: You have a label called Gluten Free. If you upload a file named gluten-free.png, that icon will be used for this label without you needing to upload a separate icon in the icon field (https://share.getcloudapp.com/jkuOE8m2). Our theme will always pick the uploaded icon first, then if this fails, it will search for a png file named as the label.