Theme Basics

Welcome, and thank you for using our Carbon theme! This page's purpose is to help you understand and better use Carbon. Here you will find detailed instructions on how to get the most out of your new Shopify theme and it's amazing customizations.

General Settings

Global Sections

Home Page Sections

Other Sections

FAQ

If you have any questions at all please email us at hello@heliumdev.com



General Settings

Global Sections

Home Page Sections

Other Sections

FAQ



Theme Settings

Within the Theme Settings you will find:

  • Favicon
  • Header Height
  • Logo Height
  • Mobile Logo Height

Typography

This setting determines which fonts you want to use on your site. The pre-loaded fonts we include are free Google Fonts - we also include a way to upload an additional Google Font to the theme.



Colors

Colors

  • Global Primary Color (This is for buttons, store messages, footer content, etc)
  • This is mainly for some background colors where white UI elements need to look good on top of this color
  • Global Secondary Color - This is for hover effects, etc.
  • This is for error messages, sale prices, etc)
  • Global Black - This is mostly used for fonts
  • Global White - This is used for header and footer backgrounds, etc.
  • Global Gray - Not used by default










Products

Show Vendor

Toggle this to show or hide the product vendor below the product title.

Show review rating on grid items

Carbon is integrated with Shopify's Product Reviews app out of the box. If the app is installed, this will show the star ratings on the collection and product grids.



Developer Settings

This is for developer debugging. Do not check this box unless you are a developer working within this theme.

Cart

Carbon comes with a fully integrated quick cart that allows customers to check out from any page. This setting is on by default, but can be toggled off:

Example

Checkout

Carbon uses the latest checkout options available in Shopify. This includes:

    • Banner
    • Logo
    • Main Content Area (repeated background image or background color)
    • Order Summary (repeated background image or background color)
    • Typography (only the available Shopify checkout fonts are available here)
    • Colors
    • Checkout Settings - Links to Shopify admin checkout settings

Global Sections

These sections and settings are site-wide (global) and the changes made affect the entire shop. For example, if you upload a logo into the header - you won't see a different logo on a different page, etc.


General Settings

Home Page Sections

Other Sections

FAQ



Header

  • Logo - upload your shop's logo here.
  • Mobile Logo
    • Carbon has a unique mobile logo upload. Uploading this logo here will not display on desktop, but will display on any mobile device
  • Mega Menu
    • To set up your custom mega menu, go into the Header global section. Scroll down toward the bottom of that section and you will see a setting to override the header navigation. See below for more details on how to set up your custom mega menus.

Mega Menu

  • Carbon features a mega menu that includes images and utilizes your pre-build Shopify link lists. To activate your mega menu follow these steps:
    • Select the checkbox to override the header navOverride Menu Nav
    • Select whichever menu you want to use here
      Subnav Menus
    • Name your link, upload an image, select image optionCustom Nav Options
    • Success! Pat yourself on the back for a job well done


Store Messages

Store Messages are banners that appear under the header area and above the homepage section content. This can be set to show only on the home page, or on every page.

Like the other sections on the site, click into "content" and you will find more robust options.



Instagram Grid:

Our Instagrid requires you to get an auth token from Instagram in order to link your Instagram feed to this section. To get your auth token, make sure you are logged in to the applicable Instagram account and then visit either of these sites to generate your token:

1. Pixel Union: Instagram Access Token

2. Out of the Sandbox: Instagram Access Token

Once you’ve received your auth token (a long string of numbers), paste it into the field in this section:

You now have a fully functioning Instafeed! Enjoy!


Within the footer options you can update the footer image, toggle social icons, add primary/secondary/tertiary menus and basic contact info.



Newsletter Sign Up

Carbon comes with a newsletter sign up banner fully integrated with Shopify notifications.

To set this up all you need to do is check the box in the sections options. Updating the headline and text will appear on the left. There are multiple settings for how frequent to show this to your customers. By default this is set to "5 seconds after visit" and to show again "1 week later".

Screen Shot 2017 09 26 At 1.51.24 Pm



Home Page Sections

The way sections work in Shopify is that they are specific to the page that you are on. To edit these sections you will need to be on the home page. To access sections on any other page (product page, blog page, collection page or contact page) you will need to be on the respective page in order to update section content for those pages.

Carbon comes with the following preset Sections for the homepage:

    • Marquee Slider
    • Text Banner
    • Feature Grid
    • Featured
    • Column Content
    • Column Content
    • Image With Text Overlay
    • Collection List
    • Text Banner

General Settings

Global Sections

Other Sections

FAQ



Marquee Slider

The Marquee Slider is a section that adds a slideshow to your home page. Adding more than 1 slide will enable the slideshow. 16x9 is the preferred aspect ratio for marquee images.

The settings for the marquee can be found in the Marquee Slide section in the theme editor. Infinite Carousel means the slidershow will continue to rotate while you are on the page. Checking the box for "auto rotate slides" makes the slideshow autoplay - and activates the controls for the setting below ("time between slide change").

In order to add images and copy to the slides, you will need to add them in the content area of the settings. There are some intuitive settings for adding an image, copy and links.


