Couponia Premium Shopify Theme


Thank you for purchasing the Couponia theme. This documentation should get you up and running quickly!

Thank you very much for purchasing the Couponia theme!  We really appreciate your business and support.

Our documentation is meant to be as user-friendly as possible.  Please use the navigation on the right to get around.  If you get stuck, you can check out our Support section for answers to common questions.  Thanks again for your interest and we hope you enjoy the theme!

Installing the theme is fast and easy.  When you first download the file from ThemeForest and unzip it, you'll see a documentation folder, a readme.txt file, and another zip file called Couponia.zip.  The Couponia.zip file is the theme file itself.  Continue reading to learn how to install it.

If you already have a Shopify store setup

If you already have a store setup on Shopify, simply login to your admin area and click Themes in the left navigation menu. From there, click Upload a theme in the upper-right corner of the screen. A window will appear. Click the Browse button and navigate to the Couponia.zip to upload it.  Note that you do NOT want to unzip this file prior to uploading, it must remain in .zip format.

install-1

Once the file finishes uploading, the Couponia theme will show up as an unpublished theme. To activate it, click the Publish button. A new window will appear asking if you want to replace your current theme. Don’t worry!  Your old theme will not be deleted, it will just be set as inactive.  Click the Publish button to continue.

The theme is now installed and ready for use!

If you do not have a Shopify store setup or you only have a free trial

If you don’t already have a Shopify store setup or are on a free trial, your best bet is to contact us after you’ve purchased your theme and we can setup a new account for you. The benefit of going this route is that there is no set time limit to your trial and you don’t have to pay any monthly fees until you’re ready to launch your store. If desired, we’ll also install the theme for you and help you get setup free of charge! If you’d like to take advantage of this, contact us to get started.

Onward!

Shopify has just added a new feature to all of their stores — international language support.  And guess what?  The Couponia theme fully supports it!

What is it?

Basically, it’s an easy way for shop owners to translate the content of their store into other languages.  There is a new section in the Shopify dashboard where you can edit translations for a wide variety of text and HTML blocks throughout your store.  By simply entering text in various text boxes, you can make it much easier for international customers to navigate your store.

How do I get to it?

To access your language settings, click the Themes link in the left hand menu of your Shopify dashboard.  If Couponia is enabled, click the button with the three dots in the upper-right corner of your screen and choose Edit language (see screenshot below).

Accessing your Language settings

You will then be presented with a user-friendly interface to edit your language settings.  The theme has built in support for English and French languages.  You can add more languages if you’d like, but this functionality is beyond the scope of the this documentation.  Keep an eye on the Shopify documentation for an article on how to do this.

Editing the Settings

The language settings interface

The language settings interface

Editing the settings is as straightforward as typing into each of the textboxes.  There are tabs at the top of the screen that allow you to access translations for different areas of your store.

Integration with Couponia Theme

The majority of the translations in this area won’t require any editing on your part.  However, you can use this area to setup custom titles for various sections of your site.  We use this area mainly for titling sidebar widgets, product tabs, and some section headings throughout the site.  If you’re expecting to find title settings for a particular area, this is a good place to look.  We’ve provided notes in the other sections of this documentation when you’ll need to make changes in this area.

Let’s jump in and take a look at the theme settings now.

Once you’ve finished installing the theme, it’s time to start customizing.  To access the Theme Settings, simply click the Themes link in the left-hand navigation in your Shopify dashboard, then click the Customize theme button in the upper right-hand corner.

showtime-theme-settings

That wasn’t so hard now, was it?  Ready to move on?

Global settings are options that will affect your entire site.  This seems like a good place to start customizing your theme.

Let’s explore these options.

MailChimp Newsletter Support

Shopify has tight integration with MailChimp, which is an excellent service that allows you to create a mailing list and reach out to your customers. MailChimp has multiple pricing tiers, including one that is free and still offers a lot of functionality.

In various locations throughout the theme, you’ll notice newsletter sign up forms.  If you wish to use this functionality, you must provide your form action URL.  This is a special URL that is custom to your MailChimp account. For instructions on how to find your form action URL, follow this link.

Currency Options

The Couponia theme has the ability to display a currency selector at the top of your page. You can select which currencies to display and this allows your customers to see your products’ prices in their home currency.

