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