Get Ragnok Here!

Documentation

Ragnok

shopify

Metafields

Specifications

The Ragnok theme supports the ragnok.specifications metafield on products.

We use this field to allow you to add specification information to your products so that your customers can easily view additional information which is not linked to a product variant.

Below, you will find information on how to create the specifications metaobject and metafield, how to add specifications to a product and display them:

  1. Creating the Product Specification metaobject
  2. Creating the Specifications metafield
  3. Adding specifications to a product

Frequently asked questions:


1. Creating the Product Specification metaobject

First, you need to create the Product Specification metaobject, which will contain all specification related data.

a) From your Shopify admin, go to Settings > Custom data.

b) Scroll down to Metaobjects and click Add definition.

c) In the Name field, enter “Product Specification“.

d) Add the following fields:

  • Name
    • Click Add field.
    • Select Single line text.
    • In the Name field, enter “Name“.
    • In the Description field, enter “Uniquely identifies the specification name and value pair (i.e.: “Dimension 400×400”)“.
    • Click Add to add the field.
  • Specification Name
    • Click Add field.
    • Select Single line text.
    • In the Name field, enter “Specification Name“.
    • In the Description field, enter “Name of the specification (i.e.: “Dimensions”)“.
    • Click Add to add the field.
  • Specification Value
    • Click Add field.
    • Select Single line text.
    • In the Name field, enter “Specification Value“.
    • In the Description field, enter “Value of the specification (i.e.: “400x400px”)“.
    • Click Add to add the field.
  • Icon
    • Select Single line text.
    • In the Name field, enter “Icon“.
    • In the Description field, enter “The icon that will be used when displaying the specification.“.
    • Enable the Limit to preset choices option.
    • Add a new item for each icon and enter its name, you can view all supported icon names in this table.
    • Click Add to add the field.

e) When you are done, click Save to finish and your Product Specification metaobject will be created.


2. Creating the Specifications metafield

a) From your Shopify admin, go to Settings > Custom data.

b) Select Products and click Add definition.

c) In the Name field, enter “Specifications“.

d) In the Namespace and key field, enter “ragnok.specifications“.

e) In the Description field, enter “Name, value and icon for each specification that the product contains.

f) Click Select type, and then select “Metaobject” (under “Reference“).

g) Click on Select metaobject and select the previously created Product Specification metaobject and select List of entries, which will allow you to enter more that one specification per product.

h) Click Save to create the Specifications metafield.


3. Adding specifications to a product

In order to add specifications to a product, you need to:

  1. Create the specification
  2. Assign the specification to a product

Create the specification:

  • Go to your backend Content > Metaobjects menu.
  • Select Product Specification
  • Click on the Add Entry button at the top right side of the screen
  • Add your desired specification details and click on the Save button at the bottom right of the screen.

Assign the specification to a product:

  • Go to your backend Products menu and click on the product you want to add specification information to
  • Scroll to the bottom until you find the Product metafields section
  • Click on Specifications
  • Select the specification you want to add
  • Click on the Save button to update your product with the new specification information

Frequently Asked Questions

What specification icons are supported by the theme?

The theme supports the following specification icons (you can use any of the following in the Icon field of the Product Specification metaobject):

Supported specification icons
Color Palette
Calendar
Ruler File
Pixel Grid
Dumbbell
Vector Line
Font Box
Update Arrows
Code Screen
Monitor
Life Saver
Play Progress