Before you start adding products to your store we recommend you to check information by the link below:Products - official documentation
ADD PRODUCT VARIANTSVariants - 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
For more information we recommend you to check the video below:inbuilt product editor *NEW
|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 editorINSTALL - ThemePlus APP
- 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
- 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:
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.
Related products are of two types:
Type old work with old shopify method by tags.
Type new work with new shopify documentation method.
|Tabs Description Type||Options|
|Full width tabs in column|
|Full width tabs in row|
Size Chart Modal htmlGET THE MODAL CODE Size Chart
Shipping Modal htmlGET THE MODAL CODE SHIPPING
Unique TabsUnique Tabs
- Go to Theme Customizer
- Open product page with Shopify menu
- Open settings section. Add the Unique tab in the section
- Add the key to the tab. Key will separate the product information with tab
- 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
OLD METHODUnique Tabs
Add FiltersAdd Filters
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.
- 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:
- 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 written tags select Popular Tags
- 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.
- Scroll down to the “product information” section and in the “Popular product tags” field paste all popular tags suitable for your product:
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.
- 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.
Value: your texts
- To make different descriptions for all variants of the product add the Metafiled.
Value: your texts
- 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
- Open your product in the Admin Panel
- Upload your images and group them by the color
- Set images for each variant
- 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
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:
- Open Inbuild product editor
- Select product for edit
- Paste our created string in the field with name "Show images only by selected variant"
- Click button Save
- Add created metafield.