Let’s briefly go through each option:

Once you’ve made your currency selections, there is one more step you must follow.  From within your Shopify dashboard, navigate to Settings, then General and scroll down to the Standards & formats section.  Make sure your chosen currency here matches your Default currency setting in your theme options, then click the change formatting link.  You’ll need to edit the text in the HTML with currency and HTML without currency text fields.  For reference, checkout the screenshot below.

showtime-currency

Click to enlarge

There is also a Shopify support document that explains this process.  Check it out here.

Site Entry Popup

With the site entry popup, you can show a small popup window when a customer first visits your store.  This is a great way to convince customers to sign up for your newsletter, engage with your store on social media, or for whatever purpose you choose.  The popup will only display on the first page your customer visits, and will not show again to the same customer for the number of days you specify in the settings.

showtime-entry-popup

Entry Popup

Let’s take a look at the options.

Ready for more?

In this section, you choose the colors for your site. The includes background colors for sections like the top bar and footer, as well as text colors. Let’s explore the options one at a time.

Main Colors

The Primary Color option controls your main link text color, various interface colors, button colors, and more. It is well used throughout your site.  This color should be a darker color that contrasts well with white and other light-colored backgrounds.

The Secondary Color is used for link and button hover colors and a few other site elements.

Background Color or Image

If you choose a boxed layout for your site, you may choose a background color or image in the areas that surround the main content.  To do so, check the Use a background image? checkbox and browse for the file.  There are several options for the appearance of your background image:

Other Color Options

The other color options in this section are pretty self-explanatory.  It's best to experiment with the colors until you come up with a color scheme that looks good to you.

Typography

Here, you can pick which fonts you want to use for your headings and standard body text.  There are multiple Google fonts to choose from, as well as some web fonts, and standard system fonts.  Here is a link that allows you to preview the Google font options.

This section contains text fields to enter your store’s link to many different Social Media sites. These links are used to display the social media icons in the footer of all your site’s pages, as well as in the custom entry popup (if you choose to enable it). The most popular sites for e-commerce stores have been selected for you. Simply paste in the links for the networks you use. If you don’t have an account at a particular network, just leave the field blank and that icon will not display.

Social Media Settings

Social Media Settings

Easy enough right? Let’s continue…

The homepage is made up of the main slideshow (see next section), and up to seven unique customizable blocks that you can display in any order you want.  Each block can only be used once, but there are two different product blocks that you can use.  To see your options for the homepage, check out the theme features.

To begin, you select which blocks you want to use and in what order.  This is handled with simple drop-down menus.  Once you've made those selections, you can continue to configure each section.

Options here are pretty self explanatory, but here are a few tips.

 

Setting Up the Slide Show

The homepage slideshow allows you to add up to five slides that will automatically rotate at the top of the screen. These images fill the full width of the site or boxed layout, so you’ll want to upload high-resolution images for these. We recommend at least 1600px wide. For best results, keep all your slider images the same aspect ratio.

 There are three types of slides you can use - slide with caption text, slide with countdown, and slide with no caption.  The caption option allows you to show text on the slide.  This comes in the form of a title, subtitle, extra text, and a button that you can link to wherever you want.  
 
If you choose a countdown, a beautiful countdown display will show how many days, minutes, and seconds there are until the date you specify.  This is great for timed sales.
 
If you'd rather, you can also simply display an image with no caption.  With this option, the entire slide will be clickable and link to the location you specify.
 
You can preview all three slider styles on the theme demo.

The Couponia theme includes several options to help you setup your collection pages, but before we go over them, let’s talk a bit about some built-in Shopify functionality for Collection pages.

Collection Featured Image & Description

Shopify provides the ability to show featured images and a collection description on your collection pages.  To do so, click on the Collections link in your Shopify dashboard, and click on one of your collections.

Collection featured image and description fields

Collection featured image and description fields

To insert a featured image, click the Choose image button and upload an image.  The theme displays this image the full width of the layout (not the screen), so you’ll want to choose an image that is in a landscape orientation, preferably at least 1130px wide.  Height doesn’t matter, but since this is prime real estate on your collection page, you probably don’t want to upload something really tall.  The Description you enter will be displayed underneath the image.  These are both optional fields, and nothing will display if you leave them blank.

With that out of the way, let’s take a look at the theme settings and options for the collections page.

