You’ve laid out a beautiful front page for your website. Your landing pages are sweet. Your marketing funnels are … funnelling. Then you install an e-commerce plugin and, to your horror, the headers and banners are all messed up with the shopping cart icons now floating at the top. Or worse, they are obscured by your graphics so that customers can shop but not pay for your excellent wares.
What to do? Tips below for a new site and for an existing one. Get a cuppa and read on. Sing out if you need help
Contents below: New Site, How This Works, Existing Site, Useful Links
For a new site, if you have a graphic design ready but have not yet started web coding, consider a combination of:
– A generic e-commerce theme such as Woocommerce’s free Storefront
– A visual page builder such as: Divi Builder, Visual Composer, or Elementor.
– A blank template plugin such as Blank Slate
I’m most familiar with Storefront and Divi Builder which I know works well with Blank Slate, but you may find other combinations work OK. (See links at #1 below)
HOW THIS WORKS
Firstly, make Storefront the main theme. It is minimalist and specifically designed for e-commerce, so the shopping pages, item displays, cart and checkout will all work properly. It also has excellent customisation options for fonts, colours, and layouts. You will most likely be able to match your branding pretty well.
For specialist page layout, the Divi Page Builder will work with any theme, allowing you to easily create and adjust page layouts as you wish. However this layout freedom is (probably) limited to within the editor space. In other words the theme still controls the header, sider-bars, and footer. If you are using an e-commerce theme as your main them, this may still cause issues on some pages – with the cart icons and side bar content intruding onto special-purpose pages such as the home page as well as contact, landing, premium (membership) and calls-to-action pages. There are many instances when you don’t want shop functions on a page.
The Blank Slate plugin solves this final problem by effectively wiping the theme header/sidebar/footer content away from any page you wish. This allows the page builder to completely control that page’s layout – from top to bottom. Excellent for landing pages and the home page as well, which serve as the end points of your marketing funnel.
This combo is fine for small-to-medium enterprises, but at this point you might want to consider multiple themes or even multi-site if you have a large and complex web site where the shop is combined with members/premium content, drip-feed, or a learning management system. (See links at #3 and #4 below)
For existing sites it’s messier, but there are still options.
– You could ask your web designer to modify your theme and layouts to take into account the extra functionality of the e-commerce plugin. That will likely compromise your design’s appearance and, more dangerously, may impact on the future supportability of both your theme and the e-commerce plugin. ** Remember to use a child theme, yes? **
– You could throw away your current theme (Oh no!) and adopt a e-commerce friendly theme which matches (as best possible) your business branding. (See link #2 below)
– You could use a plugin that calls different themes for different pages, such as Jonradio Multiple Themes. (See links at #3 below) That might work well, but you still need to theme the shop, cart and checkout pages to match your main design. There are other limitations to account for as well.
– You could make your web site “multi-site” (See link #4 below), which allows you to do far more amazing things than just allocating different themes. However this may be over-the-top for a small-to-medium enterprise.
#1 Optimal Combo – Shopfront, Divi Page Builder, Blank Slate
(Image Credit these links)
#2 Shop (WooCommerce) friendly third-party themes
#3 Multiple Themes for A Single Site