Create product

Before you start adding products to your store we recommend you to check information by the link below:

Products - official documentation

Add product variants

Variants - official documentation

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

This options will work with: product item, quick view, product page

Additional functions

For more information we recommend you to check the video below:

inbuilt product editor *NEW

All options below can be added as unique parameter for each product via metafields

Parameter Options
Related Products Separates custom collection with product for the best promotion
Countdown Works on a product item and a 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 Works with product items. In hover, you may see the second product image. Parameter - true/false
Custom Html Placed on a product page after the price
Small Description Placed on a Quick View. Default - main description
Product Thumbnail Description Small description on product thumbnail in grid mode. Will work after product title
Size Chart You may use a custom text or disable pop-up for the selected product
Shipping You can use a custom text or disable popup for the selected product
Show Images Show images only by selected variant

How to use the inbuild product editor

INSTALL - ExIm App
Attention:
After your products were configured please delete or hide the page with editor.
  • Publish wokiee theme
  • Open page editor in admin panel.
  • Create a new page with a secret name.
  • Select the page template page.metafield_editor
  • Save page
  • Open the page with the Shopify default button View page
    product page product page
  • Also, you may simplify the configuration of your products using the video below:
    inbuilt product editor *NEW

Product page settings

In this section in your Admin Panel, you can make ALL CHANGES for your product: design, show/hide elements in the page, change tabs design, add trust badges, change variants swatches design. With product page section you may get all available designs of the theme.

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

product page

Settings:

  1. Product page design: Default, Two columns, Thress columns

    product page

  2. Product tabs design: Default, Full width tabs in column, Full width tabs in row

    Tabs designs:

    Tabs Description Type Options
    Default product page
    Full width tabs
    in column
    product page
    Full width tabs
    in row
    product page
  3. General options

    product page

  4. Gallery settings / Gallery design

    product page

  5. Product page main information: Product main blocks, SKU, quantity

    product page

  6. Trust badge image for desktop / mobile

    product page

  7. Options design: buttons / combobox

    product page

  8. Product page text information: information, vendor, type, barcode, tags, popular product tags field, wishlist button, compare buttons

    product page

  9. Popup: SIZE GUIDE

    This content is common for all products. If you need a unique block work with metafields

    product page

  10. Popup: Shipping information

    This content is common for all products. If you need a unique block work with metafields

    product page

  11. CONTENT

    Go to customize theme. Open product page.
    Sections -> Product pages -> CONTENT

    product page

    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. These products work with metafield editor.


    Related products are of 2 types:
    Type old work with old shopify method by tags.
    Type new work with new shopify documentation method.


Size chart modal html

GET THE MODAL CODE Size Chart

Shipping modal html

GET THE MODAL CODE SHIPPING

Unique tabs

Unique Tabs
  • Go to Theme Customizer
  • Open product page with Shopify menu
  • Open settings section. Add the Unique tab in the section product page product page
  • Add the key to the tab. Key will separate the product information with tab product page
  • Open Inbuild product editor
  • Find the product you need to edit
  • Click the button Add unique tab for product page.
  • Key from product page: your name from section
  • Value: your html content
  •  Save product page
  • Result product page

Unique Tabs. Old method

Unique Tabs

Add filters

Add filters in shopify navigation admin panel Enable product filtering

Video instruction Real filtres

Filter settings

Real filter settings you can change in the collection page settings:

Real filtres
  • Block options 1: You can set the title of the collection page tabs to uppercase. See image.
  • Real filtres
  • Block options 2: Find the field Tabs will be closed by the default.
    In a new window, open the shopify admin navigation bar. Scroll down to filters.
    You need to select a filter name and copy the selected text.
    Paste the copied text into the theme settings field The tab is closed by default. Separate all copied texts with commas. Example: Product type, Color, Brand
    By default tabs on the collection page will be closed. See image.
  • Real filtres Real filtres
  • Block options 3: Find the field Change tab name from navigation admin.
    In a new window, open the shopify admin navigation bar. Scroll down to filters.
    You need to select a filter name and copy the selected text.
    Paste the copied text into the theme settings field Change tab name from navigation admin. Separate current filter name with this symbol _. Example: Brand_Vendor
    Separate new copied texts with commas. Example: Brand_Vendor, Price_Price Range, Product type_Type
    By default tabs on the collection page will have a new name. See image.
  • Real filtres Real filtres
  • Block options 4: Find the field Show filter links as color.
    In a new window, open the shopify admin navigation bar. Scroll down to filters.
    You need to select a filter name and copy the selected text.
    Paste the copied text into the theme settings field Show filter links as color. Separate all copied texts with commas. Example: Color, Material
    Links on the collection page will appear as colored squares. See image.
  • Real filtres Real filtres
  • Block options 5: Find the field Show filter links as buttons.
    In a new window, open the shopify admin navigation bar. Scroll down to filters.
    You need to select a filter name and copy the selected text.
    Paste the copied text into the theme settings field Show filter links as buttons. Separate all copied texts with commas. Example: Size, Material
    Links on the collection page will appear as buttons. See image.
  • Real filtres Real filtres

