Services

If you sell services as well as products, such as fitting, repairs, cleaning or installation, Alpha Start can show them as a catalog. Customers browse service categories, compare prices and features, and leave a request with one button. You receive the request by email and call the customer back.

The catalog is built from a blog: each post is one service. Alpha Start includes two templates for it:

Template	Section	What it shows
services for blogs	Services	The service categories as photo tiles, and the list of services in a category with prices and Order service buttons.
services for blog posts	Service	One service with an order box, the description, features and a photo gallery.

Where to find it: Theme editor → page selector at the top → Blogs → services → Services, and Blog posts → services → Service.

How the catalog works

• A service is a blog post. The post title is the service name, the featured image is its photo, the excerpt is a short description and the post content is the full description.
• A category is a post tag that starts with category:. The tag category:Dry cleaning puts the service into the Dry cleaning category.
• Price, features, order text and gallery come from blog post metafields with the namespace service.

Info in the editor: “Assign this template to a blog: each post is a service, a tag such as category:Dry cleaning sets its category. Price, features, order text and photos come from post metafields service.price, service.compare_at_price, service.price_from, service.order_text, service.features and service.gallery.”

Set up the catalog

1. Create the blog. In your Shopify admin, open Content → Blog posts → Manage blogs → Add blog. Name it, for example “Services”.
2. Assign the template to the blog. In the blog settings, set Theme template to services and save.
3. Create the metafield definitions for prices, features and photos. See Create the metafield definitions below.
4. Add a service. Open Content → Blog posts → Add blog post, choose your services blog, and fill in the title, content, excerpt and image.
5. Assign the template to the post. In the post settings, set Theme template to services. Each post has its own template, so do this for every service.
6. Set the category. In Tags, add a tag such as category:Dry cleaning.
7. Fill in the metafields at the bottom of the post editor: price, features, order text and gallery. Then save the post.
8. Repeat steps 4 to 7 for each service, then open the blog on your storefront.

Each service needs the services template

A blog’s template applies only to the blog page. Posts keep the default blog post template until you choose services for each of them. A post with the default template opens as a regular blog post, without the price and the order box.

Create the metafield definitions

The theme reads six metafields of blog posts. Create a definition for each one, so the fields appear in the post editor.

1. In your Shopify admin, open Settings → Custom data → Blog posts.
2. Click Add definition.
3. Enter a Name, and in Namespace and key enter the value from the table below, for example service.price.
4. Click Select type and choose the type from the table. For a list, choose List of values or List of files.
5. Click Save, and repeat for the other metafields.

Namespace and key	Type	What it does
service.price	Money	The price on the service card and in the order box. Without a price, no price is shown.
service.compare_at_price	Money	The regular price, shown struck through next to the price when it is higher than the price.
service.price_from	True or false	When true, the price reads “From $50.00”, for services with a starting price.
service.order_text	Single line text	Text in the order box on the service page. When empty, the box says “To order the service, leave a request using the form”.
service.features	Single line text, List of values	Features as rows of “name … value”. Write each value as Name: value, for example Turnaround: 2 days. A value without a colon is shown as a name only.
service.gallery	File, List of files	Photos for the gallery on the service page. Limit the accepted file types to images.

The namespace and key must match the table exactly. Each part of the catalog is left out when its metafield is empty, so you can start with a price only and add features and photos later. See Shopify Help Center: Metafields.

The services page

The Services section has two views.

Category tiles. When customers open the blog, they see the categories as square photo tiles. Each tile shows the number of services and the category name, and opens the list of services in that category. The photo is the image of the first service in the category, unless you choose your own with a Category block. Under the tiles you can add a Heading and Text; this text is hidden on screens up to 1024px wide.

List of services. In a category, or when the blog has no categories, the page shows the services as cards next to a sidebar. Each card has the photo, the title, the excerpt (or the start of the content when the excerpt is empty), the features, the price on the right and an Order service button. The photo and the title link to the service page.

On screens up to 1024px wide, the category menu in the sidebar collapses into a Categories button, and the consultation card is hidden. Up to 768px, features are hidden on the cards, and up to 575px each card becomes a column with the photo on top and a full-width button.

Set the order and photos of category tiles

Categories are shown in this order:

1. Categories that have a Category block, in the order of the blocks.
2. The other categories, in the order of the Category menu.
3. Any remaining categories, by name.

To change a tile, add a Category block to the Services section and enter the category name in Category, without the prefix: Dry cleaning for the tag category:Dry cleaning. Then choose an Image for the tile. A square photo of 800 × 800px or larger works well. A block whose category the blog doesn’t have shows an empty tile in the theme editor only.

