Category

Web and Tec

Shopify stores

Building a Shopify Site

By | Design, Web and Tec | No Comments
Shopify stores

Building a Shopify Site

In this post, I am going to go through Shopify and some of the other technology to make the process of setting up your own shop. Launching a store is a massive undertaking, but it is made easier by the World Wide Web.

This is one of the easiest ways to open an online store. Shopify offers a 14-day free trial for each and every store you wish to open, so giving it a try will cost you nothing and, during that time, you can experiment with shop design, plugins, inventory selection, payment processing and other aspects of the site.

After your trial, pricing is available at $29, $79 or $299 per month depending on the features you need. The Basic Shopify plan at $29 per month is more than adequate for most beginning online retailers.

Setting Up

When you sign up for an account with Shopify, the system will ask you to name your store and it will then assign you a site address. Choose a store named “Lincoln,” for example, and your site address will be “lincoln.myshopify.com.” While you’re always welcome to keep this site address as the home of your store on the web, you’re more than likely going to want to change it to something better, and not focused on Shopify.

Upon joining Shopify, after entering your shop name, the system will ask you a few questions about the type of shop you are opening and then ask for some personal details. After that, you’ll be on the main dashboard page. Simply click on the “Add Domain” button here and then either buy a new domain from Shopify or follow the instructions to connect one you’ve already purchased from a different registrar.

Window Dressing

The next step in opening your virtual store is to figure out how you’d like it to look. You can do this by clicking the “Customize Theme” button on your dashboard screen. Click on the “Explore Free Themes” button to check out the options available as part of your Shopify package. You can make a shopify site this way, but at Lincoln Collective we develop Shopify site. With a custom developed site, you get what you want and something different to everybody else. If this is something you are interested in drop us a mail or fill out our quote form.

Once you find the template you like, click the “Add” button in the pop-up window. Then, somewhat counterintuitively, scroll down and click the “Actions” button and select “Publish.”

After your theme is selected, click “Customize” and you’ll be able to add pages, change photos, add text, create a blog, customize your header and footer, and more.

Products

Of course, no matter how good your online shop looks, it won’t really do much for you if you don’t have any products displayed. There are two basic ways to populate your page with products. The first would be if you already have possession of the physical products you want to sell.

To set up your products, click the “products” text link in the left-side menu. Then click “Add product.” This will take you to a page where you can enter your product title, images, variants (like sizes and colors), shipping weight and other details. You can also set a “Compare At” price, which will show next to the actual price on your site as a crossed out amount, letting customers know that they’re getting an item for less than the suggested retail price.

If you don’t already have products to sell, you could consider drop shipping, a system whereby someone else warehouses and ships your products for you. You basically become the middleman, marking up products you find and selling them through your online store, while another company (or set of companies) manufactures, stores and ships your products.

Pages

While your Shopify template will automatically place each product you add on its own page, you might want to add additional pages to your site for such things as FAQs, contact forms and shipping information. If so, it’s as easy as clicking on “Online Store” in the side menu, choosing “Pages” and then clicking “Add page.”

Enter the details on the next page. If you want to include a contact form, be sure to select the “page.contact” option from the drop-down menu on the right.

Once you have created a new page, it will be available for you to link to from other areas of the site. You can also include a link to the page in your footer by clicking on the “Navigation” link beneath “Online Store” in the menu on the left. This is also where you can adjust what appears in the menu at the top of your site.

Blogs

Adding a blog to your site is equally straightforward. Choose “Online Store” in the left-side menu, then “Blog posts,” followed by “Create blog post.” After writing your post, be sure to click the button next to “Visible” in the upper right. Also, you might want to copy the first paragraph of your post and paste it into the “Excerpt” area.

Once a blog post is created, add it to your homepage if you’d like by clicking “Online Store,” then the blue “Customize” button on the right. Click on the “Add section” link on the left and choose “Blog post.” You can also adjust the flow of your home page here by clicking on the six dots to the right of the choices in the left-hand column and dragging the item to the position in which you’d like it to appear.

Payment Processing

A Shopify store automatically comes with credit card processing as part of your monthly fee. Shopify charges you 2.9% plus $.30 of every transaction they process. Your store also comes with the ability to process PayPal payments, although you’ll need an account of your own in order to activate that service.

This feature of a Shopify store can be a huge cost saving. If you were to set up an online store on your own, you’d have to contract with a third party credit card processor such as Authorize.net, who would not only charge you a per-transaction fee in the same neighborhood as Shopify, but they’d also likely hit you with a setup fee in the hundreds of dollars, as well as a monthly maintenance fee which tends to be in the $30 range. When you’re just starting out, those extra fees can put a lot of drag on your launch, so using Shopify’s payment gateway is a smart move—unless you already process payments on another site with a third-party provider.

