How To Build Your Online Shop

The PushCommerce Content Builder has been designed to make it as easy as possible for you to build, design, change and update your own online shop. Initially you may be confused about where to start.

This guide will assist you in getting familiar with our Content Builder (CB) and the various features available to build your amazing eshop. One that will fully represent your brand and company.


Initially, let’s tackle the Top Menu Bar. This holds the screen size emulator, page selection, Publish button and Template Action button. The screen size buttons represent PC/Laptop, Tablet and Mobile.

All of our templates are Fully Responsive but it’s worth taking the time to check that everything looks right across different devices and then edit or modify as you need to. The Page drop down will move you around your shop so you can edit the blocks on each page for each device.

Once you’re happy with the look and feel of your site you can hit the green Publish button to set it live. If you want to go back to the default template you can hit the orange button and click Reset to Default.


The PushCommerce Content Builder Menu

On the left hand side of the Content Builder screen is the main CB menu. If you haven’t already, go ahead and click Template. This shows you our pre-built and pre-populated themes that will give you a great starting point.

Take a look through them and select one which appeals by clicking on the template then clicking the "Customize" button.


Blocks & Sorting

A partial shot of the Content Builder Menu showing Content Blocks, Positions and Template Settings

The next section covers our Content ‘ blocks’ & their Position/Sorting. We’ll go into some more details about these below, but suffice it to say these are the different parts that make up a web page. The possible layouts number in the hundreds of millions and that’s without looking at colours, fonts or images!

The position and sorting menu can be used to drag ‘n drop your blocks. Simply grab a block within this menu and with your mouse pointer drag it up or down. You'll see that this is replicated on the preview screen as well.

Next we have the Navigation Menu which you can also access from your shop’s admin area. This option allows you to set up the site’s menu that is displayed on your shop front. It can be adjusted to include specific categories, info pages or products. We look at Navigation Menus in more detail here.

Back to Top


Colours & Fonts

Content Builder Menu showing Colours, Fonts, Image Size, Background Image Option

After that we come to Colours and Fonts. This is where we start to get really bespoke. You can add your brand colours in and choose from 100’s of Google Web Fonts. Do try and keep these similar (if not the same) as your brand colours or fonts - if you have them already. Consistency invokes trust in your customer’s minds and trust leads to higher conversions, a win-win all around.


Logos & Icons

Menu Items Shop Logo, Browser Icon and Social Links

Colours and Fonts are followed by the Shop Logo, Browser Icon (Favicon) and Social Link menus. These options are 'set and forget' parts of the site but really do make a difference. Having a bespoke and individual Logo and Favicon is great for building a brand and to avoid getting lost in a vast sea of bookmarks. A downside of having a favicon (shown in a browsers tab) as a generic shopping cart or unrelated image. Check out our guide on Favicons for some tips.

And it should go without saying that having your socials on the page means customers can keep in touch with you easier, follow your updates and (hopefully) come back to buy more.


HTML/CSS

HTML, CSS and JS Button

Finally, we have the HTML/CSS/JS link. This is for those of you who want to get in to the code of the shop. We suggest that only advanced users or developers use this as one miss-step can lead to bugs and errors cropping up - not a great customer experience.

Our templates are built using the Liquid Mark Up language so you'll need to be handy with this in order to modify the templates. If you need to you can export and/or import the various files to modify them offline, then re-import when you're done.

As general precaution we take regular snapshots or backups of your site. We store these within the HTML/CSS/JS menu so that if something drastic does occur you're able to quickly and easily revert to an earlier version with ease. Although we hope you don't need to use it too much.

Now that we’re situated let’s get into some details…

Back to Top


Content Blocks & Sorting - Details

Content blocks make up the skeleton of your new online shop. You can choose from a variety of options for your home page, product pages, category pages, info pages and blog pages.

The best way to see what works is to start adding and removing blocks then find what fits your aesthetic and vision.

We currently have the following blocks available for you to use:


Block Type Options
Headers Holds your nav menu, logo & (on most) your Search Bar & social links.
Search
Banner
So customers can search for products quickly & easily.
Text
Banner
For shop wide announcements e.g. free shipping over £50 or discount codes.
Products Your shop's virtual shelving with your products. Can also be used to highlight
featured or on sale products on other pages.
Image
Slider
Add your Hero Image and shop links to enhance your shop’s look & feel.
Images Add product images, lifestyle images or User generated content to show
your brand’s personality.
Images +
Captions
Add some explanation text to your images.
Titles Add Header text or a simple “Welcome to My Shop” message.
Paragraph Free form text box for whatever you need to tell customers.
Buttons Add a link for customers to click. Quick & easy navigation.
Cards Add product features, new blog posts, updates, news & links to the right place.
Customer
Quotes
Got some great feedback? Add it here! Utilise that awesome social proof.
Video Show how your product works, add an explainer video, Meet the Team or
your latest YouTube video.
Social Add your socials or embed your IG Grid or Twitter feed & start building your following.
Separators/
Dividers
A graphic equivalent of a Full Stop.
Misc. Holds your Newsletter SignUp block, 3rd party code options and Shop ‘Features’ blocks.
Footers Holds Useful Links, recent Blog Posts, Newsletter Signup Box, Contact Details
& Customer Account options.

As you can see there’s a few options to get started with.

Back to Top


Colours & Fonts - Details

Due to the complexity of eCommerce in general the PushCommerce platform, and by default your shop, have quite a few moving parts. You can, if you so wish, change the colours of the vast majority of these parts.

Some colours are site specific across your shop's pages, like 'Buttons' which are controlled in the main Colours menu. Other parts that are Block specific can be changed by clicking the 'Cog' in the top right hand corner of these blocks.

For either option, you can use the colour slide wheel or enter a Hex code as required.

Fonts are similar to Colours, in that you can set a site wide style of font, which can be overridden on the block, word or letter level. The main categories from the drop down box cover Headings, Body Text, Buttons and Navigation Links for side wide changes.


Related Documents & Support

We have some other helpful guides on our PushCommerce College as well as more detailed guides for the points covered above. Amongst those we have guides on Adding Shop Logos, Logo Design Tips, and a guide on using Stock Imagery on your site.

If you do need some assistance or just get stuck at some point then do reach out to our friendly Support Team using the built-in Live Chat, via email or (for Pro and Premium) merchants on our Support Line during opening hours.

We'd like to wish you every success with your ongoing journey into the world of eCommerce and we look forward to supporting that growth.

Back to Top