Basic theme setup
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
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
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.
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
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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 ‘#’).
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.
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.
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 author, share buttons, and share count.
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.
Setting up MailChimp
- Login to MailChimp and select Lists from the menu.
- Click the settings icon and select Signup forms from the row of tabs.
- Select the Embedded forms option.
- Scroll to the Copy/paste onto your site box and locate the form’s action attribute.
- 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
- From the Campaign Monitor dashboard, select Lists & Subscribers and then click on your desired list.
- Click the Sign up forms in the right hand sidebar.
- Select Copy/paste a form to your site.
Leave the email box checked and uncheck all other boxes, then click get code
From the form you need to grab 2 things: the Action URL and the Input ID
Add both to your Newsletter section in your Theme Customizer
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.