How to Add a 3 Column Price Section in WordPress

3 column price section-01

Perhaps you run a business and have a website up and running but showcasing your pricing isn’t always the easiest thing to do.  I wanted to show you an example of just how you can add a slick looking, multiple column price section to your website using WordPress, a StudioPress theme called “Altitude Pro” and some basic coding to get the job done.

Once you’ve downloaded Altitude Pro from StudioPress (aff link) and installed it on your WordPress site you are going to navigate to the “Widgets” section under “Appearance“.  You will notice that the main area of the website is divided into 7 sections giving you lots of options of how to customize your site using the Altitude Pro StudioPress theme.  We are just going to focus on one of them for the purpose of setting this up. You are going to use 4 text boxes, 1 for the text at the top and 3 for the 3 price options to show on your website.

For the first text widget you are going to use a combination of H2 and H4 header tags to style the top content before your pricing.  You will end up using the H4 header code for the title of this section and the H2 header for the content in this section.

3 column price section-03

For text widget 2 to 4 use a similar structure to what you see below and fill in the widget title.  This will end up giving you a bold and slightly larger price text, a bulleted list discussing various features of your products or services.

3 Column Price Section-02

A couple of things to make sure of are that you are:

  1. Check the “Automatically add paragraphs” checkbox to ensure the formatting is correct.
  2. Make sure you dot n’s the widget title in the first text widget but use it in the following ones where you discuss pricing.
  3. Follow a similar structure to what you see above when coding the widgets so that you get a similar look and style to you pricing section.

Once you are done simply save and review the changes on your WordPress site.  You can really play around with the styling and the coding to make sure that your pricing section looks amazing without too much work involved.

App Review: Improved Contact Form by Improvely

Improved Contact Form - 01

Yesterday, I wrote about how to customize your own contact page which does require some level of technical knowledge and not to insult anyone reading this but sometimes its easiest if you can use an app to get it done.  So for those of you that don’t want to spend time creating a contact page and coding it this app review is for you.  I stumbled across an app called “Improved Contact Form” earlier today that promises customizable contact form fields among other things.  After you install the app and click on it you will be brought to a screen that looks like the one below and offers you not only the ability to add and remove and customize the form fields and change the style of the button that appears on your contact page and the ability to customize some page settings before and after the contact form.

Improved Contact Form - 02What I like about this contact form app is that you can select which elements you want to appear on your contact form with a series of checkboxes and text fields.  Another useful thing is that it records and shows the most recent email messages received in the app itself.  Now the app does allow you to do some custom coding before the form and after the form as you can see below.  Now I do caution against this if you are not comfortable with coding but if you are then I say “Go for it!”

Improved Contact Form - 03


What I didn’t like about using this app and what may keep you from using it is that you cannot add different types of fields or create new fields to appear on the contact page so if this is something you need from a contact page then you will need to look elsewhere.  Check out the “Improved Contact Form” on the Shopify app store today, download it and customize it for your Shopify store.  It will save you some time and give you a lot of the functionality you need in a good contact form with a few hidden surprises that will make your life easier.

How to Create a Contact Page in Shopify

Shopify allows you to do a lot of things but sometimes its the simple things that are not clear. I wanted to show you one of those things today. Creating a contact form should be and Shopify does allow this functionality right out of the box. I am here to show you how to go about adding the default contact form to your Shopify store. When you log into your Shopify store go to “Pages” and create a new page and call it “Contact”. Scroll down to the “Template section” and select the “” template just like you see below.

Shopify Contact Page

Now let’s say you want to customize the contact page. This is where you will need some knowledge of HTML and CSS to really make an impact and if you don’t know or care to know I would stop here. Okay, so you are still here, than lets carry on. You will need to go to “Themes” and when you do you will see a button with “…”.  Hover over it and select the “Edit HTML/CSS” option.  This will bring you into the templates that run your Shopify store.  If you’ve never been in here before don’t worry  I will guide you through it.

Shopify Contact Form 2

When you do you will see a lot of templates and coding associated to those templates.  Look for the “” template and select it.

Shopify Contact Form 3


If you wanted to add a new field to the contact form all you would need to add is something like this…

