Create product
Products - official documentationAdd Product Variants
Variants - official documentationYou 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 EDITORParameter | 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 Settings
Product Page SettingsGo to customize theme. Open product page. Edit product page section:
Options:
Tabs Description Type | Options |
Default | |
Full width tabs in column | |
Full width tabs in row |
Size Chart Modal html
GET THE MODAL CODE Size ChartShipping Modal html
GET THE MODAL CODE SHIPPINGProduct description html examples
GET THE MODAL CODE Design 1GET 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
- Add key to the tab. Key will separate product information with tab
- 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
- Result:
Add Filters
Add Filters
Attention:
Filters work only with product field Tags! Real options not work with filters! Caused by Shopify software limitations.
- 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:
- You can translate tag in NON-LATIN characters. Example: englishTag__Russian(Arabic, China, or else). Separate item from translate with two underline symbols
Product Page Tags
- From all writed tags select Popular Tags
- Go to Customize Theme > Shopify Navigation > Product Page > Edit Section
- Go to PRODUCT INFORMATION > Popular product tags and paste your all popular tags:
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.
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!
- Open your product in admin panel
- Upload your images and group images by color
- Set images in variant
- 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
In the image example are 10 images.
5 images = White
5 images = BlueWe will list our pictures by color. Values we separate by comma:
White,White,White,White,White,Blue,Blue,Blue,Blue,BlueExample:
- Open Inbuild product editor
- Select product for edit
- Paste our created string in field with name "Show images only by selected variant"
- Click button Save
- Add created metafield.
Result: