Theme Documentation

Tips & Recommendations from the Team

• If you’re trying to disable a setting and it doesn’t have an associated checkbox, try clearing the textbox. For example, the social media icons in the footer will show up only if you have specified a link.
• Try perfecting the basic colors first, and then fine tune your color scheme by tweaking the advanced colors.
• Use light colored fullscreen slider images with dark navigation and vice-versa. 
• The slider will support images of different heights, although we recommend using images of the same height. Recommended dimensions are 1200px wide by 400px-700px high.
• The product image zoom works best with larger images, we recommend that you upload product images sized at 1024px wide by 1024px high.

General Settings

In the General Settings you can upload an optional background image and adjust the background positioning. Here you can also upload a custom favicon for your store. Recommended dimensions are 32px high by 32px wide.

Typography

The Blockshop comes bundled with five recommended Google Web Fonts along with the default web-standard fonts. For advanced customization you can adjust Typography - Advanced settings which allows you to include any Google Web Fonts and Typekit font libraries.

Note, if enabled, the advanced settings will override the default typography.

Google Web Fonts Setup

• Select a Google Web Font that you would like to use.
• Click the quick use icon or copy the font-family name that is between the single quotation marks: 'Signika Negative'.
• Paste the font-family name into the Font Family form, select Google Fonts from the Type dropdown menu and check the Enabled? checkbox,
  
• Click the save button at the bottom or top of the page and you are ready to go!

Typekit Setup

• Create your typekit and skip the installing javascript step (New to typekit?)
• Go to your Blockshop theme settings, and open the 'Typography - Advanced' panel. You can see that you require a Typekit ID and your font families
  
• Go back to typekit, and launch your kit editor. The id is where the xxxxxxx's are:
  
  
  
• To find the font family select your font and click the 'Using fonts in CSS' link as shown in the previous image. Copy the text as shown below, making sure not to include the quotations "".
  
  
  

Colors

The color settings allow you to specify a universal color for the main user interface elements including text, links, borders, buttons and background colors.

The Panel Background color settings is an important part of the design and breaks up the content blocks of the page with a specified colour. It can be subtle like a soft grey to compliment white, or as colorful as candy shop.

Colors - Advanced

The advanced color settings allow further customization of colors for individual site elements. There’s over 30 of these advanced settings - allowing you all the freedom you need to express your brand with kaleidoscopic flare!

Note, if enabled, the advanced settings will override the default color settings.

Header: Main Navigation, Cart, Search and Account

The Header settings gives you the ability to adjust key elements in the site’s header including the store logo, navigation, cart, search and accounts settings.

To upload a custom logo, select the Use Logo Image checkbox. Both a standard & retina sized image are required. Maximum logo dimensions are 800px wide by 100px high & for the retina 1600px wide by 200px high.

Blockshop has 2 types of drop-down sub menus:

- Standard sub menu: These are created by matching the link list title to a main menu item title. 
Shopify provides some instructions on How To Create Drop-Down Menus.

- Multi-column collections sub menu: This is unique to Blockshop and allows you to have up to four link-lists for your collections in multi-column drop down.

To set up a collection sub menu follow these steps outlined in the image below.

1. First make sure you have created a main menu in the navigation section of your store’s admin.

2. Once that is created edit the link list and check you have the catalog linking to a 'Collection' and select 'All Products'.

3. You then have to create the link lists in the navigation section of your store’s admin. You can have up to 4 link lists in the collections menu. These are highted in steps 3 and 4 in the screenshots.  

4. Finally, you have to reference the link-list in the Theme Settings under the Header section. The title field can be anything, and is the name used for sub menu titles.

To disable the sub menu list, set the Main Menu Linklist to None from the drop down menu in theme settings.

For more information, refer to this video from Shopify.

Don’t forget, the colors for the header elements can be adjusted in the Colors - Advanced settings.

Home - Fullscreen Slider

In the Fullscreen Slider settings you can edit image and video content for your home slider and adjust animation settings.

To push the menu slider below the menu select the Push below menu option.
Note, the Beauty preset has this enabled, and Deli Preset has this disabled.

The slider allows for up to 6 slides with full customization of caption boxes including a title, taglines and a call-to-action button for each slider. You can also adjust the vertical and horizontal position of the caption box on each slide to suit different imagery.

To enable modal video for a slider, simply paste in the video URL to the field.