To set up payment processing, click on the word “Settings” next to the gear icon in the bottom left-hand column, then click on “Payments.” If you’re happy to use Shopify as your processor, click on “Complete account setup,” and follow the steps provided. Otherwise, click on “Change provider” (top right) and choose another processor.

Communication

Shopify has an impressive set of email templates baked in, which are sent out to your customers during certain trigger points in the shopping and purchasing process. To access them, click on “Settings” again and navigate to “Notifications.”

Here you can tailor which notifications you send to your customers—such as order confirmations, tracking information and notes about cancelled orders—and edit exactly what those emails say. You’ll need to feel comfortable working in a bit of code, as the email templates are displayed in HTML, but it’s pretty simple to figure out where the text is and make amendments as needed.

Summary

If you’re looking to set up shop fast on the web, you’re really not going to do much better than Shopify—especially if you’re not too familiar with the under-the-hood workings of the internet. The interface is super smooth and navigating around the site comes pretty intuitively. There is also great customer support in the form of the site’s super-responsive live chat, a feature that is disappearing faster and faster these days from online companies.

If there are any downsides, it’s that you may find the site a little constrictive if you really have a need for out-of-the-box design or functionality. Also, because you’ll need to purchase an app to add in enhanced features like email or discount popups, the monthly fees can climb pretty quickly. Still, the site—even in its un-enhanced-by-apps format—provides plenty for a beginning e-retailer to sink their mouse into.

Want to get a custom build Shopify store or need some help with an existing store? Have a look at our portfolio or contact us.

css media queries

CSS Media Queries for Apple Devices

By | Web and Tec | No Comments
css media queries

CSS Media Queries For Apple Devices

When designing/developing a website, I constantly have to search for Media Queries for various devices. So I thought it would be a good idea to create a list of my the media queries I use the most.

iPad Media Queries (All generations)

iPad in portrait & landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPad in landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}
iPad in portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3 & 4 Media Queries

Retina iPad in portrait & landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
Retina iPad in landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
Retina iPad in portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad 1 & 2 /Mini Media Queries

Retina iPad in portrait & landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
Retina iPad in landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
Retina iPad in portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

iPhone 10 Media Queries

iPhone X in portrait & landscape
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) { /* STYLES GO HERE */}
iPhone X in landscape
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) { /* STYLES GO HERE */}
iPhone X in portrait
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 6, 7, 8 Media Queries

iPhone 6, 7, 8 in portrait & landscape
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* STYLES GO HERE */}
iPhone 6, 7, 8 in landscape
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 6, 7, 8 in portrait
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 6, 7, 8 Plus Media Queries

iPhone 6, 7, 8 Plus in portrait & landscape
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) { /* STYLES GO HERE */}
iPhone 6, 7, 8 Plus in landscape
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 6, 7, 8 Plus in portrait
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 5 & 5S Media Queries

iPhone 5 & 5S in portrait & landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* STYLES GO HERE */}
iPhone 5 & 5s in landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 5 & 5S in portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* STYLES GO HERE */ }
e-commerce

E-commerce – WordPress (Woo-commerce) Vs Shopify

By | Design, Web and Tec
e-commerce

WordPress (Woocommerce) Vs Shopify

So you want to build an e-commerce store, but don’t know which platform to choose. In this blog post, I will discuss the difference between Shopify and WordPress. There are so many options but these are two of the best.

The main differences between Shopify and WordPress

The main difference between these two is that Shopify is an online tool/service, whereas WordPress is a stand-alone software that you need to install yourself.

In order to use Shopify, all you have to do is go to Shopify.com and sign up for an account. Once done, you only need to go through a quick setup, and your e-commerce store is up and running.

To use WordPress as your e-commerce platform, on the other hand, requires a lot more steps:

  1. First, you need to buy a domain and a web hosting account where you can have the default version of WordPress installed.
  2. You need to pick a theme (design) for your website, plus a handful of plugins to take care of things like SEO, social media integration and whatnots.
  3. After that, you need a plugin like WooCommerce to provide you with all the e-commerce features (those are not built into WordPress out the gate).
  4. Finally, you need to go through the configuration process of your e-commerce store (the store details, payment gateway integrations, products, and etc.). Those can take a while of its own too.

And last but not least, with Shopify, you also get support, which means that should you ever encounter any trouble with the platform, you can simply contact the support team, and they will (likely) solve it. That been said the support with Shopify is not far and you will encounter many problems when developing a site on Shopify. With WordPress, there’s no support but there is just so much information out there, you don’t need direct support often.

