Gadgetry

Thank you for choosing Gadgetry for your new project. This documentation will provide you with step-by-step instructions on installing and configuring the theme. To navigate the various sections, please utilize the menu located on the right-hand side of the screen.

Build an aesthetically pleasing online store effortlessly! The Gadgetry theme, a meticulously crafted WooCommerce block theme for electronics stores, offers exceptional flexibility to design any e-commerce website.

Before you begin, take a moment to preview the demo site created using the Gadgetry theme. This will give you a glimpse of the full potential and the range of achievements you can accomplish with this theme.

We’ll guide you through the process of setting up your online store, exploring the extensive customization options available, and ensuring its exceptional shine.

If you haven’t already purchased the Gadgetry theme, that’s the initial step to begin your journey. For more details on purchasing the theme, please refer to the section below.

Ready to create your stunning online store? Click the “ Buy Now” button at the top of this page to get started!

Need Help Before You Buy? Get Pre-Sales Support

Our friendly support team is happy to answer any inquiries you wish to discuss before purchasing the Gadgetry theme. Here’s how to reach them:

• Visit the WooCommerce Contact Support Page
• If you’re not logged in, follow the on-screen instructions to create a new WooCommerce account or log in to your existing account.
• On the support page, scroll down until you find the “Submit a request” section.
  • From the “What do you need help with?” dropdown, choose Pre-sales
  • Type “gadgetry” in the field labeled Product to specify the theme.
  • Submit the form after filling out the remaining fields.

The Gadgetry theme and WooCommerce plugin are prerequisites for your e-commerce website. Once you purchase the Gadgetry theme, follow the steps below to install the required theme and plugin on your WordPress website.

1. Begin by logging in to your WooCommerce.com account
2. Once logged in, navigate to the Downloads section
3. Locate the Gadgetry theme from the products list and click the Download link. This will download a compressed file named gadgetry.zip to your computer

1. Log in to your WordPress dashboard
2. From the left menu bar, hover over the Appearance
3. Within Appearance, click on the Themes
4. On the themes page, click the Add New button.
5. You’ll see a theme upload option. Click on the Upload Theme button.
6. In the upload window, select the gadgetry.zip file you downloaded earlier from your computer.
7. Once selected, click the Install Now button.
8. After installation, WordPress will redirect you to a theme activation page.
9. On this page, click the Activate link.
10. Congratulations! The Gadgetry theme is installed and activated successfully. You can preview your website with the Gadgetry theme by clicking the Visit Site link that appears.

Congratulations! You have successfully installed and activated the Gadgetry theme on your WordPress website. Since Gadgetry is an e-commerce theme, the next step is to install the WooCommerce plugin.

Note: Installing the WooCommerce plugin manually is optional if you intend to import the demo site as instructed in the Getting Started section below.

WooCommerce offers comprehensive documentation for installing and activating their plugin. Follow the official guide for the instructions:

Official WooCommerce Installation Documentation

After installing the Gadgetry theme on your WordPress website, you can start creating an online store in 2 ways:

1. By importing a Pre-built demo website
2. Manual Customization

Read the topics below for the detailed guide:

Due to its intuitive structure, the Gadgetry theme is easy to use for general WordPress users.

However, it might be a little challenging for beginners to get started. We’ve addressed this problem by providing a demo import feature.

Gadgetry theme comes with a pre-built demo which you can import into your website.

After importing the demo website, your website will be filled with demo content, such as the landing homepage, shop page, sample products, post articles, etc.

You can click the link below to see how your website will look after the demo import. Additionally, see the homepage of the Gadgetry demo in the screenshot below:

Now, let’s dive into the steps to import the Gadgetry demo into your website.

Once you install and activate the Gadgetry theme, a notice box will appear to help you get started with the theme.

You can utilize it to import the demo site at your convenience.

1. In the notice box, click the Install Demo Import button. This will install the demo import plugin and the page will be redirected to the activation page.
2. On the next page, click the Activate Plugin button.
3. On the notice box, click the Go to Demo Import page button. This will redirect you to the demo import page.
4. On the demo import page, hover over the Main Demo box and click the Import button.
5. A popup box will appear with the information that you need to read to fully understand what is going to happen next. Click the Yes, Import Demo button once you read and understand it.
6. This will initiate the demo import process which includes installing the required plugin (WooCommerce) and importing the demo data (posts, pages, settings, and images).
7. The progress can be seen on the bottom right of the page. Wait for a while and let the magic happen. (Note: Do not refresh the page or close the page during the progress.)
8. Once the demo import is complete, a popup appears. You can click the Visit My Site to explore the newly imported site.
9. Now, you can dismiss the notice box by clicking the close icon on the top right.

The next step is to replace the demo content with your own and customize the site as per your requirements.

If you’re a seasoned WordPress designer, developer, or user familiar with theme customization, you can manually tailor your website to your specific needs. The following instructions provide a solid foundation for customizing your theme.

Want to create the website yourself, you can customize the website using the Gadgetry and WordPress features.

