Thanks for importing Prime šŸ™‚

Prime is constructed primarily using GPā€™s awesome built-in WooCommerce features with some CSS to provide custom styles.

The plugins used include GenerateBlocks, WooCommerce, Ajax Search for WooCommerce.

Header

The header with the Ajax search bar is one of the main features of Prime.

As usual, the site title or logo can be added or modified in the Site Identity section in the customizer.

The Ajax search bar is added using Hooks Element titled Header Search Form.

The text GP | GB | Woo is added in Header Widget.

Here are the CSS used in the header section:

/* Custom header */
.inside-header {
    display: flex;
    align-items: center;
}

.woo-search {
    margin-left: 30px;
    margin-right: 30px;
    flex-grow: 1;
}

.header-widget {
    order: 10;
    line-height: 1em;
    font-size: 20px;
}

.header-widget p {
    margin: 0;
}

@media (max-width: 768px) {
    .woo-search {
        margin-right: 0;
    }
    .inside-header {
	flex-direction: row;
    }
}

And here are some CSS added to modify the default Ajax search bar style:

/* AJAX search bar in header styles */
.dgwt-wcas-has-img .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product {
    padding: 0;
}

.dgwt-wcas-ico-magnifier {
    height: 50%;
}

Navigation

The navigation section should be quite straight forward. The navigation location can be adjusted in the customizer.

The position of menu items Login | Register is positioned using the built-in menu-item-float-right class.

Slideout navigation is used for mobile navigation and can be changed in the Off-Canvas section in the customizer.

Container Widths

Three different container widths are used in Prime.

The home page is using 1500px which can be adjusted using the container width setting in the customizer.

The product category archives are using 1100px and the single products and static pages are using 900px – both of which are applied using Layout Element.

Product Archive Blocks

The product archive blocks are built with WooCommerce Shortcodes with the following CSS styles:

.woocommerce ul.products li.product, .woocommerce ul.products {
    margin-bottom: 0;
}