Captions are optional - To remove captions and make the entire slider clickable, simply leave the Title, Tagline and Call to Action Title fields blank.

Home - Product Slider

Product sliders can be customized to feature any collection of products on your homepage. First you’ll have to create the collection in the Collections settings (see Collections). Then in the product slider settings, check the Enabled? checkbox, point to the collection using the Collection to use from the drop down and give it a name using the Title field. Examples include: New Arrivals, On Sale, Daily Deals, Seasonal Specials, etc.

Home - Widgets Blocks

The Home Widgets are 3 customisable horizontal blocks - Information Block, Promotional Block and the Social Block that can be creatively customized as marketing tools for your store. Each can be enabled or disabled to suit your requirements.

Information Block

The Information Block allows you to use video, images and or a text field to introduce/describe your product or brand.

Promotional Block

The Promotional Block allows you to have up to 4 image boxes that can be used creatively as store portals - linking customers to different areas of your store. To enable a promotional box, selected Promo [number] Enabled? and upload a custom image.

Social Block

The Social Block allows you to create a customised social feed using Instagram, Twitter and Blog widgets.

Note, the promos will span the full row regardless of whether you have 1 or 4 enabled. For best results, use images that are the same height for each promo.

Footer

The Footer Settings allow to customize the columns that appears in footer section of the store. Here you can add store information, secondary navigation, payment option icons, social media links and newsletter settings.

Collections

Here you can adjust visibility of certain elements on the collections page and customize the product grid.

Product

Here you can adjust visibility of certain elements on the product page and customize the social sharing panel.

Product Zoom and Modal Popups (gallery) for poduct images are enabled by default, to disable simply uncheck them under Produt theme settings.

Pages and Page Layouts

You can choose between three standard layouts for a page; standard page, full-width page , contact page or a page with sidebar.

• In the admin area, go to Pages and select a page that you would like edit. 
• Scroll to Template at the bottom of the page an option from the drop-down menu. 

  

• Click the Save button at the top or the bottom of the page.

Codeable Sidebars on Pages

In addition to page layouts, you can add custom left or right sidebars to Pages in the theme using the code snippets.

In the admin area, find an RTE field on a page you would like a custom sidebar and press the "Show HTML" button. Paste in one of the following snippets and replace the text content with your own.

<div class="left-side-column">
    <h1>This is a left side column</h1>
    <p>Add your content here...</p>
</div>

<div class="right-side-column">
    <h1>This is a right side column</h1>
    <p>Add your content here...</p>
</div>

Blog

The Blog setting allows you specify the number of articles and comments per page using the drop down menus.

Search

Customize the display of search results and number of items per page.

Cart

Use the Show Shipping Calculator? checkbox to show or hide the Shipping Calculator.

Custom Accordions & Tabs

You can add tabs to any RTE (rich text editor) areas to Product descriptions, Collection descriptions, Custom pages and Blog posts.

In the admin area, find an RTE field and press the "Show HTML" button. To do this, paste in the following snippets and replace the text content with your own. The top set of elements are the tabs themselves ("accordion headings", and second set of elements ("accordion content") is the content that corresponds to each tab.

Accordion Code Snippet

<ul class="accordion headings">
    <li>tab number 1</li>
    <li>tab number 2</li>
    <li>tab number 3</li>
</ul>
<ul class="accordion content">
    <li>
        <p>Content for tab number 1...</p>
    </li>
    <li>
        <p>Content for tab number 2...</p>
    </li>
    <li>
        <p>Content for tab number 3...</p>
    </li>
</ul>

Horizontal Tabs Snippet

<ul class="tabs-horizontal headings">
    <li>tab number 1</li>
    <li>tab number 2</li>
    <li>tab number 3</li>
</ul>
<ul class="tabs content">
    <li>
        <p>Content for tab number 1...</p>
    </li>
    <li>
        <p>Content for tab number 2...</p>
    </li>
    <li>
        <p>Content for tab number 3...</p>
    </li>
</ul>

Vertical Tabs Snippet

<ul class="tabs-vertical headings">
    <li>tab number 1</li>
    <li>tab number 2</li>
    <li>tab number 3</li>
</ul>
<ul class="tabs content">
    <li>
        <p>Content for tab number 1...</p>
    </li>
    <li>
        <p>Content for tab number 2...</p>
    </li>
    <li>
        <p>Content for tab number 3...</p>
    </li>
</ul>