Skincues Theme

The Skincues is a premium eCommerce WordPress block theme that is perfect for displaying your beauty products in a classy and premium look with its sleek and elegant design. This WooCommerce theme is ideal for beauty and health-related businesses, wellness centers, dermatologists, cosmetologists, and SPAs.

1. Log in to your WooCommerce.com account.
2. Navigate to the Downloads page. You will see the Drinkify theme and click on Download to get a compressed skincues.zip theme file on your computer.
3. Log into the WordPress admin panel.
4. Go to Appearance > Themes and click on the Add New button, at the top of the screen.
5. In the Add Themes screen, click on Upload Theme.
6. Click on Choose File, and then browse for the compressed skincues.zip theme file on your computer.
7. Click on Install Now to start the installation.
8. After the installation is done, click on the Activate button.

More information on Adding New Themes.

Activate Skincues Theme

Make sure that the WooCommerce plugin is installed and active on your WordPress.

Installing WooCommerce

1. Log into the WordPress admin panel.
2. Go to Plugins > Add New.
3. Search for “WooCommerce”.
4. In the search results, click on Install Now.
5. After the installation is done, click on the Activate button.

Importing demo content is an easy way to replicate the demo site and start editing the content. It will allow you to quickly edit everything instead of creating content from scratch.

Navigate to the “Appearance > Demo Content” or click on the “Import” button.

The Skincues Theme is a block theme that enables the Site Editor. The Site Editor allows you to design the entire site, including the header, footer, and everything in between, with blocks and patterns. It gives you greater control over how your site looks. You can rearrange the blocks and patterns and edit templates and template parts.

The Skincues is a block theme which means you can edit the elements of the theme using the Site Editor.

1. Log into the WordPress admin panel.
2. Go to Appearance > Editor. The Site Editor will then load the front page of your site so you can start editing.
3. Now, you can edit the blocks (headings, paragraphs, images, buttons, and so on) and patterns directly. Add or remove the blocks and patterns, and manage their position by moving up and down as per your need.

Returning To The Dashboard

To go back to your dashboard, click the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation.

1. Access the Site Editor as mentioned above.
2. Click on Templates on the left side of the screen. Now, you will see the templates and you can click on Manage all templates to view all templates.
3. Click on the Template that you want to access/edit.

The Skincues theme offers 26 Custom Templates. You can customize these templates if you feel like changing anything on a specific template and wish to see those changes across your site. Basically, a template defines the structure of the content area of the site, such as a Front Page, 404, Search, Archive, Single post, Page, Shop, etc.

Here is the list of templates available templates within Skincues:

1. Page: 404: Displays when a visitor views a non-existent page, such as a dead link or a mistyped URL.
2. All Archives: Displays any archive, including posts by a single author, category, tag, taxonomy, custom post type, and date. This template will serve as a fallback when more specific templates (e.g. Category or Tag) cannot be found.
3. Archive Product: Displays your products.
4. Archive Product (Full Width): Displays your products on a full-width layout.
5. Archive Product (Sidebar on Left): Displays your products with a Sidebar on the Left.
6. Archive Product (Sidebar on Right): Displays your products with a Sidebar on the Right.
7. Blank: The blank template can be used to display the contents of a post or page.
8. Blog Page (No Sidebar Full Width): Displays the Latest posts on a full-width layout.
9. Blog Page (Sidebar on Left): Displays the Latest posts with a Sidebar on the Left.
10. Blog Page (Sidebar on Right): Displays the Latest posts with a Sidebar on the Right.
11. Blog Home: Displays the latest posts as either the site homepage or as the “Posts page” as defined under reading settings. If it exists, the Front Page template overrides this template when posts are shown on the homepage.
12. Cart: Displays the shopping cart page.
13. Checkout: Displays the checkout page.
14. Front Page: Displays your site’s homepage, whether it is set to display latest posts or a static page. The Front Page template takes precedence over all templates.
15. Index: Used as a fallback template for all pages when a more specific template is not defined.
16. Pages: Display all static pages unless a custom template has been applied or a dedicated template exists.
17. Product Search Results: Displays search results for your store.
18. Search Results: Displays when a visitor performs a search on your website.
19. Single Posts: Displays single posts on your website unless a custom template has been applied to that post or a dedicated template exists.
20. Single Post (No Sidebar Full Width): Displays a single post on a full-width layout.
21. Single Post (Sidebar on Left): Displays a single post with a Sidebar on the Left.
22. Single Post (Sidebar on Right): Displays a single post with a Sidebar on the Right.
23. Single Page (No Sidebar Full Width): Displays a single page on a full-width layout.
24. Single Page (Sidebar on Left): Displays a single page with a Sidebar on the Left.
25. Single Page (Sidebar on Right): Displays a single page with a Sidebar on the Right.
26. Single Product: Displays a single product.

1. Access the Site Editor as mentioned above.
2. Click on Templates on the left side of the screen.
3. Click on the Front Page to edit the Front page.
4. Click on the blocks that you want to edit.