Shopify

  • An all-in-one e-commerce solution/tool. It allows you to build a functional e-commerce store from scratch, without a designer’s or developer’s help.
  • No coding skills required to use Shopify.
  • It’s a paid tool – from $9 to $179 per month.
  • It allows you to sell whatever you wish (goods, services, products both digital and physical, as well as dropshipping).
  • Use it offline and online (you can use it as your online store, but also use something called Point of Sale with Shopify, which is their system for retail stores that allows you to integrate your on-location store with your setup in Shopify).
  • More than 100 online store designs to choose from (some of them paid).
  • Every new site gets a custom subdomain for free. For example something lie: YOURSTORE.shopify.com.
  • There’s 24/7 support.

WordPress with WooCommerce

  • An all-in-one website software. It allows you to build any kind of website, provided that you can handle the slightly technical setup – involving installing the software itself, installing plugins, installing a theme, and then installing an e-commerce plugin to handle the store operations.
    Some website building skills required. Depending on the customizations that you want to perform, you might need coding or design skills as well.
  • The WordPress software is free. But in order to use it, you need to sign up for a web host and buy a domain name. When all put together, you can get started with WordPress for about $5 / month.
  • Great content management features.
  • Thousands of themes/designs to choose from, both free and paid.
  • Exceptional extension possibilities through plugins.
  • No direct support, but a very helpful support community.

Reasons to use Shopify over WordPress:

a) Use it if you don’t have any kind of website and you want to launch a quality e-commerce store fast.
b) Use it if you don’t have any design, coding, or website building skills, and you don’t want to hire anybody to set an e-commerce store for you.
c) Use it if you want to integrate your online store with your offline on-location store.
d) Use it if you need a great e-commerce platform with access to customer support.

Reasons to use WordPress over Shopify:

a) The cost of the Platform per a month is much less if you have an understanding of HTML and CSS you can Setup yourself.
b) You need a robust solution that involves custom themes and code. It is very difficult to find a Shopify developer (A good one, especially in South Africa)
c) Running Costs are low.
d) Blogging is the main focus.

Quite simply, if you already have a WordPress website running then it’s always going to be quicker and cheaper to just add an e-commerce component to that website instead of building something new. On the other hand, if you don’t have a website yet, then it’s quicker and easier to go the other route and launch an e-commerce store with a specialized platform like Shopify.

If you need help designing/developing a Shopify or WordPress Site, drop us a mail and we can help you decide on the best solution. At Lincoln Collective, we work with both Shopify and WordPress(Woocommerce), you can view our portfolio here.

Negative Effects of Redirect By IP Location

The Negative Effects of Redirect By IP Location

By | Web and Tec
Negative Effects of Redirect By IP Location

The Negative Effects of Redirect By IP Location

Redirecting by IP location can cause many problems, one of the main is that Bots will automatically get redirected to the US version of your site so this will be the only version that indexes on google. So the best option here would be not to have an auto-redirect as it does effect bots but it also results in a negative user experience.

Introduction

If using geolocation on your site is a must, there are some guidelines that should be followed.

  • You should always ask the user permission to use there location but not as the page loads. Asking the user on the homepage results in a poor user experience.
  • You should always request to access the location on a user gesture. Give the user a clear call to action or an indication that an operation will require access to their location. The user can then more easily associate the system prompt for access with the action just initiated.
  • There should always be a fall back if the user does not give permission to access location, for example there should be an international page.

The best option is to get rid of dynamic auto detection and redirection setting and let the people select the language/country that they would like to see. This way the search engine bots will be able to crawl and index all the languages/country pages too.

However, if you want to keep the detection and the redirection in place, you need to set it to treat the search engine bots differently from humans. Set it so that when it determines that a requester is a search engine, exempt it from any redirection, and give it a page it wants.

Do not switch the content on the pages to give different information to the search engine. If you do, it could become a cloaking method. All you want to do is to let a search engine see the page it requested without redirecting it to the specific language or country page.

Still confused or need help creating your website. Have a look at our portfolio or contact us.
You can check out the blog for more related posts.

How to Use Facebook for WooCommerce Integration

By | Web and Tec

How to Use Facebook for WooCommerce Integration

Integrating Facebook store and WooCommerce is possible and will allow you to reach a much wider target audience.
It is also very simple to do this, in the blog post we will show you how.

Introduction

Before going into detail, you need to know that the extension requires the WooCommerce version 2.6.14 and WordPress versions 3.0 and above.

If you have a WordPress site and Woocommerce installed then what you need is to follow these steps:

  1. Install Facebook for WooCommerce
  2. Go to your WordPress Admin Dashboard
  3. Go to: WooCommerce → Settings → Integrations
  4. Choose Facebook for WooCommerce
  5. Get Started

Installation