Product Display Options

Sidebar Options

The rest of the options for your collection pages have to do with the sidebar.  If you choose to show the sidebar, we have created several widgets that you can enable in your sidebar to help your site visitors get around.  You can provide titles for these widgets by visiting the Theme Languages settings in your Shopify dashboard.  If you wish, you may also disable the sidebar and the product grid will take up the full width of the page.  Available sidebar widgets include:

Your product page is the gateway to sales, so we’re pretty proud of some of the options we’ve built into Couponia to help you get your products sold!  Let’s take a look at the options at a glance:

Product Review Integration

Out of the box, Shopify doesn’t support product reviews.  Luckily, they’ve released a free application that adds this functionality to your store.  Although it’s pretty easy to integrate into most themes, you’re normally still required to get your hands dirty by editing some code in your theme templates.  The Couponia theme includes integration with this application, and we’ve done all the code/template editing for you!  All you have to do is install the application and you’re good to go.

To use the product review integration, you first need to install the application. To do so, follow these instructions:

With the application installed, all you need to do is enable this functionality in your theme settings.  Click the checkbox next to Enable product reviews and the theme will do the rest.

Product Option Swatches

By default, product variants and options on the product pages are displayed as drop-down menus.  Customers choose their product options (such as color, size, material, etc.) using drop-down menus.  This works fine, but we wanted to offer another option: product swatches!

With product swatches enabled, these drop-down menus for your product options are replaced with color-specific buttons (or swatches) that you can customize for color options, or attractive buttons for non-color options.

Standard product options display vs. swatches

Standard product options display vs. swatches with custom color images

Working with color options

For the color options you have for your products, you can either let the theme attempt to choose a suitable color button for you, or you can upload an image that represents that color. The default color displays are fairly generic and may not match the colors of your products very well. In addition, if your colors have odd names, the script may not be able to select an appropriate color because it looks for specific color names. For example, if one of your products comes in the color “Granite,” the theme will not know what color to assign to it. In this case, the default color is used (which is the same as the primary color you selected elsewhere in theme options). If this is a problem for you, it’s best to upload your own swatch images.

Uploading your own swatches

To use your own swatches, you need to upload an image that is approximately 55 x 45 pixels in size. It must be in .png format and must follow a strict naming convention. The image must be named after the color option.

For example, if you have a color called ‘Déjà Vu Blue’, then name your image deja-vu-blue.png

Another example, if your color is ‘Blue/Gray’, then name your image blue-gray.png.

Most simple example, if your color is ‘Black’, the name your image black.png.

To upload your swatch images, follow these instructions:

  1. Login to your Shopify dashboard and click on the Themes link in the left navigation.
  2. Click the button with the three dots and a small drop-down box will appear. Click Edit HTML/CSS
    Find your theme assets

    Find your theme assets

  3. You are now on the Template Editor page. Locate and click on the Assets folder to reveal its contents.
  4. Under the Assets heading, click on the Add a new asset link.
  5. Upload your image.
  6. Repeat steps 4 and 5 until you have uploaded all your images.

Using Videos in Your Product Gallery

One of the great features built into the Couponia theme is product video support.  By utilizing this option, you can include videos from YouTube or Vimeo as part of your regular product gallery!  You can have as many videos is you’d like in your gallery, and setting them up is easy.  Let’s get started.

Product video support

Product video support

To use videos as part of your product gallery, you need to do three things.  Get the embed code for your video from YouTube or Vimeo, upload a product photo as normal (preferably with some indication that it will link to a video), and edit that photo’s ALT text in your Shopify dashboard.

Getting the Embed Code

showtime-vimeo-embed2

Vimeo Settings

Upload a Product Photo and Edit ALT Text

Navigate to your product page in your Shopify dashboard and scroll down to the Images section.  You can use any of your existing images as a link to show a video, or you can upload a new one.  In our case, we added a small colored triangle with a video play button to the corner of the image so customers can easily see that it will show a video.  This is optional.  Once the image is uploaded, click the small pencil image with the word ALT next to it to modify the image’s ALT text.  Now, simply paste the YouTube or Vimeo embed code you copied earlier in to this box.  Click Done and you’re all set.  Now when customers click that particular thumbnail, instead of seeing a larger version of the image, they’ll see your video.

