Cypress Theme Manual

art-1

Table of Contents

Basic theme setup

This section covers some basic settings to get your theme up and running.
Customization options and advanced settings can be found in the sections below.

Upload your new theme

If you purchased your theme directly from pixelunion.net, you will receive your theme as a .zip file named something like cypress.v1.0.0.zip.

Once you’ve downloaded the theme file, go to your Shopify admin dashboard and navigate to Online Store > Themes. Then click Upload theme in the top-right corner. Select your theme file from your computer and click Upload.

Your new theme will show up below your current theme. Once you’re ready, click Publish theme to show your new store to the world.

If you purchased the theme directly from Shopify, the uploading of your theme is all handled for you.

Choose a style preset

Atlantic comes packaged with two theme presets that curate your store’s colors, fonts, and styles for you. Check out our store demos to see the Art and Home presets.

Select the preset you would like to use under the Presets section of your theme editor.

Note: applying a preset to your theme will overwrite your current style settings.

Add your first product

To add your first product, click on Products in your dashboard sidebar. From the Products page, click Add product At minimum, you’ll want to add a Title, Description, Image, and Price.

See Shopify’s product manual for a detailed walkthrough. You may also want to check out how to configure variant images, set sale prices, or set up digital or service products.

Upload a logo

Your store’s logo provides branding for your site and a clickable link to return to the homepage.

To replace your store title with a logo, upload a logo image in your theme editor, under the Branding section. The maximum logo size is 300 x 200px. Your uploaded image will be automatically resized to fit within those constraints, but for optimal results you may want to resize it yourself before uploading.

We recommend that you also upload a copy of your logo that is optimized for retina displays (e.g., new iPhones/iPads/MacBook Pros).

What is a retina-optimized image? It’s simply a copy of your logo image that is double the size of the original. For example, a regular image at 200 x 200px pixels would be 400 x 400px in order to be optimized for retina displays. Enable and upload your retina logo as you would the original logo, under the Branding section.

Add a contact page

pageTemplateContact

Adding a contact page to your store is a quick and easy way to engage your customers. To create a contact page you will want to create a new page. While creating this page, scroll to the bottom of the screen and select page.contact from the Template dropdown menu. Messages sent via this form will be sent to your store’s e-mail address.

 

To receive additional information from your customers, you may enable a simple dropdown that users can select from to provide you with more information. Under the Page with contact form section of your theme editor, fill out the label, default text and at least two options to select from. You can add up to five options.

Set up a navigation menu

Now you can add a link to your contact page — or any other page — in your navigation. To add links to your navigation menu, go to Online Store > Navigation. You’ll find two pre-populated two menus: Footer and Menu. You may edit these menus or create your own. See Shopify’s instructions on how to set up dropdown menus.

Create a slideshow

Cypress’s slideshow supports up to 5 images with an overlaying title, subtitle, and call to action button. The overlaying content can be set to align left, right, or center within the slide image.

The slideshow has a user defined rotation speed and can be set to appear at the full-width of the screen or constrained to the content width.

Enable the currency switcher

The currency switcher sits at the top of your site and lets your customer select their desired currency. You can enable the currency switcher under the Currency options section of your theme editor. This is an optional feature, but it’s a great way to engage customers from other countries.

Enter the currency codes, separated with a space, of the currencies you wish to support in the field provided. You can reference this list of currency codes.

Please note: While prices can be displayed on the store front in different currencies, Shopify will process orders in the shop’s main currency.

Product management

This section covers how to manage and customize your products and collections.

art-7

Collection listing page

You may curate the collection listing page by enabled the Use specific menu list option. Simply create a new menu list populated with all of the collection handles that you wish the user to view when navigating to www.yoursite.com/collections.

Use this feature if you have collections that you don’t want to necessarily promote or if you have too many collections and you want to direct users toward specific ones.

For the Collections page, you have the option of displaying products either 2 per row, 3 per row, or 4 per row. What looks best will depend on your products and images.

Product Zoom

 

art-features-3

The Enable Product Zooming option – toggled by default – allows users to zoom in and get a closer look at large product images. With this option enabled, any image over 800px in width will automatically include a zoom function.

Related Products

Image 2015-01-16 at 3.04.53 PM

Under the Product Page section of your setting, you can enable the Display related products option to show up to three related products that are pulled from the same collection of the main product.

Customize your store

This section covers how set up theme features and customize the styles and layout of your store.

Fonts and Colors

You can customize virtually all of the text on your store by selecting from 16 handselected fonts and alter their color with the built-in color selector.