By default, the Gadgetry theme displays the latest blog posts on the homepage. However, it’s common practice to show the landing page with product collection and CTA banners for e-commerce websites.

So, you might want to replicate the homepage from our demo website.

Follow the steps below:

Step 1: Create a Page for the Homepage

You need to set a separate home page

1. Create a page for Homepage as instructed in this article: https://wordpress.org/documentation/article/create-pages/#creating-a-new-page
2. For this example, let’s insert “Home” for Homepage Add title field of the page editor
3. Click the Publish button to make it live.

Step 2: Set Page Template for Homepage

By default, a page displays the content added in the editor. Since the home landing page is special, we’ve provided a template that can be applied to the home page. This will magically display landing page content on the page.

The next step is to assign an appropriate template for the newly created Home Page in the above step.

Follow the steps below to switch the page template:

1. From the Page Editor, click the Settings icon at the top right beside the Update/Publish button.
2. In the Page Tab, click the Pages link beside the Template label.
3. Then, click the Swap template option. It’ll open a panel to choose from templates.
4. Look for a template called Home Default (T1S1) and click over the preview of it as shown in the slideshow below.
5. Now, the chosen template is applied to the page. You can click the Save Button to save changes.
6. Click the Preview Icon beside the Settings icon to preview the changes. You should see a Landing Page similar to the Gadgetry Demo Homepage instead of empty page content.
7. However, it is just another normal separate page. So, we need to set it as the front page of the website which is explained in below.

Step 3: Create Page for Blog

If you would like to have a separate blog page to post your articles, you can create a page for it just like you created the home page and name it Blog.

Step 4: Set Up Static Page as Homepage

Now, you need to tell WordPress to assign these pages to the Homepage and Blog Page so that they appear separately.

1. Navigate to Settings > Reading from the WordPress dashboard.
2. In Your homepage displays option, select A static page (select below). This will activate the options to set home and blog page.
3. From the dropdown, choose the respective page you created before:
   • Homepage: Home
   • Posts page: Blog
4. Note: the Posts page here means the Blog page.
5. Finally, click the Save Changes button.

Now, if you browse the homepage of your site, it should display the landing page you created. Also, you can view the blog page by navigating to the Pages menu item. Next, you can fill your website with products to sell and blog posts.

Once you activate the Gadgetry theme or import its demo site, you need to edit the Menus in the Header or Footer to add your pages and links.

This guide will show you how to showcase your products on the homepage and shop page using the Gadgetry theme.

By default, sections using WooCommerce product blocks: “Best Selling Products”, “Newest Products“, “Top Rated Products” and “Products On Sale” on the homepage and shop page might appear blank as shown in the screenshot below (unless you have imported the demo site). This is perfectly normal!

These sections are designed to display your products, but if you haven’t added any products yet, they will naturally remain empty.

The key to seeing products populate these sections is to have products added to your WooCommerce store.

Here’s how to make them work:

You can add different types of products to your online store with Gadgetry just like any WooCommerce website.

So, it is better to read their documentation for a detailed guide.

Reach out if you have any problems or confusion during the process.

We’ve listed the most useful links below:

Keep adding new products you have and they’ll appear on the homepage and shop page. To access the shop page, navigate to Shop from the header menu.

You can use the following custom CSS classes to hide elements on specific devices:

• hide-on-mobile: Hides the element on mobile devices.
• hide-on-tablet: Hides the element on tablet devices.

How to Add Custom CSS Classes to a Block

Follow these steps to apply the CSS class to a block:

1. Select the Buttons block (or any block you want to modify).
2. Click the Settings icon at the top-right corner, next to the Update/Publish button.
3. Scroll down and expand the Advanced section.
4. Locate the Additional CSS Class(es) input field.
5. Enter the desired class name:
   • Use hide-on-mobile to hide the block only on mobile devices.
   • Use hide-on-tablet to hide the block only on tablet devices.

Note: You don’t need to include the dot ( . ) when typing the class name in the input field. For example, type hide-on-mobile instead of .hide-on-mobile.

If you’re new to WordPress or Block Theme, understanding topics such as Site Styles, Patterns, Templates & Template Parts, etc. would help you customize your website.

Our friendly support team will answer any inquiries related to the Gadgetry theme.

Here’s how to reach us:

• Visit the WooCommerce Contact Support Page
• If you’re not logged in, follow the on-screen instructions to create a new WooCommerce account or log in to your existing account.
• On the support page, scroll down until you find the “Submit a request” section.
  • From the “What do you need help with?” dropdown, choose Technical Support
  • Type “gadgetry” in the field labeled Product to specify the theme.
  • Submit the form after filling out the remaining fields.

Found an issue?

If you come across a typo, grammatical error, or outdated information, please let us know.

Want to help us make this documentation better?

We appreciate your feedback and suggestions. Please let us know if:

• You have a question: If you have a specific question that isn’t answered in the FAQ section, we’d love to hear from you.
• You find something confusing: If you find any part of the documentation difficult to understand, please let us know so we can clarify it.

Visit the WooCommerce Contact Support Page