Edit the image's ALT text and paste in your video embed code

Edit the image’s ALT text and paste in your video embed code


See this functionality in action

Variant Images Support

The Couponia theme has built-in support for Shopify’s new variant images functionality.  This functionality allows you to assign a different image to each available variant you specify for your products.  This is useful if you want to show the appropriate image when a customer chooses a variant (like a blue dress, for example).  To learn more about how to setup your variants with images, check out this page in the Shopify manual.  Once you setup your variant images and a customer chooses that particular variant, the image in your product gallery will automatically change to that image.

See this functionality in action

Product Tabs

With product tabs, you can present a lot of information to your customers without taking up a lot of space on your product pages.  Showing the product tabs is optional, but if you use the Product Review integration, you will need to enable them.

You can have up to four tabs on your product pages, and the content for each is populated using content from a standard page you create in the Shopify dashboard.  If you’re using Product Reviews support, the first tab is reserved for that.  Simply give it an appropriate title in your theme settings.  You can ignore the page option for that particular tab because it will have no effect.

The other tabs are setup in a very simple manner.  Simply choose which page content you want to display.  You create pages by clicking on the Pages link in your Shopify dashboard.  You can provide custom titles for the tabs by visiting the theme language settings in your Shopify dashboard.

Note that the content of these tabs will be the same on all your product pages, so you can use them for re-usable content like sizing charts, store policies, contact information, or other things that would apply to all products in your store.

With all this information out of the way, let’s take a look at the last two settings in your theme settings for the product page.

Social Media Meta Tags

Social meta tags include Facebook and Pinterest Open Graph Tags and Twitter Cards. These are enabled by default to make the store more accessible on different platforms, and more readable for search engines.  To use this feature, simply enter your site’s Twitter handle in text box and the theme does the rest.

Related Products

If enabled, other products from the current’s product collection will be displayed at the bottom of your product page in an attractive carousel.  To use this, simply click the Enable related products? checkbox.  You can provide a custom title for this section by visiting the theme language settings in your Shopify dashboard.  Easy peasy!

If you’ve made it this far, the hard work is done.  We’re in the home stretch now.  Let’s continue with setting up your blog.

Setting up your blog to look beautiful is a simple process.  Let’s take a look at the options.

Blog Excerpts / Featured Images

Shopify doesn’t support featured images for blogs out of the box, so we’ve implemented a workaround that will allow you to show featured images on your blog page, articles page, and in sidebar widgets throughout your site.  The workaround involves the Blog Excerpts field.  If you wish to use this field to display featured images, check the box titled Use blog excerpt field for featured images in your theme settings.  If you enable this function, you will only want to put a single image in your excerpt field (no text or other content).  If you choose not to enable this, the blog excerpt functionality will work as normal.  Your excerpt will display on your blog homepage under each post.

To access the excerpt field, click on the Blog Posts link in your Shopify dashboard, and click on either an existing blog article, or the Add a blog post button to create a new one.  If you already have content in your blog excerpt field, it may be visible.  If not, it may be hidden as shown below.  Click the Add an excerpt… link to show the field.

Click to enable the blog excerpt field

Click to enable the blog excerpt field

To add a featured image to your blog post within the excerpt field, click the Insert Image icon.

Insert an image in the excerpt field

Insert an image in the excerpt field

A new window will appear allowing you to choose an existing image, or if you want to add a new one, click the Upload file button to add your own.  The featured images we use are a landscape orientation and fill the width of the container.  If you’re choosing to show a sidebar on your blog page, you should make this image at least 850px wide.  If you are not using a sidebar, you should make this image at least 1130px wide.  Height does not matter.  Once you’ve added your image to the excerpt box, make sure there is nothing else in the box and click Save at the top to save your blog post.  The image will now be displayed at the top of your blog post on the blog and article pages.  To see how these images are presented, check out the demo.

Sidebar Options

The blog in the Couponia theme allows for two optional sidebar widgets.  They are Recent Posts and Tags if you choose to enable them.  You can title your sidebar widgets by visiting the theme Language settings in your Shopify dashboard.

