fbpx

Create Custom Service

Follow these steps to set up a Service Metaobject with customizable fields:

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.
What are your feelings
Scroll to Top