Create product

Products - official documentation


Variants - official documentation

You can add in the product all supported variants by default: size, color, material

This options will be work in: product item, quick view, product page

Additional Functions

inbuilt product editor *NEW
Parameter Options
Related Products Separate custom collection with product for best promotion
Countdown Work on product item and product page
Video Video link from some video channel
Icon Featured Product item icon Custom Text
Icon New Product item icon New. You can disable icon or show icon always
Icon Sale Product item icon Sale. You can disable icon
Hover Work with product item. In hover you can see second product image. Parameter = true/false
Custom Html Work on the product page after price
Small Description Work on the Quick View. Default - main description
Size Chart You can use custom text or disable popup for selected product
Shipping You can use custom text or disable popup for selected product
Show Images Show images only by selected variant

How to use inbuild product editor

After products been configured please delete or hide page with editor.
  • Publish theme wokiee
  • Open page editor in admin panel.
  • Create new page with secret name.
  • Select page template page.metafield_editor
  • Save page
  • Open page with button View page
    product page
  • Configure products quick and easy:
    inbuilt product editor *NEW

Product Page Settings

In this section you can edit product page: design, show/hide elements in the page, change tabs design, add trust badges, change variants swatches design. With product page section you can get all available theme designs.

Go to customize theme. Open product page. Edit product page section:

product page


product page product page product page product page product page

In the section you can find TRUST BADGE image options. Work after button add to cart

In the section you can find settings for: Size Chart modal, Shipping modal, Message modal

In the section you can edit content for the page design PRODUCT PAGE - THREE COLUMNS

In the section you can enable CUSTOM RELATED PRODUCTS. This products work with metafield editor

product page

Related products have two types:
Type old work with old shopify method by tags.
Type new work with new shopify documentation method. *Available from theme version 1.6.0

Tabs designs:

Tabs Description Type Options
Default product page
Full width tabs in column product page
Full width tabs in row product page

Size Chart Modal html


Shipping Modal html


Unique Tabs

Unique Tabs. NEW


Unique Tabs
  • Go to Customize Theme
  • Open product page with shopify menu
  • Open section settings. Add Unique tab in the section product page
  • Add key to the tab. Key will separate product information with tab product page
  • Open Metafield Editor from admin panel tab Apps
  • Open editing product
  • Click button Add New Metafield. Namespace = description
  • Key = your name from section
  • Value = your html content
  • Save product page

Add Filters

Add Filters
Filters work only with product field Tags! Real options not work with filters! Caused by Shopify software limitations.
product page
  • Write all filters in product in the field tags: size, color, price, popular tags and other
  • Go to Customize Theme > General Settings > Collection Page
  • Sort tags by filters groups. Example: product page
  • You can translate tag in NON-LATIN characters. Example: englishTag__Russian(Arabic, China, or else). Separate item from translate with two underline symbols translate

Product Page Tags

  • From all writed tags select Popular Tags product page
  • Go to Customize Theme > Shopify Navigation > Product Page > Edit Section product page
  • Go to PRODUCT INFORMATION > Popular product tags and paste your all popular tags: tags page

Colors and Images

Add new colors or images you can here: Customize Theme > General Settings > Product Colors and Textures

  • PRODUCT COLORS. Write color name and color code. Separate colors by comma.
  • COLOR WITH BORDER. When color = background color need to add border. Write color name and this color will have border.
  • ASSOCIATE PARAMETER WITH IMAGE. Write parameter name and upload image. colors page


In compare you can add selected product variant. Variants information generate by product variant options: Name, Values.
  • Compare you can enable/disable in Customize Theme > Theme settings > Settings > Compare
  • Text you can change in Edit Language > tab Compare

How to create compare description?

  • Open metafield APP
  • Select product for edit
  • If you are want same description for all variants in product add metafield in product

    Namespace: description
    Key: small_description
    Value: your texts

    compare page
  • If you are want different description for all variants in product add metafield in product variant

    Namespace: description
    Key: compare
    Value: your texts

    compare page compare page
  • If product have small_description and variant compare description will be show variant compare descrition

How to create preorder product?


Show images only by selected variant

In the product use same size images! Work with options from first group. Example: COLOR(1), SIZE(2), MATERIAL(3). Main option from group COLOR!
Install Metafield APP
  • Open your product in admin panel
  • Upload your images and group images by color product page
  • Set images in variant product page
  • Create string for metafield. Values separated by comma:

    First option is color. Color position: Blue, Beige, Grey

    product page

    In the image example are 12 images.
    4 images = Blue
    4 images = Beige
    4 images = Grey

    We will list our pictures by color. Values we separate by comma:

    product page


    product page
  • Open Metafield Editor from admin panel tab Apps product page
  • Select product for edit
  • Group image values:

    Namespace: productgallery
    Key: group

    compare page
  • Add created metafield.
    Result: compare page