This plugin is developed by Facebook and is available for free download.
You can install Facebook for WooCommerce like any other regular WordPress plugin.

  1. Navigate to – wp-admin→ Plugins→ Add new
  2. Upload and Activate the plugin

Integration

Now, you are done with the installation. Now, let’s start with the integration. In order to do that navigate to:

  1. Wp-admin → WooCommerce→ Settings
  2. Click on the choose a Facebook Page option and select a page from the drop-down. After selecting your page, click on the next button.
  3. Now, you have to choose the option import product and click the Finish button.

How am I impacted, as a company?

Most companies will be affected if you have an traffic from European countries you will have to comply with the new GDPR. Both personal data and sensitive personal data are covered by GDPR. Personal data, a complex category of information, broadly means a piece of information that can be used to identify a person. This can be a name, address, IP address… you name it. Sensitive personal data encompasses genetic data, information about religious and political views, sexual orientation, and more.

Still confused or need help creating your website. Have a look at our portfolio or contact us.
You can check out the blog for more related posts.

General Data Protection Regulation (GDPR)

Guide to the General Data Protection Regulation (GDPR)

By | Web and Tec
General Data Protection Regulation (GDPR)

Guide to the General Data Protection Regulation (GDPR)

Europes data protection rules are going through some drastic changes. In order to keep up with the large amounts of data being created, the rules of how this data can be used in any manner.

Europes data protection rules are going through some drastic changes. In order to keep up with the large amounts of data being created, the rules of how this data can be used in any manner. These rules are due to be enforced from May 25, 2018. These rules have been mutually agreed on by the European General Data Protection Regulation(GDPR).

When GDPR starts to be enforced by data protection authorities it will alter how businesses and public sector organisations can handle the information of their customers. GDPR also boosts the rights of individuals and gives them more control over their information.

What is GDPR?

The GDPR is Europe’s new framework for data protection laws – it replaces the previous 1995 data protection directive, which current UK law is based upon.

The regulation is an essential step to strengthen citizens’ fundamental rights in the digital age and facilitate business by simplifying rules for companies in the digital single market. A single law will also do away with the current fragmentation and costly administrative burdens.

While GDPR applies across Europe, there is some flexibility for countries to change small parts of the rules to fit their own preferences. The government says its bill outlines some exemptions from GDPR. It claims these include added protections for journalists, scientific and historical researchers, and anti-doping agencies.

How am I impacted, as a company?

Most companies will be affected if you have an traffic from European countries you will have to comply with the new GDPR. Both personal data and sensitive personal data are covered by GDPR. Personal data, a complex category of information, broadly means a piece of information that can be used to identify a person. This can be a name, address, IP address… you name it. Sensitive personal data encompasses genetic data, information about religious and political views, sexual orientation, and more.

A basic overview of changes

In the full text of GDPR, there are many articles setting out the rights of individuals and obligations placed on organisations covered by the regulation. These include allowing people to have easier access to the data companies hold about them, a new fines regime and a clear responsibility for organisations to obtain the consent of people they collect information about.

Accountability and compliance

Companies covered by the GDPR will be more accountable for their handling of people personal information. This will include having data protection policies and having relevant documentation on how the data is processed. For companies that have more than 250 employees, there’s a need to have documentation of why people’s information is being collected and processed, descriptions of the information that’s held, how long it’s being kept for and descriptions of technical security measures in place.

There is a requirement for a business to obtain consent to process data in some situations. When an organisation is relying on consent to use a person’s information they have to explain that consent is being given and there have to be a positive opt-in.

Access to your Data

Under the GDPR this is being able to charge a for access to personal information is being scrapped and it is going to be made free-of-charge. When someone asks a business for their data, they must stump up the information within one month. Everyone will have the right to get confirmation that an organisation has information about them, access to this information and any other supplementary information.

How to prepare your business for GDPR

To help prepare for the start of GDPR, the ICO has created a 12-step guide. The guide, which is available here, includes steps such as making senior business leaders aware of the regulation, determining which info is held, updating procedures around subject access requests, and what should happen in the event of a data breach.

Still confused or need help creating your website. Have a look at our portfolio or contact us.
You can check out the blog for more related posts.

Wordpress Multi-sites

Basics of WordPress Multi-sites

By | Web and Tec

A logo is not your brand, neither is it your identity. Logo design, Identity design, and branding all have different roles but together they create a perceived image for an organisation. Logos are not just there to look pretty, they serve multiple functions. A logo makes you stand out from the competition.

Read More
Corporate Identity

Corporate Identity

By | Design, Web and Tec

A logo is not your brand, neither is it your identity. Logo design, Identity design, and branding all have different roles but together they create a perceived image for an organisation. Logos are not just there to look pretty, they serve multiple functions. A logo makes you stand out from the competition.

Read More