Create product

Products - official documentation

Add Product Variants

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

INBUILD METAFIELD EDITOR
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
Compare Description Work on the compare page. By default work Small 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

INSTALL - EXIM APP
Attention:
After products been configured please delete or hide page with editor.
  • Publish theme Yanka
  • 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
INBUILD METAFIELD EDITOR

Product Page Settings

Product Page Settings

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

product page

Options:

product page product page product page product page product page product page product page product page product page
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

Product description html examples

GET THE MODAL CODE Design 1

GET THE MODAL CODE Design 2

GET THE MODAL CODE Design 3

Unique Tabs

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 Inbuild product editor
  • Find editing product
  • Click 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

Add Filters

Add Filters
Attention:
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

Compare

Attention:
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 Inbuild product editor
  • Select product for edit
  • Add you description in field Compare

Show images only by selected variant

Attention:
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!
Instruction
  • Open your product in admin panel
  • Upload your images and group images by color product page
  • Set images in variant product page
  • Install ExIm APP and create your secret page for edit metafields in products.
  • Create string for metafield. Values separated by comma:

    First option is color. Color position: White, Blue

    product page

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

    We will list our pictures by color. Values we separate 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 field with name "Show images only by selected variant" compare page
  • Click button Save
  • Add created metafield.
    Result: compare page
BACK TO TOP