Sugar Theme Manual

sugar-bright

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 sugar.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

Sugar comes packaged with three theme presets that curate your store’s colors, fonts, and styles for you. Check out our store demos to see the Light, Bright, and Warm 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 Header section.

The maximum height for a logo is 100px. Large images will be automatically resized to fit this constraint.

 

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.

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.

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. To add a new menu list, click the add menu list button. See Shopify’s instructions on how to set up dropdown menus.

Create a slideshow

You can enable and customize the Image, Title, Subtitle, URL, and Overlay styles of up to 5 slideshow slides. Additionally your slideshow works beautifully on mobile, and can optionally have a custom timed delay and navigational controls.

Product management

Enable Filter Groups

Filter Groups allow you to tag and sort products within a collection by custom categories. This is facilitated by Shopify’s flexible navigation system. Enable filter groups under the Collection page section of your theme editor.

To create a Filter Group, go to Online Store > Navigation and click Add a menu list, naming it Tag Filters. From there you can add a new link: the Link Name should be the title of the category you’re sorting, and Links To… should be a collection — note that the filter group will only be displayed on the page of the chosen collection. Finally, in that same link row click Filter with tags, and enter in any tags you wish to filter that collection’s products by. Afterward, you can add these tags to products.

lterGroups

Enable Sorting

Enable sorting under the Collection page section of the theme editor. Sorting gives your customers the ability to sort products using the following options provided in a dropdown menu:

  • Featured
  • $ Low to High
  • $ High to Low
  • A-Z
  • Z-A
  • Oldest to Newest
  • Newest to Oldest
  • Best Selling

Stock Level Indicator

Use this option to display a message overtop a product when its stock is below a certain amount. The product must be be allowing Shopify to track its inventory under its Inventory Policy in order for this feature to work.

Under the Collection page section of the theme editor, you can enable Show stock level overlay and use the dropdown to select at what quantity level you want to

Listing Quick Shop

Enable this option, under the Collection page section of the theme editor, to allow customers to quickly view and add an item to their cart from any product listing (such as a collection page or related products section).

Zooming on Product Images

Under the Product page section of the theme editor, enable this option to allow customers to click the image on a product page and pan around a larger version of your product image. Note: the full size image must be equal to or larger than 700px wide in order for this feature to work.

Quantity Box

Under the Product page section of the theme editor, enable this option to display a quantity field on each product page.

Related Products

Under the Product page section of the theme editor, enabling this option will display 2, 4, or 6 related products below the main content on a product page. Products are considered related if they belong to the same collection.

Home Page and Customization

Typography

Sugar comes with a wide variety of fonts for you to use around your store. For most of the font settings, and depending on the chosen font family, you can make your fonts bold by changing the Font Style and you can enable the Capitalize option for a condensed display.

Favicon

Your site icon will be used as the icon in your browser tab, as well as the icon for bookmarking on iOS devices. The icon image should be square, and a size of at least 80px by 80px is recommended. Upload your icon under the Header section.

Colors

Sugar removes a lot of complexity by only providing one color option, the Primary Accent Color. This color is used in various ways throughout the entire theme.

Sidebar

Sugar’s desktop navigation and header tools transform into a mobile friendly, nested, and animated dual-sidebar. On the left side is your navigation, search, and social icons; on the right side are your cart details.

Under the Sidebar section of the theme editor, you can toggle the options to Show shop title and Enable featured content.

Featured Collections

Use this section to display up to four collections that you wish to showcase on the home page. Simply select your preferred collections from the dropdowns. You can also add a section title.

Featured Products

Use this section to showcase 2, 4, 6, or 8 products from a given collection on the home page.

If you’d like to showcase products from multiple collections, we suggest creating a standalone collection named “Featured Collection” which you can then populate with a custom combination of products.

Featured Blog

Use this section to display 2, 4, or 6 posts from a given blog. Use the Hover Style to set how the posts look when hovered over (demonstrated below).

BlogHoverStyle

