Create Custom Service

Step 1: Access the Metaobjects Section

1. Log in to your Shopify Admin.
2. Navigate to Settings > Custom data.
3. Select Metaobjects.

Step 2: Create the Service Metaobject Definition

1. Click Add definition to create a new metaobject definition.
2. Name the Metaobject: Enter a name like Service.
3. API Handle: The API handle will be auto-generated based on the name. You can keep it as service or customize it if desired.

Step 3: Add Fields to the Service Metaobject

Add fields for each element you want to include in the Service Metaobject:

1. Icon

   • Type: File (image or icon file)
   • Description: “Upload an icon to represent the service.”

2. Image

   • Type: File (for a larger image representing the service)
   • Description: “Upload an image for a visual representation of the service.”

3. Title

   • Type: Single-line text
   • Description: “Enter the title of the service.”

4. Short Description

   • Type: Single-line text
   • Description: “Provide a brief description of the service.”

5. Description

   • Type: Multi-line text or Rich text (if you want formatting options)

   • Description: “Enter a detailed description of the service.”

   Note: Use Rich text if you want to enable text formatting (bold, italics, bullet points).

6. After adding all fields, click Save to create the metaobject definition.

Step 4: Add Content to the Service Metaobject

1. Go to Content > Metaobjects.
2. Select your new Service metaobject.
3. Click Add service to create a new entry.
4. Fill in each field:
   • Upload the icon and image.
   • Enter the title, short description, and detailed description of the service.
5. Save the entry after filling in all required information.

Step 5: Display the Service Metaobject on Your Store

Setting Up Service Cards on the Service Page

1. Access the Theme Editor:

   • Go to Online Store > Customize in your Shopify Admin.

2. Add a Section for Service Cards:

   • In the Theme Editor, add a new section where you want to display the service cards. Choose a collection grid, custom content section, or a dedicated service section if available.

3. Add a Block for Each Service:

   • Inside the section, add blocks for each service card.
   • For each block, locate the input field where you specify the metaobject.

4. Link the Metaobject:

   • In the input field, enter the name of the metaobject you created, which is "service".

Setting Up the Service Details Page

1. Create or Edit the Service Details Page Template:

   • Go to Online Store > Customize.
   • Navigate to the Service Details Page template (or create one if it’s not available).

2. Add Fields for Title, Image, and Description:

   • Add or configure the blocks to display the title, image, and description on the Service Details Page.

3. Connect Dynamic Sources for Details:

   • For each field on the details page:
     • Title: Click the input field, select connect dynamic source, and choose the title field from the service metaobject.
     • Image: Click the input field, select connect dynamic source, and choose the image field.
     • Description: Click the input field, select connect dynamic source, and choose the description field.