A design test is being conducted to make sure that when we build WooCommerce sites, the design of the site reflects a store front that is aimed at generating the most sales for the customer. We have divided stores into the following categories:
- Single Product
- Multiple Products
- Featured Categories
- Single Service
- Multiple Services
For each of the store type categories we have built 3 layouts for what the homepage should contain in its design. You can find each of the layouts and links to their templates for reference here:
During the consultation, the website specialist will select one of these store layouts based on the customer’s business model and product types. You will find the link to the template in the content section for the homepage to use as a reference.
How to Use
You will ONLY be using this layout design template as a reference just like you use any design reference sites provided by the customer. You will NOT be using the fonts, colors, images, or text from these templates.
Pay attention to each row in the template and see the modules used in each row. Design the customer’s store using modules to create a similar layout using the fonts, colors, text and images provided by the customer in the consult tool. Most of the layouts are using modules and rows that can be found on the Demo Site in the modules menu, if you are wondering which ones to use. All the templates are using headers, top bars and footers from the templates found on the demo site that are also provided in GD Core.
For example, if the customer has multiple products, and the provided template reference is Store Homepage – Multiple Products 1, then notice the following pointers for your build:
- The header being used in this template is Header Store – logo, hamburger, cat nav, search [ 1 ] – adjust the header menus and icons as needed to fit the customer’s store
- The hero is simple with a solid color background and an image to the right, it has dual buttons going to relevant links for the store
- Row 2 contains 3 info banners with direct links to deals or certain collections for purchase – change these callouts as seen fit to match what the customer has provided for their store
- Row 3 contains a product module showcasing newly added products
- Row 4 is a simple row with text, a relevant image or graphic and a CTA
- Row 5 contains a product module showcasing featured products with a link to view all products that takes you to the main shop page
- Row 6 is a secondary CTA row that tells us something interesting about the store, a certain product or collection and takes us to this item
- The footer being used in this template is Footer [ 3 ] – Retail – adjust the menus and layout as needed to fit the customer’s store
Images and Graphics
In the case that the customer asks for an image or similar graphic to the ones seen in the template, the images have been taken from our free sources: WDS Stock Gallery, and Pexels. The graphics have been taken from the royalty free and approved source: Undraw.
For the graphics, make sure you update the color from the default purple to the main color being used in the customer’s design, then search for a relevant graphic based on the customer’s business. You can download a PNG image of the graphic, however if you want a transparent background, its best that you download the SVG file instead, open it in photoshop and then save it as a PNG.