In the block settings Price range styles you can change the design of the price filter. See image.

Real filtres

Additional filters based on tags

Add Filters
Attention:
Additional filters work only with a product field Tags! Real options do not work with filters based on tags! It caused by Shopify software limitations.
Bug Report
Attention:
Tags and filters do not work together.
Currently, you can use either Shopify filters or tags to make the collection page sidebar work properly.

Please be informed that if you do not have tags for your product, it won't be shown on your collection page with the Filter use.

Kindly note that you may use tags only with logical "AND", not with "OR". "AND" option means that all chosen tags are included in the product.

You can use additional filters as: sale product, popular tags, other. Tags must be duplicated from products in collection page settings in customize theme options.

Attention:
In the description, you will see the old information on how to set up additional filters.
The purpose of the description is to give an idea of how to organize additional filters.
  • Write all the filters in product in the tags field: size, color, price, popular tags and other product page
  • Go to Theme Customizer select “Theme Settings” tab and choose the Collection Page
  • Sort tags by filters groups. Example: product page 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 written tags select Popular Tags product page
  • Open Theme Customizer, on the Top of the screen, click on the Home page drop-down menu and select the “Product pages” option. In the “Sections” tab click on the  “Product pages” button. product page
  • Scroll down to the “product information” section and in the “Popular product tags” field paste all popular tags suitable for your product: tags page
  • Go to Customize theme > Theme settings > Collection page.
    Duplicate the written tags for the collection page in the appropriate field: product page

Colors and images

You may add new colors or images on the Theme Customizer page. You need to select “Theme settings" and choose “Product Colors and Textures” field.

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

Compare

Attention:
You may add a selected product variant in the compare section. Variants of information are generated by the options of the product variant: Names and Values.
  • You may enable or disable the “Compare” option in the Theme Customizer . You should select Theme settings and choose settings. Scroll down to the Compare in Theme option.
  • You may change the text in the Edit Language option and choose the compare tab.

How to create compare description?

  • Please install this metafield APP
  • Select the product you need to edit
  • To make the same description for all variants of the product, you should add the Metafield.

    Namespace: description
    Key: small_description
    Value: your texts


  • To make different descriptions for all variants of the product add the Metafiled.

    Namespace: description
    Key: compare
    Value: your texts

    compare page compare page compare page compare page compare page compare page
  • If a product has both - a small_description and a variant compare description - the variant compare description will be shown.

How to create preorder product?

INSTRUCTION

Show images only by selected variant

Attention:
Use the same image size for your products. You should work with the option from the first group. Example: COLOR(1), SIZE(2), MATERIAL(3). The Main option is COLOR!
INSTRUCTION
  • Open your product in the Admin Panel
  • Upload your images and group them by the color product page
  • Set images for each variant product page
  • Install the ExIm APP and create your secret page for metafield edits in products.
  • Create string for metafield. Values separated by comma:

    First option is color. Color values: Blue, Grey, Brown

    product page

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

    Attention:
    Please do not use spaces with comma

    We will list our pictures by color. We will separate them by comma:
    Blue,Blue,Blue,Blue,Grey,Grey,Grey,Grey,Brown,Brown,Brown,Brown

    product page

    Example:

    product page
  • Open Inbuild product editor
  • Select product for edit
  • Paste our created string in the field with name "Show images only by selected variant" compare page
  • Click button Save
  •  Add created metafield.
     Result: compare page
BACK TO TOP