Title and logo fonts come with option for small caps. Enable this option to provide a sleeker, more compact look for your store.

Header

The header’s title, link, and background colours are customizable with the built-in color selector. We recommend using the Remove border option if the header background colour does not match the main background colour.

Enable the Match Width to content option to reel in the length and placement of your header menu.

Slideshow

home-1

Cypress comes equipped with a sophisticated responsive slideshow that can hold up to five slides. Each slide allows for an image, a title, a tagline, and a call-to-action link.

Unlike other slideshows, Cypress allows you to choose the placement of your action text (centered, bottom offset, lower left, lower right) on a slide per slide basis. The content of each slide can complement the composition of any image you choose.

By default the “next / previous” buttons are translucent black. If this doesn’t work well with one of your images simply select the Invert controls option. This will provide translucent white buttons for that particular slide.

What are the ideal dimensions for slideshow images?

We recommend using images at a 1280 x 640px dimension. If you choose to upload different sizes, we recommend that you use a 2:1 ratio and keep each slide’s width and height consistent with each other.

Welcome message

A welcome message is a great way to introduce potential customers to your store.

Can I change the font?

The font face for the welcome title is tied to the Page title font which can be found under the General section on the theme settings page.

Featured collections

art-2

Feature up to four collections on your home page by using the dropdown menus under the Home page: featurettes section.

Please note that all of the stylistic changes to the featured collections are handled under the Collection listing page section of the theme settings page.

Featured Products

Feature 2, 3, or 4 of your products on the home page. We recommend creating a separate collection for the products you would like to feature.

Recent Blog Posts

Feature 2, 3, or 4 of your most recent blog posts on your home page.

Instagram Widget

The Instagram widget displays the six most recent images from your feed. In the home page section of your settings, toggle Display Instagram widget and choose the title you want for your feed. Then, to integrate your Instagram account, you will need to enter in your access token. Follow the help link next to Access token to generate a token. Copy and paste your token back into the field.

Alternatively, instead of displaying your own Instagram account, you Display images with specific tag enter in a single instagram tag in the field provided (without ‘#’).

Twitter Widget

The Twitter widget displays your most recent tweet. In the home page section of your theme settings, you will find an  option enable and customize your Twitter widget. First, toggle Display Twitter widget and choose the title you want for your feed.

Then, to integrate your Twitter account, you will need to enter in your access token. Follow the help link next to Widget ID to learn where to find your Twitter widget ID. Copy and paste your ID back into the field. Additionally, chose whether you would like to display retweets, as well.

Footer

The Footer’s title, link, and background colours are customizable with the built-in color selector. To add or modify any links,  select Navigation from your Online Store sidebar and edit the Footer menu list.

The Footer also supports a Contact Module and Social Links, including Twitter, Facebook, Pinterest, Instagram, Google+, and Fancy. You can also choose to display your payment methods by enabling the 14 options provided.

Blog

When uploading images to your posts we recommend a minimum of 800px wide. This will ensure that your images always fill the entire width of the post at all resolutions. Additionally, you can choose to Display article authorshare buttons, and share count.

Contact Form

Contact Form Page

Need a page that has a contact form? Cypress can do that! On the page edit screen simply scroll down to the bottom of the page and select page.contact from the Template dropdown.

Newsletter

Setting up MailChimp

  1. Login to MailChimp and select Lists from the menu.
  2. Click the settings icon and select Signup forms from the row of tabs.Screen Shot 2015-09-08 at 11.53.26 AM
  3. Select the Embedded forms option.
  4. Scroll to the Copy/paste onto your site box and locate the form’s action attribute.Screen Shot 2015-09-08 at 11.56.27 AM
  5. Copy and paste the form’s action URL into the corresponding field in the Footer or Newsletter section of the theme settings page.

Setting up Campaign Monitor

  1. From the Campaign Monitor dashboard, select Lists & Subscribers and then click on your desired list.
  2. Click the Sign up forms  in the right hand sidebar.
  3. Select Copy/paste a form to your site.
  4. Leave the email box checked and uncheck all other boxes, then click get code

    slack-imgs.com

  5. From the form you need to grab 2 things: the Action URL and the Input IDslack-imgs-1.com

  6. Add both to your Newsletter section in your Theme Customizerslack-imgs-2.com_-1

World-class customer support

Our support staff is committed to helping you solve any problems you encounter along the way. Exceptional, human support matters to us a great deal. Contact us or check our help centre if you need any help at all.