More Information on the Template Editor using Site Editor

1. Access the Site Editor as mentioned above.
2. Click on Patterns on the left side of the screen.
3. Click on Template Parts on the left side of the screen. You can click on Manage all template parts to view all template parts.
4. Click on the Template Parts that you want to access/edit.

The Skincues theme offers 10 Custom Template Parts. The Template Parts are part of the Templates that help you to organize and add structure to the theme to avoid having to repeat code. For example, you can define the template part for the header and footer and then combine them with the Font Page template file.

Here is the list of template parts available within the Skincues theme:

1. All Products
2. Footer
3. Footer (With Three Columns)
4. Footer (With Four Columns)
5. Header
6. Header Primary
7. Page Content
8. Post Content
9. Sidebar
10. Sidebar Products

Skincues theme uses the Header Primary template part as the default for the header. This template part includes a Site Logo, Site Title, Site Tagline, Navigation Menu, Search, My Account, and Mini Cart blocks.

1. Access the Site Editor as mentioned above.
2. Click on Patterns on the left side of the screen.
3. Click on Template Parts on the left side of the screen. You can click on Manage all template parts to view all template parts.
4. Click on the Header Primary that you want to edit the blocks inside the header.

Site Logo, Title And Tagline

1. Access the Header Primary template part as mentioned above.
2. Click on the Site Logo placeholder which will open the Media Uploader.
3. From the Media Uploader, you can either upload a logo from Upload files or use the existing image from the Media Library.
4. Select the logo and click on the Select button.
5. For other settings and customization, navigate to the right sidebar, where you will find different settings like Styles, Image Width, Dimensions, etc.
6. Click on Site Title and edit the Title.
7. Click on the Site Tagline and edit the Tagline.
8. After all the adjustments, click on the Save button.

More information on the Site Logo block.

Editing Header Navigation Menu

1. Access the Header Primary template part as mentioned above.
2. Select the Navigation Block and edit it as instructed in the heading below Navigation Block (Site Navigation Menu)

The Mini Cart Block

1. Access the Header Primary template part as mentioned above.
2. Select the Mini Cart block and from Settings, you toggle Hide Cart Price or remove it from the Options (3 Horizontal dots) button in the Block Toolbar.
3. After adjusting, click on the Save button.

Note: Similarly, you can edit other blocks in the Header as per your need.

The Skincues theme uses the Footer (With Four Columns) template part as the default for the footer. This template part includes Heading, Paragraph, Navigation, and Social Icons blocks which are wrapped in Row, Columns, and Group blocks.

1. Access the Site Editor as mentioned above.
2. Click on Patterns on the left side of the screen.
3. Click on Template Parts on the left side of the screen. You can click on Manage all template parts to view all template parts.
4. Click on the Footer (With Four Columns) that you want to edit the blocks inside the header.

Editing Heading and Paragraph

1. Access the Footer With Four Columns template part as mentioned above.
2. Click on the Heading or Paragraph block that you want to edit and edit the text as needed.

Editing Footer Social Icons

1. Access the Footer (With Four Columns) template part as mentioned above.
2. Select the Social Icons Block and edit it as instructed in the heading below Social Icons Block (Social Media Menu).

Editing Footer Copyright Text

1. Access the Footer (With Four Columns) template part as mentioned above.
2. Click on the Footer Copyright Paragraph block and edit the text and links as needed.

Editing Footer Navigation Menu

1. Access the Footer (With Four Columns) template part as mentioned above.
2. Select the Navigation Block and edit it as instructed in the heading below Navigation Block (Site Navigation Menu)

Blocks are the components for adding content in WordPress. The WordPress editor offers many different block types to add text, media files, and layout elements, which gives you more flexibility in building content. This theme supports all WordPress and WooCommerce blocks that you can use to create well-organized content.

You can add or edit blocks in Page and Post Block Editor as well as in Site Editor.

There are several ways to add a block to your post or page from the Block Editor when you are editing your post or page.

You can use the Block Inserter (+) icon to add a block. You can also use a shortcut slash (/) command to quickly add blocks or use the More options on any of the block’s toolbar to add a block. You can also move blocks or search for a block in your post or page.

Adding Blocks Using The Block Inserter (+) Icon

There are three ways to add a block using the Block Inserter (+) icon.

1. Block inserter (+) icon in the top toolbar
2. Block inserter (+) icon to the right of an empty block
3. Block inserter (+) icon in between blocks

After you click on the Block inserter (+) icon, it will display a list of blocks available as well as a search box to search for a specific block that you need. Click on that block that you want as per your need. For Example, you can use the Heading block to add a heading, paragraph block to add text, Image block to add an image, Navigation block to add a navigation menu, Social Icon block to add Social Media profiles, and so on.

More information on the Adding Blocks.

The Navigation Block is an advanced block that enables you to edit your site’s navigation menu. This theme has used the Navigation block in various template parts like Header Primary and Footer (With Four Columns). So, you can edit these template parts to add your existing navigation menu or create a new navigation menu.

