Build a Single Product Page

INCOMPLETE: WORK IN PROGRESS
A single product page is a page that is designed to showcase a single product or service. This could be a Simple Product, a Variable Product, a Group Product or an external Product. 
Generally a single product page contains the following:
Product name
Product description
Product photo/Image 
Product price
Variation swatches
Add to Cart button
Single Product Page
Navigate to the WordPress dashboard.
Open Cwicly.
Open Themer and in the Templates tab click "Add Custom Template" button.
This opens a "Custom Template" modal.
Add required name.
Click "Create".
Visibility Conditions
Find the new template in the Themer.
Click "Visibility Conditions" icon.
Click "+" to add a new Visibility Condition.
​
​
In the "Single Product Page Visibility Conditions" modal:
Set Visibility Condition to "Show if".
Set Type to "Singular".
Set Including to "Products".
Set Product Type to "All".
Click "X" to close Single Product Page Visibility Conditions modal.
Edit Single Product Page
Click "Edit" icon to open template in the editor.
This opens the Single Page Product page in the editor.
Add Columns Block
Let's add a Columns Block to contain all the information.
Let's choose a 2 columns variety.
With the Columns block selected, open the Grid Editor.
Set 5 Fractions.
Drag the Columns to form a 3 to 2 ratio as below.
The First Column (Images) will contain the product Images and the Second Column (Info) will contain the product information. 
Set a 70px upper margin (Design tab, Margin and Padding tab).
Images Column and Info Column
It is helpful to change the name of elements in the navigator to help you keep track of where you are.
Let's rename our Columns to Images Column and Info Column.
Images Column
With the Images Column selected, set Flex direction in the Primary tab.
Images Repeater
With the Images Column selected, add a Repeater.
Rename the Repeater to Images Repeater.
In the Source tab of the Primary tab, set Source to Woo Gallery.
Click Dynamic Preview and choose the product you wish to showcase in the dropdown.
Until you have done this, you will not see anything.
This could be a Simple Product, a Variable Product, a Group Product or an external Product. 
The type of Product being showcased depends on what you specify in the Dynamic Preview.
The template we are creating can be used for all these different Product types. We will go through each one in turn.
In the Dynamic preview dropdown, input the title of your Product and select it in the dropdown. 
You will notice that the Dynamic Preview icon is now orange in colour.
The Repeater Placeholder will now be apparent.
Click "+ Add Block".
Add an Image block.
Now we need to set up the repeater.
With the Images Repeater selected, in the Layout tab of the Primary tab, set Grid, Toggle on Auto grid.
Set a 2px row and column gap.
With the Images Repeater selected, open the Grid Editor.
Set Fractions to 2.
Click "X" at top right corner of Module 3 to remove.
Click "X" to close Grid Editor.
With Image block selected, set Source to Dynamic (Primary tab, Source tab).
Set Data to WooCommerce.
Set WordPress to WooCommerce Gallery.
You should have something like this (with your own custom images).
Info Column
With the Info Column selected, set Layout to Flex, Column and Space between (Primary tab).
With the Info Column selected, add a Div.
Let's rename it the Info Div as it will contain most of our Product information.
Let's style the Info Div.
In the Margin and Padding tab (Primary tab) let's add a 50px padding all round.
With the Info Div selected, in the Layout tab of the Design tab, open the Position tab.
Set Position to "sticky".
Set position as 100px top and bottom.
Title Price 
With the the Info Div selected, add a Div.
Let's rename it "Title Price Div".
Let's set up some styling.
In the Layout tab of the Primary tab, set Flex, Row, Centre, Space between.
Add a 5px bottom Margin (Margin and Layout tab, Primary tab).
With the Title Price Div selected, add a Heading.
Post Title
Let's rename it Post Title.
With the Post Title Heading selected, click Dynamic Values in the toolbar to open the Dynamic Content Modal.
Set Source to WordPress.
Set WordPress to Post Title.
You should see the title of your Single Product appear.
Let's style  the Title to make it stand out.
In the Primary tab, Typography tab, set Font to Inter, Font Size to 1.2EM and Font Weight to 600px.
Price Div
Select the Title Price Div and add a Div.
Let's rename it Price Div.
Let's set up the layout of the Price Div.
In the Primary tab, Layout tab, set Flex, Column, Flex end.
With the Price Div selected, add a Paragraph.
Let's rename the Paragraph Price.
With the Price paragraph selected, click Dynamic Values in the toolbar.
In the Dynamic Content modal, set Source to WooCommerce.
Set WooCommerce to Price.
Set Type to "Formatted Tax Currency".
Let's Style the Price paragraph.
In the Primary tab, Typography tab, set inter as the Font Style and a Font Weight of 600Px.
"On Sale"
We need to add a condition to hide the normal price in case the article is "On Sale".
Click the Conditions icon.
Click "+" in the Show Conditions modal to add a Condition.
Set Condition to "On Sale".
Set Operator to "False".
Click "+" to add a new Condition.
In the Condition dropdown, select Product Type.
Set Operator to "===".
While we are here and as we are building a Product Page for all types of Product, let's set Data to "Grouped product".
As the condition is false, if your product is a Grouped product it will not show.
When you have finished adding your Conditions,
Close the dialog by clicking the "X" icon.
With the Price Div selected, add a Div which will contain Sale Price.
Let's rename it  "Sale Price Div".
​
​
Style the Div as required. We have set Flex, 5px Column gap in the Layout tab of the Primary tab.
Now let's set the conditions for when the Sale Price will appear.
Click the Conditions icon to open the Conditions modal.
Click the "+" icon in the Show Conditions modal to add a new Condition.
​
​
Set Condition to "On Sale" in the dropdown.
Set Operator to "true".
Click "+" to add another condition to exclude Grouped Products from a sale.
Set Condition to Product Type.
Set Operator to "!=" (not equal to).
Set Data to "Grouped product".
Click "X" to close dialog.
Barred Regular Price
With Sale Price Div selected, add a Paragraph.
The Paragraph will contain the regular price with a line through as it is barred when the article is on sale.
Change Paragraph name to "Barred Regular Price".
With the Barred Regular Price paragraph selected, click "Dynamic Values".
Set Source to WooCommerce.
Set WooCommerce to "Regular Price".
Set Type to "Formatted Tax Currency".
Style the Paragraph as required, such as Font type and weight (Primary tab, Typography tab).
Sale Price
Now we need to add the Sale Price field.
With Sale Price Div selected, add a Paragraph.
Since the Paragraph will contain the Sale Price, let's rename it "Sale Price".
​
​
With Sale Price paragraph selected, click "Dynamic Values" icon.
Set Source to WooCommerce.
Set WooCommerce to Sale Price.
Set Type to "Formatted Tax Currency".
Style the Sale Price paragraph, for example set Font type and weight (Primary, Typography tabs).
SKU
Now let's add the SKU.
With Info Div selected, add a Paragraph.
Let's rename it "SKU".
​
​
With SKU paragraph selected, open Dynamic Values.
Set Source to WooCommerce.
Set WooCommerce to SKU.
Set Static Text to "Before".
Style the SKU paragraph as required.
Adjust Margin and Padding as required. 
In this case, we are adding a 80px lower Margin for spacing.
Swatch Variations
We are now going to set up our Swatch Variations.
Since a Single Product does not have Swatch Variations, we will preview a Variable Product.
Click Dynamic Preview.
Variable
Input to select a Variable Product like the one that we set up together, in this example High Heeled Boots.
With the Info Div selected, add a Repeater.
With the Repeater selected, set Source to Variable Product.
Rename the Repeater to Swatch Repeater.
​
​
Style the Swatch Repeater. 
In the example, we have added a Flex layout, Column direction and 25px Row Gap.
We need to set the Conditions so that the Swatch Repeater only appears for Variable Product Types.
Remember that the Single Product Page can be used for different Product Types.
Open the Conditions panel.
Click "+" to add a new Condition.
​
​
Set Condition to Product Type.
Set Operator to "===".
Set Data to "Variable Product".
Click "X" to Close Dialog.
With the Swatch Repeater selected, click on the "+ Add Block" button.
Let's add a Div.
Let's rename it "Swatch Repeater Div" as it will contain all the Swatch information, such as labels and swatches.
​
​
Style the Swatch Repeater Div layout as required.
In this example Flex, Centre, Space between.
With the Swatch Repeater Div selected, add a Paragraph which will show the Label titles.
Let's rename the Paragraph "Variation Label".
​
​
Open Dynamic Values in the Toolbar.
Set source to WooCommerce.
Set WooCommerce to Variation Label.
It should look like this with the Variation Labels of your chosen product.
Style the Variation Label paragraph as required.
In the example we have styled the Typography font, size and weight.
With the Swatch Repeater Div selected, add a Div.
This will contain all your Swatches.
Let's rename it "Swatches Div".
​
​
Colour Swatch
With the Swatches Div selected, let's add a Div to contain the Colour Swatch.
Let's name it "Colour Div".
​
​
Style the Layout.
In this example, Flex and 5px Column gap.
With the Colour Div selected, add a Swatch block.
Rename it "Colour Swatch".
​
​
With the Colour Swatch selected, in the Primary tab, Settings tab.
Set Attribute to Colour in dropdown.
You won't see anything appear yet as you have to give the Swatch a size.
So in the Sizing tab of the Design tab, set a 15px width and height as required.
You will now be able to visualise the Colour Swatch.
Let's style the Colour Swatch.
With the Colour Swatch selected, in the Radius and Width tab in the Design tab, set an equal Radius of 20px.
Material Swatch
With the Swatches Div selected, add a Div.
Let's rename it Material Div.
​
​
Let's set Flex display and 5px Column gap. (Primary, Layout, Display tabs).
With the Material Div selected, add a Swatch block to contain the Material Swatches.
Let's rename it Material Swatch.
​
​
With the Material Swatch block selected, in the Primary tab, Settings tab:
Set Attribute to Image.
You will not see anything until you set a size.
In the Sizing tab of the Design tab, set width and height as required.
In this example 50px height and width.
With the Material Swatch selected, in the Design tab, Background tab, Sizing and Positioning tab:
Set 50px left and 50px top position.
Set Size to "Contain".
Let's add some borders to Style our Material Swatch.
With the Material Swatch selected, in the Radius and Width tab (Design tab, Borders tab),
Set an equal Radius of 5px.
Size Swatch
With the Swatches Div selected, add a Div.
Let's rename it Size Div.
​
​
With the Size Div selected, add a Swatch block.
Let's rename it Size Swatch.
​
​
With the Size Swatch selected, in the Setting tab of the Primary tab:
Set Attribute to Select.
Let's style the Size Swatch.
In this example, we have styled Font type, size and weight (Design tab, Typography tab).
Let's set a Width of 100% (Design tab, Sizing tab).
Let's add some Padding in the Spacing tab ( Design tab, Margin and Padding tab).
In this example 2px upper and lower and 10px left and right Padding.
Let's style the borders:
In the Radius tab of the Borders tab of the Design tab,
Add a 5px equal radius.
Set Border to Solid, choose a Border colour as required.
Set Border width to 1px all round.
Grouped Product display
Click Dynamic Preview and choose the Grouped Product you wish to add in the dropdown.
As we are now previewing a Grouped Products, the Swatch Variations of the Variable Product are no longer visible but we are able to use the same template (with the appropriate visibility conditions).
With the Info Div Selected, add a Repeater.
With the Repeater block selected, in the Source tab of the Primary tab, set Source to Grouped Product.
Style the Repeater as required.
In this example, in the Primary tab, Layout tab, set Flex, Column direction and a row gap of 10px.
In the Design tab, Margin and Padding tab, Spacing tab, set a lower 50px Margin.
Open the Conditions modal.
Click "+" to add a new Condition.
Set Condition to Product Type.
Set Operator to "===".
Set Data to "Grouped product".
Click "X" to close Conditions Modal.
Let's rename the Repeater "Grouped Product Repeater".
With the Grouped Product Repeater block selected, add a Div.
Let's rename it "Grouped Product Div".
​
​
Style the Grouped Product Div as required.
In this example, Flex, Row direction, Centre, Space between (Primary, Layout tab).
With the Grouped Product Div selected, add a Div.
Rename it Image, Icon, Quantity Div.
​
​
Style the Div as required.
In this example, Flex, Row, Centre, Space between.
And a Column gap of 10px.
With the Image, Icon, Quantity Div selected, let's add a Div.
Rename it "Image, Quantity Div".
​
​
Style as required.
In this example, Flex, Centre, Column gap 8px (Primary, Layout tabs).
With the Image, Quantity Div selected add an Image block.
Rename it Grouped Product Image.
​
​
With the Grouped Product Image selected, in the Primary tab, Source tab, set Source to Dynamic.
Set Data to WordPress.
Set WordPress to Featured Image.
In the Size tab, set 90px Height and 70px width.
Set Object fit to Cover.
With the Image, Quantity Div selected add a Div.