Use a menu for the categories

By default, the sidebar lists the categories by name. To choose the order and the titles, create a menu and select it in Category menu.

1. In your Shopify admin, open Content → Menus → Add menu.
2. Add one item per category. As the link, paste the category address: /blogs/ + the blog handle + /tagged/ + the tag in lowercase, with spaces and the colon replaced by hyphens. For example, /blogs/services/tagged/category-dry-cleaning for the tag category:Dry cleaning.
3. Save the menu.
4. In the theme editor, select the menu in Category menu in the Services and Service sections.

Info in the editor: “Sets the order of categories in the sidebar and on the category tiles. Without a menu, categories are listed by name.”

When a menu is selected, the sidebar shows the menu items with their titles, and the current category is highlighted.

The service page

The Service section shows breadcrumbs to the services and the service category, the title, then:

• Order box: the order text, the price and an Order service button. On phones, the button takes the full width.
• Lead: the post excerpt in bold.
• Description: the post content.
• Features: the service.features rows under a Features heading.
• Photo gallery: the service.gallery photos in three columns of different heights. A photo opens full screen, where customers can browse the gallery. On screens up to 1024px wide, the photos scroll sideways.

The sidebar with the categories and the consultation card is on the right. It is hidden on screens up to 1024px wide.

Order and consultation requests

Order service on a service card or in the order box opens the Order a service form: “Leave your phone number and we’ll call you back to discuss the details.” Customers enter their name and phone number. The request arrives at your store email with the text “Service request:” and the service name.

The consultation card in the sidebar shows your Heading and Text and a button with your Label. The button opens the Request a call form. The request arrives at your store email with the text “Consultation request from the services page”.

Both forms use the Shopify contact form, so requests arrive the same way as messages from your contact page. See Forms and messages.

Settings reference

Services section:

Setting	What it does	Default
Columns on desktop	Number of category tiles in a row. Options: 3, 4. On screens up to 1024px wide, four tiles are shown in a row, and up to 767px two.	4
Heading	Heading of the text under the category tiles.	Empty
Text	Text under the category tiles.	Empty
Services per page	Number of services on one page of the list, from 4 to 24.	12
Show features	Shows the features on service cards.	On
Show order button	Shows the Order service button on service cards.	On
Show categories	Shows the category menu in the sidebar.	On
Category menu	Info in the editor: “Sets the order of categories in the sidebar and on the category tiles. Without a menu, categories are listed by name.”	Empty
Show consultation card	Shows the consultation card in the sidebar.	On
Heading	Heading of the consultation card.	Need advice?
Text	Text of the consultation card.	We’ll do our best to answer all your questions
Label	Label of the consultation card button.	Request a call
Color scheme	Colors of the section. See Color scheme.	Scheme 1

Category block:

Setting	What it does	Default
Category	Info in the editor: “Category name as in the post tag, without the prefix: “Dry cleaning” for the tag category:Dry cleaning”	Empty
Image	Photo of the category tile. When empty, the image of the first service in the category is used.	Empty

Service section:

Setting	What it does	Default
Show order box	Shows the box with the order text, the price and the button.	On
Show order button	Shows the Order service button in the order box. Shown when Show order box is on.	On
Show features	Shows the features.	On
Show photo gallery	Shows the photo gallery.	On
Show categories	Shows the category menu in the sidebar.	On
Category menu	Info in the editor: “Sets the order of categories in the sidebar and on the category tiles. Without a menu, categories are listed by name.” Shown when Show categories is on.	Empty
Show consultation card	Shows the consultation card in the sidebar.	On
Heading	Heading of the consultation card.	Need advice?
Text	Text of the consultation card.	We’ll do our best to answer all your questions
Label	Label of the consultation card button.	Request a call
Color scheme	Colors of the section. See Color scheme.	Scheme 1

FAQ

Why doesn’t the service page show the price or the order box?

Check that the post uses the services template, that the service.price definition exists with the exact namespace and key, and that the post has a price. The order box itself is shown whenever Show order box is on; only the price is left out when it is empty.

Why is the number of services missing on the category tiles?

The number is shown when the blog has up to 50 posts.

Can services be added to the cart?

No. Services are blog posts, so customers send a request instead of buying online. To sell a service with checkout, create it as a product.

Related pages

Blog and blog postsSet up the regular blog pages.

Forms and messagesWhere requests and sign-ups go.