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
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
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 - ThemePlus 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
  • 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:

product page product page product page product page product page

In the section you can find TRUST BADGE image options. Placed 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. These products work with metafield editor.


product page

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



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

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
  • 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

OLD METHOD

Unique Tabs

Add Filters

Add Filters
Attention:
Filters work only with a product fieldTags! Real options do not work with filters! It caused by Shopify software limitations.

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

It's an official Shopify limit. Shopify can filter products only with the tags included in the Shopify.

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.

All product variants: prise, size, color, etc., must be duplicated as a tag, so you could create filters.

product page
  • Write all the filters in product in the tags field: size, color, price, popular tags and other
  • Go to Theme Customizer select “Theme Settings” tab and choose the 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 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

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?

  • Open the 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

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

    Namespace: description
    Key: compare
    Value: your texts

    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 ThemePlus 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: White, Blue

    product page

    In the image example are 10 images.
    5 images = White
    5 images = Blue

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

    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