The Recent Posts widget will display a list of your most recent blog posts along with a thumbnail of the featured image (if enabled), the title of the post, and the date it was posted.  The Tags widget is a handy way for your customers to find blog posts based on how you categorize them using tags.  For this list to populate, you will need to tag your blog posts.  Look for the Tags section on your blog creation page in your Shopify dashboard.  Any tags you’ve used in your blog posts will appear in this widget, so be sure to tag your posts appropriately!

Let’s move on to options for standard pages next.

Standard pages include any pages you create by clicking on the Pages link in the left navigation of your Shopify dashboard.  Examples of pages you might have include About Us, Policies, Terms of Use, etc.  These pages are wide open and can be used for whatever you want.  The only options the theme provides for controlling the appearance of these pages involve the sidebar widgets.  Let’s take a look at the options.

Basically, there are four different sidebar widgets you can display on your standard pages: Page links, Collections, Blog Posts, and Sale widgets.  You can provide custom titles for these widgets by visiting the theme language settings in your Shopify dashboard. The sidebar can also be disabled on standard pages if you so choose.  Let’s take a look at what each widget does and how to set it up.

Ready to move on?  Let’s look at the cart page next.

 

There are just a few settings for the cart page but they are important. It might be easiest if we can visualize it.  Let’s take a look.

The Allow customers to add notes with their orders field adds the Order notes field you see above.  When a customer fills out this field, these notes are passed to the store administrator.  These are useful for special requests, shipping notes, etc.

The Cart currency note is also shown in this screenshot, but this note isn’t setup here.  This text is tied to your currency settings.  For information on how to set this up, refer to the Global Settings portion of this documentation.

Sidebar Options

Like most pages of your site, you can choose to display a sidebar on your cart page.  You can also disable it if you choose.  There are two widgets to choose from: a multi-purpose links widget and a shipping calculator widget.  You can title these widgets by visiting the theme language settings in your Shopify dashboard.

The Couponia theme includes a beautiful Contact Us page template that features a working contact form and an optional Google Map to show your store location.  Let’s look at how to get it setup.

Creating the Page

First, you need to create a contact page in your Shopify dashboard.  Assuming you don’t already have one, head over to the Pages link on the left and click the Add a page button in the upper-right corner.  If you do already have one, click on the page you want to use to open it.  We need to select a different template for the page.  To do this, scroll down to the very bottom and look for the Template section.  There’s a drop-down menu here.  We need to choose the page.contact template for our Contact Us page.

Choose the page.contact template here

Choose the page.contact template here

This tells the theme that you want to use the special contact template for this particular page.  This template includes the Google Map and contact form.

Contact Us Theme Settings

With our page created and the proper template selected, let’s take a look at the theme settings for the contact page.

Contact us settings

Contact us settings

The contact page is divided into two main columns.  The left hand column is for general information and any other content you want on the contact page.  This is populated using the standard page content you specify in your Shopify dashboard for the Contact page.  The right hand column contains the contact form.  It will send an email to the main email address you have on file within your Shopify settings when someone fills out the form.   You can provide custom titles for these columns by visiting the theme Languages settings in your Shopify dashboard.

Google Map Support

If you wish, you can also show a styled Google Map at the top of your contact us page.  It will show a pointer icon at the location on the map that you specify based on Latitude and Longitude coordinates you supply in the settings.  Don’t worry, it’s easy to find your coordinates using this handy page.  Just type in the address of your store and it will give you the coordinates.  Simply paste them into the appropriate text boxes and you’re done!  Users can manipulate the map by zooming out and in just like they would any other map on the Google Maps site.  Neat!

Just a few more settings left.  Let’s setup our search options now.

The search settings controls how your search results page will look after someone runs a search on your site. There are three different options to choose from.

Search settings

Search settings

Just about done!  Let’s look at the checkout options and wrap this up!

The final settings area we’ll look at in theme settings is the Checkout settings.  These settings apply when your customer is ready to make their purchase and enters the Shopify checkout system.  Shopify controls the whole checkout process — we were only able to make some minor styling tweaks to the checkout process.  That said, we worked hard to make the checkout pages look as close to the theme design as we possibly.  That said, here’s a look at the checkout settings you have:

Checkout settings

Checkout settings

As these settings were all created by Shopify, we’ll divert to them to explain the options better.  This checkout functionality is a new feature that has yet to be fully rolled out, so as soon as the documentation has been added to Shopify’s site, we’ll post have information about it on our site.  Stay tuned!