Carleton is a bold modernization of the heritage aesthetic. Packaged in two iconic color schemes (stripped-down Original and the mid-century inspired Modern), this Pixel Union staff favorite boasts adjustable promo boxes, sidebar tabs, and drop-downs.
Fonts & Colors
Fonts: Carleton’s Theme Settings allow you to customize the theme’s typography through two meta-settings--the Text and Header fonts.
Colors: Carleton's many colors are completely and easily customizable, through the Theme Settings' straightforward "Theme Colors" submenu:
Custom Backgrounds & Logos
Background: The theme's General Settings allow you to disable background images or use a custom background image (optimally sized at 600 x 400 px).
Logo: Carleton also supports the use of custom logos (optimally sized at 600 x 400 px). Additionally, if you'd rather use the preset logo you can still customize its font within the Logo Settings submenu within the Theme's General Settings.
Promo Area: Carleton's homepage contains a customizable promotional area beneath the slideshow, which is divided into image (right), left, and center boxes:
Welcome Area: The Welcome Area's Title, Content, Link Title, and Link URL are totally customizable.
Sidebar & Main Collections: Carleton's left Sidebar is designed to display up to 4 items each from two collections of your choosing. The larger Main Collection box is also customizable, with your choice of Title, featured collection and number of products displayed therefrom.
Slideshow: Carleton offers a 5-slide frontpage slideshow instead of the static marquee image. If auto-rotation is enabled, the image rotation frequency can be set to 10, 15, or 30 second intervals. To set up your slideshow, head to the Theme Settings submenu titled “Slideshow.” Enable your chosen number of slides and upload your desired images (optimally sized at a minimum of 980 x 350 px); then, simply input your slides' link location, title, and description into the corresponding fields:
Blog Preview: Carleton's homepage also accommodates an optional blog preview box, selectable and customizable from the Theme Settings menu.
Footer: The information within Carleton's footer is totally customizable:
Viewing Options: Carleton's product pages feature an optional lightbox product-viewer and customizable Related Items box.
Drop-Down/Sub-menus: Creating custom drop-down menus is painless. From your main menu, head to the “navigation” tab and create (and name) your desired 'parent' menu (e.g., "All Brands"). Then, simply create a new link list with exactly the same name as your parent menu. From here, it's only matter of populating that link list with 'child' links (e.g., "Brand 1," "Brand 2," etc.). For further information on the creation of sub-menus, see Shopify's wiki entry on this subject.
External Links: Linking to external content is simple--just make sure to include "http://" before your desired address.
Setting up Twitter in Carleton is simple.
1. Go to twitter.com/settings/widgets
2. Click on "create new."
3. Click "create widget," don't worry about any of the options.
4. Find the number in the code after "data-widget-id" and copy it, then head back to your shopify themes settings page.
5. Head to the Twitter feed section, and paste the widget id you copied into the "Twitter Widget ID" field. Just make sure you've input your Twitter username/ID as well, and you're all set!
“List Form Action URL:” We've designed our themes to integrate with MailChimp in the easiest way possible. This field sounds esoteric, but all it's asking for is a specific URL found in your MailChimp list menu. After creating/logging into your MC account, go to your Lists page and click to view your preferred mailing list (or create it, then view it). From this List page, select the "For Your Website" dropdown menu and then the first submenu, "Signup Form Embed Code." Scroll down to the bottom of the wall o'HTML to find <form action="____"> and copy ONLY the URL contained in this action.
Now, head back to Shopify. Go to your theme settings and under either "Footer" or "Mailing List Options" (depending on which of our themes you're using) you'll see a box for "MailChimp list form action URL." Paste. Done!
[Updated regularly, we’ll be posting important update and version information here.]