Blackbird already had a Big Cartel shop and a separate website. They wanted to incorporate the two and rebuild the website in WordPress to make it easier to manage and update. The main requirement of the development was that the integration should be seamless - the user shouldn’t know they were going from one platform to another.

Why would you want to do this?

WordPress offers you amazing flexibility in creating and managing a website; Big Cartel offers you a secure e-commerce platform. While there are several options for creating online shops in WordPress, Blackbird preferred to stay with Big Cartel for their online shop but they wanted to expand their website to cover some of the aspects of the business outside the online shop – like their on-site craft workshops, press reviews and bespoke commissions.

So how do you integrate WordPress and Big Cartel?

To incorporate your Big Cartel shop into your self-hosted WordPress site, you need to follow the steps below. Remember that you need a paid Big Cartel account for full integration. This will allow you to use your own domain name for your shop rather than your-name.bigcartel.com.

Set up your self-hosted WordPress site

It’s assumed here that you already know how to do this. For Blackbird, we created a custom WordPress theme around their initial design. The front page has an animated slideshow featuring images that they can upload themselves. There’s a blog section, a press section that they can update themselves, and a page featuring bespoke commissions and customer feedback.

Update DNS records

In your hosting account, you need to update your DNS records. Create a new CNAME record for shop.your-domain.com to your-account.bigcartel.com (this Big Cartel article will create customised guidelines for you).

Set up your Big Cartel account

On the Big Cartel Settings page in the admin section, scroll down to the Store Domain field. Enter shop.your-domain.com here and click Save.

Once the DNS record has had time to propagate, your Big Cartel shop will appear as shop.your-domain.com.

In your WordPress theme, update the link on your ‘Shop’ button to point to http://shop.your-domain.com.

Customise your Big Cartel theme

Big Cartel is a long way behind WordPress in terms of theme support and customisation. However, it’s relatively straightforward to customise a basic theme and there’s plenty of guidance out there for how to do so. However, in brief, for Blackbird we:

• Created a front-page for the shop that presents the shop categories in a grid with an image associated for each category
• Used the same CSS from the WordPress site in the Big Cartel theme admin. This involved rewriting part of the layout.html page which is the basic wrapper for your Big Cartel site. We reorganised the navigation menu to incorporate buttons that link back to the WordPress site
• Updated the Home, Layout, Products, Cart and Checkout pages in Big Cartel so that the layout and design were consistent with the WordPress site
• Paid attention to things like the Add to Cart and Checkout buttons. It’s easy to update the appearance of these using CSS so that they’re in line with your WordPress theme

Top tips

• One of the simplest tricks to ensure a smooth transition between site and shop is to get the navigation menu identical between WordPress and Big Cartel. A single pixel jump when the user clicks from site to shop will give the game away.
• Download the entire Big Cartel theme and work on it locally.
• Turn off the admin bars in both WordPress and Big Cartel. It’s impossible to test your layouts are consistent otherwise.
• Always back up everything you do.

In summary

For a seamless integration between WordPress and Big Cartel, you need a self-hosted WordPress site and a paid-for Big Cartel account (Platinum and up). Create a new subdomain that maps to your Big Cartel shop. Use the same CSS between WordPress and Big Cartel to ensure a smooth user experience.

And if you need any help with this, just get in touch.

Broadstairs firm providing metal engineering services to corporate and private clients

London company offering brand and marketing advice to high end cosmetics companies

A Ramsgate company offering scuba diving courses

Website allowing an author to interact with his readers, obtaining feedback and comments on chapters of his book as he writes them

We took their existing content and logo and redesigned the site’s visuals. The main purpose was to create a look and feel which reflected their technical expertise and created a sense of confidence in the user.

We put a single clear message on the front of the site then more detailed information below to guide the user to the right place on the site.

Something that Able already did well was to write a blog and provide quality information for users on basic aspects of computer maintenance and repair. We looked to build on that by structuring the site so that users could find information more easily.

Able’s high level of customer service is a key part of their approach and one of the main reasons that they retain their customers so we incorporated a section for client testimonials on the front page. The whole site is built on WordPress meaning that content is easy for them to update. Any time they get a new testimonial, they can add it within seconds. And the same applies to their blog and the rest of the site content.

Mobile web design

As more people are using mobiles and tablets to access the internet, we now create a mobile version of every new site as part of our standard service. Some of the key requirements for mobile web design are:

• Faster load times
• Layout that responds to smaller screen sizes
• Improved usability for touch screens

You can see how the Able Computer Solutions site responds to screen size simply by resizing it in your browser. You’ll notice that as it gets down to the smaller layout, the large image on the home page disappears. This is to ensure that the page loads more quickly and the screen isn’t entirely taken up with a single image.

The navigation at the top of the page adjusts to the page size, making it easier for users with touch screens to navigate. And the content itself adapts to a single column layout meaning that the user can easily scan through it without needing to scroll left and right to read the end of sentences.

Results

The main purpose behind the redesign was to generate new business. Since launching the site a few weeks ago, Able have seen a substantial increase in the traffic going to the site and it has already generated a number of new enquiries. This redesign will provide a very quick return on the investment.

Redesign of existing site to improve navigation and layout