Installation & Demo Content Import
↑ Back to topThank you for choosing Gravia theme to build your WooCommerce website.
To create a site with Gravia, you must install the Gravia theme and WooCommerce plugin.
Installation
↑ Back to top- 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 electronics-and-gadget-shop-theme-for-woocommerce.zip file you downloaded.
- Click Install Now.
- After installation Activate the theme.
Required plugins
↑ Back to top- WooCommerce: The official WooCommerce plugin is required to display the modal cart and products. It includes many other necessary blocks for any website.
- WP Form : The plugin is recommended for creating contact forms.
Setting a homepage
↑ Back to topAfter 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.
Site logo setup
↑ Back to topFollow these steps to set up your site logo for a WordPress block theme directly from the front-end of your site.
- 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.
- 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.
- 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.
- Save Your Changes After setting up your logo, click Save in the top-right corner to apply the changes across your site.
Navigation setup
↑ Back to topSetting 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.
- 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.
- 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.
- 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.
- 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.
Changing site header template
↑ Back to topTo update or change your site’s header template, follow these steps within the Site Editor.
- 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.
- Select the Header Block In the List View panel, locate the header block. Click the three-dots button at the end of the header block name to access additional options.
- Replace the Header Template From the submenu that appears, click Replace. This will open the “Choose a Header” modal.
- Choose a New Header Template In the “Choose a Header” modal, browse through the available header templates and select the one you want to use.
- 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.
Changing shop page template
↑ Back to topTo update or change the template for your shop page, follow these steps within the Site Editor.
- Access the Settings In the Site Editor, click the Settings button located beside the Save button in the top-right corner of the screen.
- Go to the Template Tab In the settings panel, click on the Template tab to view template options.
- Select the Shop Page Template Expand the Design option group to reveal available templates. Choose the template you want to apply to your shop page.
- Save Your Changes After selecting the desired shop page template, click Save in the top-right corner to apply the changes.
Product listing setup
↑ Back to topTo 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.
- Select the Products Block In the Site Editor, locate and click on the Products block. This block is used to display a listing of products and is based on the Query block functionality.
- 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.
- 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 Query 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.
- 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.
Theme global style setup
↑ Back to topTo 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.
- 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 with half white and half black.
- 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.
- 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.
- Save Your Changes After finalizing the global styles, click Save in the top-right corner to apply the changes to your theme.
Templates & Patterns
↑ Back to top- Address Card
- Brands – Layout 1
- Content Area – Left Sidebar
- Content Area – Right Sidebar
- Content Section – 1
- Content Section – 2
- Content Section – 3
- Content Side Header
- Cover Link – Horizontal
- Cover Link – Large
- Cover Link – Vertical
- Discount Section
- Features Section
- Payment Icon – Outline
- Payment Icon – Solid
- Posts – Layout 1
- Posts – Layout 2
- Posts – Layout 3
- Posts – Layout 4
- Posts – Layout 5
- Posts – Tiny Layout 1
- Pricing Item
- Pricing Table
- Product Feature List
- Product Review Section – 2
- Product Review Section
- Product Specs Table
- Products – Layout 1
- Products – Layout 2
- Products – Layout 3
- Products – Layout 4
- Products – Layout 5
- Products – Layout 6
- Products – Layout 7
- Products – Layout 8
- Products – Layout 9
- Pros & Cons – Small
- Quick Info
- Service Team
- Subscribe – Layout 1
- Super Sale Section
- Archive – Layout 1
- Archive – Layout 2
- Archive – Layout 3
- Archive – Layout 4
- Archive – Layout 5
- Blog – Layout 1
- Blog – Layout 2
- Blog – Layout 3
- Blog – Layout 4
- Blog – Layout 5
- Page – Right Sidebar
- Header – Style 2
- Header – Style 3
- Header – Style 4
- Header – Style 5
- Header
- Product Archive – Layout 1
- Product Archive – Layout 2
- Product Archive – Layout 3
- Product Archive – Layout 4
- Product Archive – Layout 5
- Shop – Layout 1
- Shop – Layout 2
- Shop – Layout 3
- Shop – Layout 4
- Shop – Layout 5
- Shop – Layout 6
- Shop – Layout 7
- Single – 1 Column
- Vendor Brands