Instagram Widget

The Instagram widget will pull in and display your most recent public photos or videos. 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.

You can choose from two layouts for your feed (demonstrated below). Style One will display 5 posts, with the most recent one given a larger size. Style Two will display 8 posts all at the same size.

InstagramLayoutStyle

Alternatively, instead of displaying your own Instagram account, you can display Instagram posts with a specific tag. Simply toggle the option for a tag feed and enter in the specified tag that you want (without the #).

Twitter Widget

The Twitter widget displays your most recent tweet. To integrate your Twitter account, you will need to enter in your access token.

To find your access token, log into Twitter and go to your settings. Then, from the sidebar click Widgets and then Create new. Choose your timeline source and click Create Widget. After the page loads the URL should look something like this:

https://twitter.com/settings/widgets/1234567890/edit

That URL contains your Widget ID. In this example, it’s 1234567890. Enter your Widget ID into your Theme Settings.

Finally, choose whether you would like to display your retweets.

Blog

Under the Blog page section of the theme editor, you can optionally display Tags and Post Author.

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

Footer

Featured-In Images

Sugar allows you to display up to 3 images (optionally linked) images in your footer, and while the feature is called Featured-In images, it could potentially be used for any set up images you’d like to display (such as sponsor logos, linked banners, etc).

Footer Text

Use this text box to place any important text in the footer. This could be used for an address, phone number, or other helpful information.

Payment Icons

Payment icons are displayed below your store’s copyright message in the footer. Icons are displayed based on your accepted payment settings in Shopify.

Social Media

Social Icons

Enter the URLs of your social accounts and the social icons will automatically appear in your Footer. The URL should link directly to your profile or account page. Remember to include http://, appended to the front of URLs.

Share Widget

The Share Widget appears on both product and article templates. Optionally display share buttons from Facebook, Twitter, Pinterest, and Google+.

Advanced

Adding Google Fonts to your store

While we have hand-selected a group of web-safe fonts to match the theme, it is possible to add your own fonts with a bit of editing of the code in your back-end. We’ll walk you through each step to select the font you want and then integrate it into your theme.

There are other fonts services available, but we’ve selected Google Fonts because they’re great to work with: they’re free, open-source, and guarenteed web-safe.

Select a Font

Go to Google Fonts to find a font you want. As an example, if you want Open Sans Condensed, click on the button with the right arrow for quick use.

openSansCon

You’ll then want to select which styles of the font you’ll want. In the screenshot, all three available styles are selected:

Image 2015-11-25 at 2.27.30 PM

Then scroll down to the section entitle  Add this code to your website. Click on the standard tab and copy the code provided.

Keep the Google Fonts page open, as you’ll want to return to it later.

Add the font to your store

From your store dashboard, navigate to Online Store > Themes and then click the ‘more’ () button and Edit HTML/CSS.

In the layout folder, click on theme.liquid.  Find the </head> tag in the code editor and then paste the code you copied from Google Fonts on a line above the </head> tag.

Then click Save.

Add the font to your settings

Staying within the code editor, go to the Config folder and click on settings_schema.json

Search for “Fonts” or “Typography” in the code. Then find the section you would like to add to (e.g. Body,  Store Title, Heading, Button, etc.). Directly under  "options": [ paste:

     {
       "value": "",
       "label": "",
       "group": "My added fonts"
     },

Then, back on the Google Fonts page, in the Integrate the fonts into your CSS section, copy the CSS code. Past this code inside the quotation marks of the value attribute.

Delete the font-family: text and the semicolon ; from the CSS code that you pasted.

Type the font’s name inside the quotation marks of the label attribute. The name you type here will appear in the font selection drop-down menu on your Customize theme page.

 

     {
       "value": "'Open Sans Condensed', sans-serif",
       "label": "Open Sans Condensed",
       "group": "My added fonts"
     },

Click Save.

When you go to the typography section of your theme editor, you will know find your new font in the dropdown(s) provided.

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.