Cusio – WordPress Theme Documentation

Thank you for choosing Cusio WordPress theme to build your WooCommerce website.

To create a site with Cusio WordPress theme, you must install the Cusio theme and WooCommerce plugin.

• In your Dashboard go to Appearance > Themes.
• Click on the Add New button on top.
• Click Upload New button on top.
• In the new interface click Choose File and browse your computer to locate cusio.zip file you downloaded.
• Click Install Now.
• After installation Activate the theme.

1. WooCommerce: The official WooCommerce plugin is recommended to display the modal cart and products. It includes many other necessary blocks for any website.
2. WP Form: The plugin is recommended for creating contact forms.
3. WP Super Cache: The plugin is recommended for caching entire site.

After installation is completed, you can set one of the pages imported as your homepage. To set your home page:

• In your admin panel, go to Settings > Reading
• Select A Static Page option for the Your homepage displays option.
• In the dropdown, choose the page you want set as home.

Follow these steps to set up your site logo for a WordPress block theme directly from the front-end of your site.

1. Open the Site Editor While viewing any page on your site, ensure you are logged in with the admin bar enabled. In the admin bar at the top of the screen, click the Edit Site button. This will open the Site Editor directly in the current template.

2. Locate the Site Logo Block Once in the Site Editor, find the Site Logo block within the template you’re editing. This block is usually located in the header area.
3. Upload or Select Your Logo Click on the Site Logo block to upload a new logo or select one from your media library. Ensure the logo is appropriately sized and formatted.
4. Save Your Changes After setting up your logo, click Save in the top-right corner to apply the changes across your site.

Setting up your site’s navigation is a key step in ensuring that visitors can easily navigate through your content. Follow these steps to create and customize a navigation menu using the Site Editor.

1. Locate the Navigation Block Within the Site Editor, find the Navigation block, usually located in the header area of your template. This is where you will create and manage your menu.
2. Create a New Menu Click on the Create a new menu link within the Navigation block. This will allow you to start building your menu from scratch.
3. Add Menu Items Begin adding menu items by clicking the + icon. You can add links to pages, posts, categories, or custom URLs that you want to include in your navigation.
4. Save Your Changes Once you’ve added all the necessary items, click Save in the top-right corner to apply the changes to your site.

To update or change your site’s header template, follow these steps within the Site Editor.

1. Open the List View Panel Ensure you are in the Site Editor. Open the List View panel, which displays a listing of blocks on the page. This panel is typically found on the left side of the editor.
2. Select the Header Block In the List View panel, locate the header block. Click the header block.
3. Choose a New Header Template In the Block settings panel, Expand the Design option group to reveal available templates and Choose the template you want to apply.
4. Save Your Changes After selecting the new header template, click Save in the top-right corner of the editor to apply the changes to your site.

To update or change the template for your shop page, follow these steps within the Site Editor.

1. Open the Site Editor. While viewing the shop front page, ensure you are logged in with the admin bar enabled. In the admin bar at the top of the screen, click the Edit Site button. This will open the Site Editor directly in the Product Catalog template.
2. Open the List View Panel. Ensure you are in the Site Editor. Open the List View panel, which displays a listing of blocks on the page. This panel is typically found on the left side of the editor.
3. Select the Header Block In the List View panel, locate the header block. Click the header block.
4. Choose a New Header Template In the Block settings panel, Expand the Design option group to reveal available templates, and Choose the template you want to apply.
5. Save Your Changes After selecting the new header template, click Save in the top-right corner of the editor to apply the changes to your site.

To configure the product listing on your site, you’ll use the Products block, which is essentially a Query block. Follow these steps to change or filter the product listing.

1. Select the Product Collection Block In the Site Editor, locate and click on the Product Collection block. The block name may vary depending on the current collection type, such as Featured, Top Rated, On Sale, Best Sellers, and New Arrivals. This block is used to display a listing of products.
2. Change the product collection type. Click the Choose collection button on the floating bar and choose the collection type you want to apply.
3. Access Block Settings With the Products block selected, look for the block settings panel, usually located on the right side of the editor. Here, you can customize various options for the product listing.
4. Change or Filter the Product Listing In the block settings panel, you’ll find options to change or filter the product listing. You can adjust the Filters settings to filter products by categories, tags, attributes, or other criteria. You can also choose how many products to display and set other display options as needed.
5. Save Your Changes Once you have configured the product listing to your satisfaction, click Save in the top-right corner to apply the changes to your site.

To configure the global styles for your theme, you will edit the theme settings through the Site Editor. This enables you to apply consistent styling across your entire site.

1. Access Global Styles In the Site Editor, click on the Styles button located at the top-right of the screen. The button is represented by a circle that is half white and half black.
2. Edit Global Settings In the Styles panel, you can modify various global settings. This includes settings for colors, typography, spacing, and other design elements. Adjust these settings to apply global styles across your site.
3. Preview and Adjust Preview the changes as you make adjustments to ensure they align with your design preferences. Make any necessary tweaks to get the desired look.
4. Save Your Changes After finalizing the global styles, click Save in the top-right corner to apply the changes to your theme.