<input type="text" name="contact[hair colour]" placeholder="Blond" />

Save and you are done. If you aren’t able to learn the code don’t worry too much. There are a number of apps that you can use to creates forms and get around this issue if you aren’t comfortable with coding.

Product Review: Design Palette Pro Plugin

Design Palette Pro-01Design Palette Pro for Genesis is a Premium WordPress Plugin that you can buy for use with StudioPress’ Genesis framework and some StudioPress Child themes.  This plugin really allows you a point and click interface to customize your own CSS without ever having to learn an once of code.  You can even do some advanced level modification of alignment, sizes, weights, colors, fonts and more.

Let’s talk about some of the benefits of using this product on your site and how you can customize.

The ability to control padding in CSS – Padding is one of those things in CSS that takes a certain amount of finess to get just right.  Its tough to code it by hand and  takes a while to get the hang of.  Using Design Palette Pro the effort to adjust padding is greatly reduced to shifting a slider and viewing it in the preview window.  This functionality is really well thought out and as you can see below you are always aware of the padding you are adjusting whether its on the top, bottom, left or right.

Design Palette Pro-02

The ability to control fonts – Fonts play a huge role in how your website is displayed, designed, read and constructed.  The team behind Design Palette Pro must know this because they added a lot of control over fonts from the header to the footer section and everything in between.  There are a number of fonts available in the plugin and the great thing is that you can control the font size, font weight, text appearance, text alignment and font style.

Design Palette Pro-03

Preview your site on various screen sizes – Being able to see how your website renders on various devices is almost standard these days with more and more of your audience moving to mobile devices.  As you can see you have the options of selecting how your site renders on a smartphone interface, a tablet sized interface as well as a normal screen sized interface.  Being able to see this in real-time as you are customizing your website could save you from some costly mistakes and hours or redevelopment.

Design Palette Pro-04

Freeform CSS – This is for the developers out there that are using this tool that still need more ability to customize the CSS elements on their site.  You can customize and preview CSS either on a global level which applies CSS changes and additions you make site-wide or for mobile, tablet, or desktop CSS which makes this a powerful feature for those of you developers out their looking to work a little extra CSS magic.

Design Palette Pro-05

There are many things that make this plugin a great tool if this is your first site or your 50th site this will greatly cut down on design and development time.  The cost is a little high but if you are looking for this functionality in a free plugin it will be hard to find let alone compare.  Design Palette Pro is a very useful, intuitive plugin that is well worth the money especially if you are looking to avoid coding and want to customize your site to the maximum amount.

How to Embed Your Shopify Store Into WordPress

When it comes to the internet and growing your business chances are you want to use the best tools around to do it.  I’ve used WordPress for years and I’ve used Shopify for years as well both for different things.  So when you have the ability to integrate two great technologies like WordPress and Shopify you should do it.  Shopify has as app called “Shopify Widgets” that lets you embed a “Buy It Now” button, a “Product” and your whole Shopify store into third party blogs and websites including WordPress.  Today I want to show you how to do just that.

Shopify Widgets-01

Once you’ve installed the app in your Shopify store, you’ll notice that you have a few options to add a “Buy It Now” button, “Embed a Product” or “Embed a Shop”.  For the purposes of this tutorial we will be focusing on how to embed a Shopify store on your WordPress site but if you are running a different platform on your blog or site you will still be able to use this app to extend Shopify on your website.

Shopify Widgets-03The next thing to do is to click on the “Embed a Shop” graphic.  Doing this will take you to a screen to add collections (if you haven’t already done so) to your Shopify store.  In my case, because this is a demo account that I use I didn’t use any collections when I set it up.  With that said once you’ve created a click just click on it and from here you will see the option to “</> Get Embed Code” button.  What this button will do is generate code you can embed on your website.

Shopify Widgets-04After clicking the button, you will now be able to see the embed code written in Javascript seen below.  When you copy and paste this into your website you will be able to showcase your products on your website.

Shopify Widgets-05Shopify offers a lot of cool and neat integrations and custom workarounds and the “Shopify Widgets” app is definitely useful especially if you have a pre-existing blog or site and you want to offer products for sale using Shopify’s ecommerce platform.