Here we will discuss display settings and what they do:

The Text Alignment within the Content Area setting adds a text-align property here to justify the text Left, Center or to the Right, like so:

Content Vertical Alignment moves the content to the top, center or bottom of the slide. Marquee Display Options (Vertical


Content Horizontal Alignment moves content to the left, center or right of the slide.



Text Banner

The Text Banner section is a great option to help break up your content, while also engaging in conversation with your customers.



Feature Grid

The Feature Grid is a great way to show off your awesome product photography!

This section features two layout options (large image on left or large image on right).

Within the content settings you can add images to the grid and adjust the settings for the copy and images. Within these settings comes a hover overlay feature:



The Featured Collection section adds the a collection grid to your home page.

Grid Item size has three options: Small, Medium and Large. Medium is the default and is for showing a small number of great products as seen above.

Small is great for if you want to show a collection with a lot of products.

Large is for showing off one or two of your products in a collection (note: the products to show setting will only show a max of 6 if there are more than 6 products in a collection).



Column Content

The Column Content section with a few settings to alternate content in the section. Aspect Ratio displays the uploaded image at the selected ratio.

16x9 example (image left, text right):

4x3 example (image right, text left)

There are more granular options in the Column Layout field. This allows you to dial in your section to allow for more text, or larger image:



Image with Text Overlay

This section shares identical setting types as the other sections.


Pretty self explanatory really...



Collection List

The Collection List section links to specified collections and features the collection image, or a custom image that you can upload within the content settings.



Other Sections

To access sections on specific pages (Carbon comes with product page, blog page, collection page and contact page sections) you will need to be on their respective pages in order to update section content for those pages.

General Settings

Global Sections

Home Page Sections

FAQ



Collection Sections

The Collection Section can only be accessed while on a collection page. While on a collection page in the theme editor click on the "Collection" tab and it will open up the section content for the collection page.

The options within the Collection section allow you to update the collection title, show a specific collection, adjust the grid size (similarly to the home page collection section), products per page and menu.

Below you will see collection banners within the Content settings. This adds a banner to the selected collection page:

Note: you must select which collection the image should be assigned.





Product Sections

Similarly to the collection sections, product sections can only be accessed within the theme editor while on a product page.

Image 2017 09 27 At 8.45.56 Am.Public


The most important part of these product sections are the description display settings:

Description Display Settings determine how the product description appears on the product page.

Related Products will pull in any products that are within the same collection as the product page that you're on. You can also select how many products from the collection to view, we limit this to a max of 6.

Screen Shot 2017 09 26 At 4.25.59 Pm

The variant by default setting, when checked, will make the add to cart button unavailable until they select a variant.



Carbon comes with a built in related products grid for each product. You can toggle this on and off in the theme editor here:

This related products grid currently pulls in the first three products of the product's collection (if it's in a collection).

We are working on an update as of 12/11/17 to include an option to relate these products based on tags. We are hoping to release this in Carbon 1.9

Shopify Reviews

Show review rating on product pages

Carbon is integrated with Shopify's Product Reviews app out of the box. If the app is installed, and you have reviews within the app, it will show the star ratings on the product grids and the product page.

Product Sections

There is a review form below the product description on the product page:


Clicking on "write a review" opens the form for customers to submit a review:

Upon completion a "thank you" notice appears:

By default, Shopify's review app is not set to moderate, so make sure to review the app's settings to ensure that reviews are moderated if you want to control your content here.

About Page Sections

About Page sections allow you to upload image content and optional copy to the page.

Un-checking the "Show Shopify Page Content RTE" will disable the "about-us" page template content from your About Us page (if one exists). Leaving it checked will show any About page content here.

With Carbon's About section you can manage all of your copy here if you prefer (instead of managing this within the About Us page in the Shopify Admin).


Contact Page Sections

Contact Page Sections feature a custom contact form, content blocks for adding more information about your business, and a Google map showing your business location (if you have multiple locations that you want to show on the map, click here)

Contact Form:

Business Information Blocks:

Google Map Options:

Map ID Key is set by default in Carbon. The starting latitude and longitude determines where the map displays on your site. The starting zoom shows how close or far the map displays.

Multi Google Map Locations

So, you're a well established company and you have a lot of storefronts...Nice work!

Now, let's show these awesome location pins to your customers! In order to set a pin on Carbon's map, you will need to find the Place ID. Clicking on the link in content setting's place section will take you to Google's docs on how to get the Place ID.

Once you've found your Google place ID, paste it into the section's Place ID.

Repeat until you're showing off all of your amazing storefronts! Go you!



Theme Features

Mega Menu (Cntd)

  • Carbon features a mega menu that includes images and utilizes your pre-build Shopify link lists. To activate your mega menu follow these steps:
    • Select the checkbox to override the header navOverride Menu Nav
    • Select whichever menu you want to use here
      Subnav Menus
    • Name your link, upload an image, select image optionCustom Nav Options
    • Success! Pat yourself on the back for a job well done


Collection Filters


Collection Filters are a great way to allow your customers to sort through your collections. To set up collection filters you will need a collection of products, and product tags active on those products.

