Thank you!

We'd like to thank you for choosing Focus Theme and we hope it will serve you well. Enjoy using it and let us know if there is anything we can help you with.

1.Theme Installation

Installing Focus Theme is quick and easy. If you have an account with Shopify please log into your store admin. If you don't got one, try the free 14 day trial Shopify account.

Once you've logged in, go to Themes and click 'Upload a theme'.

Theme Installation

A popup will let you upload the focus-theme.zip file. If you downloaded this theme from Themeforest make sure to unzip the received file first. You'll find the focus-theme.zip in the unziped folder. That .zip file is suitable for Shopify theme upload procedure.

Theme Installation - Upload

After successfully uploading the theme, it should appear at the bottom of the page with an option to Publish it. Click 'Publish Theme'.

Theme Installation - Publish

Congratulations! Your Focus Theme is ready for customizations.

2.Theme settings

In order to let you customize your store to better fit your brand and needs, Focus Theme comes with a variety of theme settings.

Start customizing your theme by clicking on 'Customize theme'.

Theme Customization

It will take you to Theme Settings page, where you'll be able to edit all theme's settings. Settings are organized in sections for easier access.

Theme Settings

3. General settings

3.1 Theme presets

Theme Presets are color presets that have been carefully picked. There is a selection of 3 presets coming with Focus Theme. Each preset has a focus color and a main color, along with other shades and complimentary colors. Here are the presets:

In order to switch between presets please select an option from the Presets drop down.

Theme Presets

3.2 Logos, colors, fonts and more

This section will let you upload your own logo and customize the aesthetics of the site.

Uploading your own logo

You can do so by clicking the 'Browse' button under the Logo and Icon settings. In order to show it on the storefront, don't forget to tick the 'Use custom logo' checkbox.

Logo Upload

Uploading a favicon

Favicon is the little icon shown in the browser tabs near tab titles. The steps are same to logo uploading. Click on the 'Browse' button that is just above the favicon.png link. And don't forget to tick the 'Use favicon' checkbox.

Colors & Fonts

Besides our 3 presets, you can generate more color combinations for your store. This is great for adjusting the color scheme of the site to match your brand guidelines.

As for the fonts, you can choose a 'Heading' font and a 'Body text' font. There are 26 fonts to play with.

Colors and Fonts Settings

3.3 Image circles options

You can customize the behavior of the product thumbs circles. You can find this section at the bottom of the Logo, Colors, Fonts and more.

Image circles settings

Image circle fill mode

Fill circle will resize the image so that the product image will fill all the circle. This works best for product images that have a solid background.

Fit circle will resize the image so that the product image will fit the circle at least in width or height. This works great for products with transparent backgrounds or same color backgrounds as the site's background.

Product scale effect on hover

This is the image zooming depth on mouseover. Depending on your product type and image quality you might want to set a higher zoom or lower one. Setting it to 0 will turn off the zooming effect. You are encouraged to experiment with these values to see what zoom scale fits best your products.

4. Setting up homepage

4.1 Setting up the homepage slider

Product Slider settings on Homepage

Homepage slider has few customizable options:

  • Slider title (tagline)
  • What collection to feature
  • Number of products to be shown (Product Layout)
  • Product slider height

Product Slider Height has 2 options:

Adaptable height - the slider will adapt its height based on the active slide. This option works best for products that have a variable image heights.

Fixed height - the slider will a fixed height, which means the highest product image from the featured ones. Works best for products that go more or less similar image heights, as this will avoid the jumping of the slider.

4.2 Setting up additional homepage content

Focus Theme comes with two ways of adding up additional content on your homepage.

Method one: Adding a features block

Adding a features block

It consists of a 3 column layout. Each column has the ability to hold an image, a title, a content block (be it plain text or lists), and an optional link to lead users to a more detailed section of the site if needed.

In order to make use of the features block, please fill out the Features section on your Focus' theme settings. And make sure 'Enable features block' is checked.

Setting up features block

Method two: Displaying the content of another page on homepage

All you have to do is choose which page to display the content from. The advantage of this approach is that you have the tools of the WYSIWYG editor to style your content, as well make use of images and videos.

Setting up a page as additional homepage content

4.3 Enable testimonials on homepage

Create a new blog that will be used for testimonials. Go to Blog Posts / Manage Blogs

Manage Blogs

Click on Add a Blog.

Add a blog

Than populate it with blog posts that follow these instructions:

  • Use the post title as the client's name
  • Use the post content area for the testimonial copy
  • Upload each client's profile image into the excerpt section of the blog post
  • Make sure to assign all testimonials posts to the designated testimonial blog
Create testimonial blog post

5. Product page customizations

Product zoom feature - enable it by checking the zoom checkbox.

Disable quantity box - this could be useful for products that are sold in singular quantities.

Enable related products - will pull randomly related products from same category. To enable it, please tick the 'Display related products' checkbox.

Product page settings

6. Collection page customizations

Enable the 'Sort by' tag filter by ticking its checkbox.

Increase/decrease the number of products to be shown per page

Product zooming - this setting controls the zoom depth of the image located in the product pop-up. It appears when you hover on products while on collection page. A higher digit will mean a more detailed zoom. Experiment with it to discover the one working best with your products.

Collection page settings

7. Footer theme settings

7.1 Setting up the newsletter signup

Focus Theme comes integrated with Mailchimp. All you have to do is plug in the Mailchimp form action URL. Wondering how to get your action url? Please read this article

Find the 'Footer section' in your Theme Settings. Once you'll know your action url, please fill it next to "Mailchimp form action URL", in the Footer section.

Newsletter setup

7.2 Setting up socials

Find the Footer section in your Theme Settings. Scroll down, and you'll see the social links settings starting with the enable checkbox that will show/hide your social links on the store's footer.

Next, fill in the URLs for socials you'd like to display on frontend. Click Save in the upper right corner.

Setting up social links

7.3 Additional footer settings

You got also control over the left side copy of the footer, as well the option to feature a search box on the right.

8. Setting up a dropdown menu

There is an official article about it. Please read it over here

Can't find your answer here? Write me at vlad [at] jantuanchik.com

Still Puzzled?