Adding Existing Navigation Menu

1. Access the Site Editor as mentioned above.
2. Access the template part, which has a Navigation block. The screenshot below shows the Navigation Block on the Primary Header template part.
3. Click on the Navigation block and open the Settings panel.
4. If you have a menu you’ve already created with the Navigation block or one from a previous theme (including menus from any classic themes), then you can select the existing menu from the Settings panel.
5. After selecting the menu, click on the Save button.

More information on Navigation Block.

Creating a New Navigation Menu

1. Access the Site Editor as mentioned above.
2. Access the template part, which has a Navigation block. The screenshot below shows the Navigation Block on the Primary Header template part.
3. Click on the Navigation block and open the Settings panel, which should show the Navigation block settings. Sometimes, you need to select “Select Navigation” from the toolbar to show the Navigation settings panel.
4. From the Settings panel, click on Menu Selector and select Create New Menu.
5. This will add an empty menu, now click on the + Add Block button in the Navigation block or the Settings panel of the Menu. Then Search or Type the URL to add a page/post and also you can type a custom URL and label in the settings panel.
6. To add submenu items, simply select the block you want to add submenu items to and, in the block toolbar, click on the submenu icon. This will automatically add a submenu item below the block you selected.
7. After adding all the necessary links, click on the Save button.

More information on Creating a New Menu.

The Social Icons block allows you to add icons linking to your social media profiles or sites. This helps to increase the visibility of your social media profiles.

Editing Default Social Media Icons And Links

1. Access the Site Editor as mentioned above.
2. Access the template part, which has a Social Icons block. The screenshot below shows the Social Icons Block on the Footer (With Four Columns) template part.
3. You will see Facebook, Twitter, and Linkedin as the default Social Media Icons.
4. To add a link to default Social Media Icons, just click on the Social Media Icon, add the URL for the social media profile in the input field, and press Enter.
5. To remove any default Social Media Icon let’s say Facebook Icon, just click on the Instagram Icon, click on the Options (3 Horizontal dots) button in the Block Toolbar, and click on Remove Facebook.
6. After editing Social Media Icons, click on the Save button.

Adding Social Media Icons And Links

1. Access the Site Editor as mentioned above.
2. Access the template part, which has a Social Icons block. The screenshot below shows the Social Icons Block on the Footer (With Four Columns) template part.
3. Select the Social Icons block and click on the (+) icon at the rightmost corner to show the list of available social media platforms. 
4. If you do not find the platform you are looking for in the menu, type the name of the platform in the search box.
5. Select the icon from the menu to add it to the Social Icons block.
6. Add the URL for the social media profile in the input field and press Enter.
7. Repeat these steps for each of the social media profiles you want to add.
8. After adding all the necessary Social Media Icons, click on the Save button.

More information on Social Icons Block.

Block Patterns are a collection of predefined block layouts available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration.

Using the block pattern is an easy way to create beautiful layouts. Besides standard patterns, Skincues comes with 45 incredible pre-designed block patterns to produce professional designs.

To add a pattern, click on the block Add button and then click on the Browse All button in the floating block picker. In the left-hand side panel, click on the Patterns tab, and then from the dropdown, pick the desired pattern group.

There are three ways to add Block Patterns using the Block Inserter (+) icon.

1. Click on the Block inserter (+) icon in the top toolbar and Click on Patterns. Browse the Patterns and select the one that you like to add.
2. Click on the Block inserter (+) icon to the right of an empty block, after that Click on the Browse All button, and finally Click on Patterns. Browse the Patterns and select the one that you like to add.
3. Click on the Block inserter (+) icon in between blocks, after that Click on the Browse All button, and finally Click on Patterns. Browse the Patterns and select the one that you like to add.

The Skincues theme comes with 45 incredible pre-designed block patterns to produce professional designs.

1. 404 Header
2. About
3. Archive Header
4. Blog Header
5. CTA
6. Featured Content Default
7. Featured Content
8. Footer
9. Footer With Four Columns
10. Footer With Three Columns
11. Header Media
12. Header Media Primary
13. Header
14. Header Primary
15. Hero Content
16. Hero Content Fluid
17. Hidden 404
18. Hidden Archive
19. Hidden Blog
20. Hidden Post
21. Hidden Search
22. How it Works
23. How it Works Default
24. Logo
25. Mobile Sticky Icon Menu
26. Offer
27. Post Header
28. Product Category
29. Product Reviews
30. On Sale Products
31. Recent Products
32. Top Rated Products
33. Quick Contact
34. Quick Contact Form
35. Recent Blog Posts
36. Search header
37. Services
38. Shop Header
39. Sidebar Products
40. Sidebar
41. Stats
42. Subscribe
43. Testimonials
44. Video Featured
45. WooCommerce Features

1. Click on the Toggle Block inserter (+) icon in the top toolbar.
2. Click on Patterns.
3. Select Skincues in the select box. Here you can also click on Explore all patterns to view all patterns.
4. Select the Skincues theme custom patterns.

More information on Block Patterns