From there, go to your theme editor. Click on customize theme. Next, go to the collection that you want filters on. While on that collection page, you'll see a new section called "Collection Filters".

Click into that Section. From there you will see Filter Type - click into filter type and it will open up the RTE for adding tags. The tags need to each be on their own line and follow the same syntax as the tags in your products. Once you have created your filter type, it will create a dropdown menu on the collection page as seen below.

Enjoy!


FAQ


Is this a legitimate Shopify theme?

Yes. We are certified Shopify Experts - with countless hours of combined experience building custom Shopify themes for merchants, as well as numerous theme customizations within many Shopify themes, we are uniquely qualified to handcraft a theme for any merchant who needs one.

Is Carbon on the Shopify Theme Store?

Not yet! But we are really hoping to get on the Shopify theme store soon.

Will this work with my current Shopify subscription?

Yup! Whether you're on Shopify Plus, Advanced or Basic - this is the theme for you.



General Settings

Global Sections

Home Page Sections

Other Sections

Release Notes

Last Updated: 4/24/2018

30

  • Product page
    • Fixed issue with selected variant on page load not being correct.

29

  • Product page
    • Now supports structured product schema for item availability and price.

28

  • General
    • Changed the naming convention for releases, which will now be in whole integers every time there is a core change
    • Fixed a problem with users being able to impliment custom styles via the styles.css.liquid file

1.27.0

  • Product Grids
    • Fixed the loader class for the add to cart button so the rotating spinner shows up correctly
  • Product Pages
    • SPR Reviews Integration
      • If the reviews were hidden on page load, then the layout works when you toggle them to show and hide
      • Removed unnecessary dependency on masonry.js in favor of using a flex-box layout
    • Yotpo Reviews Integration
      • Fixed the layout and padding of the Yotpo reviews section, so it looks more in line with the theme's styles

1.26.0

  • Product Grids
    • Fixed an issue where the hover buttons were not lined up correctly
    • Added a settings checkbox to forcibly-show the add to cart grid button on mobile widths
  • Mobile Menu
    • Fixed the custom dropdown menu styles on devices so they render correctly

1.25.1

  • Product Pages
    • Fixed an issue where multiple images would trigger the zoom window at once

1.25.0

  • Product Pages
    • Added the ability to zoom product images on mouse hover
    • Zoom functionality applied to both the default and standard product templates
    • General Settings -> Product settings has a checkbox to enable/disable zoom functionality

1.24.0

  • Store Messages
    • Reduced the amount of available message blocks to 2
    • Converted the styles to flex-box for an improved layout that responds better on all screen sizes
    • Better button styles that inherit the chosen text color in schema
    • Removed button checkbox in schema in favor of better liquid logic
    • If there's a button, it's rendered next to the text to save vertical real-estate

1.23.0

  • Product Page
    • Split the for attribute and the id attributes to be unique between desktop and mobile, which fixed the duplicate ID error in Chrome

1.22.3

  • Product Page
    • Improved styles for the product page on mobile
      • Layout, spacing, padding, etc

1.22.1

  • Product Page
    • Improved the spacing around the compare-at-price for items that are on sale

1.22.0

  • Add to cart functionality
    • When adding an item to the cart on the product page and product grid items, the markup is now a standard form submission, which is correctly prevented from it's default functionality when the slide-out cart is enabled.

1.21.0

  • Cart Slide-out Switch
    • There's an option in settings/cart that allows you to disable the sidebar slide-out cart.
    • When This happens, clicking on the cart icon will direct you to the /cart page
    • Adding a product to the cart when this is disabled will bring up a modal window letting you know an item has been added to the cart
  • Footer Branding Card
    • Styles have been updated so both the color of the text & icons can be set independently of the background color with the same color options as the background.
  • Product Grids
    • Serving incrementally larger size images to reduce the occurrence of blurry product images
  • All Collections template (/products)
    • This view was fixed, and now loops correctly across all collections and displays the correct products


1.20.1

  • Content Column Section
    • Text now maintains alignment with the button when you scale your browser larger than 1600px
    • On mobile, when there’s a link set, the image displays correctly



1.20.0

  • Theme Subnav
    • Added a vertical option for the subnav size, which disables the columns, and adjusts the padding to fit the link space
    • Implementing a checkbox to hide/show the subnav link-list titles



1.19.0

  • Theme Navigation
    • Reduced the size of the dropdown arrows



1.18.0

  • Content Column Section
    • When selecting a full-height section, on mobile the columns stack appropriately and no longer try to stretch the full height of the browser. Rather, they take the height of their content.



1.17.0

  • Product Template
    • Added a standard product template called product.standard.liquid, which displays a simple product page in a 2 column layout, which allows for easy customization and app integration into the product page.
  • Misc Updates & Fixes
    • Fixing the height of the standard product page image slideshow area
    • Product page share links updated to display block-level on mobile
    • Better spacing for the add to cart and quantity buttons on the standard product template
    • Centralizing the code for the standard product page into a snippet
    • Adding another medium-width restriction variable to size the two standard product columns better