Get Started
Thank you for your attention our theme. This is some basics on installing, configuring and customizing the theme.
You need a Shopify store. If you don't have a Shopify store, you can go to Shopify and create your store. We also recommend that you should read the Shopify Manual. It is an extremely well written and thorough guide to understanding the Shopify platform, written by Shopify themselves. It will help with understanding many aspects of the customization of your theme as well as using Shopify in general.
Please read Shopify manual before you start:
Install Theme
To install the theme, please log in to your Shopify store admin.
- Go to Online Store > Theme
- Click on Upload Theme button
- When you finish uploading the theme, please click on Actions to show menu
- Click on Publish to publish the theme
After Publish theme, Please enter the License Key which sent to you when purchase our theme via email to activate the theme. To do so, follow the below steps:
- Go to Themes > Customize > Theme settings
- From the list of menu items displayed, scroll down to License Key menu item
- Enter your License Key and click Save
Warring: If you put a duplicated license key number, the theme won't be activated
Theme Configuration
- Go to Online Store > Settings > Checkout
- Select Accounts are optional
- Go to Online Store > Settings > General
- Scroll down to Store currency section and click on Change formatting link
- Update these fields
- HTML With currency to: - HTML without currency to:
Require Apps
The list of apps must be set to use the theme
Setup Page
From your shop admin, go to the Online Store > Pages
- Go to the Online Store > Pages
- Find and click on Add page button
- Add page details and select Page Template
Click Save when you are done.
Templates Overview
| Page Template Name | Template Description |
|---|---|
| page | Default page with boxed container |
| page.about | Template with About Us page |
| page.contact | Template with Contact page |
| page.lookbook | Template with Lookbook page |
| page.loobook-show | Template with Lookbook Show page |
- Create a new page
- Write in the Title field page name > Select Visibility: Visible > Select Template: page.page
- In the Content field click on Show Html button.
![Custom Us]()
- Paste your code in the Content field in page editor
- Click Save
- Create a new page
- Write in the Title field page name > Select Visibility: Visible > Select Template: page.about
- Click Save
- Go to Customize Theme. Select page with shopify navigation. Edit page with section settings
- Create a new page
- Write in the Title field page name > Select Visibility: Visible > Select Template: page.contact
- Click Save
- Go to Customize Theme. Select page with shopify navigation. Edit page with section settings
- Create a new page
- Write in the Title field page name > Select Visibility: Visible > Select Template: page.lookbook
- Click Save
- Go to Customize Theme. Select page with shopify navigation. Edit page with section settings
Theme Settings
In order to get started on configuring the theme, please go to "Themes" > "Customize" > Click on "Theme settings" tab.
Go to Theme Settings > Color section.
You can set color for text and link, color heder tranparent, footer as well as theme background color here. Please click on the item name to change its color.
| Parameter | Value |
|---|---|
| Color Primary | Select text color for body, paragraph |
| Color Secondary | Select text color for button, text link |
| Color Active | Select text color when hover button, text link |
| Background Body | Select Background Color for Body |
| Background Footer | Select Background Color for Footer |
Go to Theme Settings > Header section.
Preview:
Settings:
| Parameter | Value |
|---|---|
| Top Message | Enter Top Message text |
| Logo type | Select Logo type (None, Custom or SVG) |
| Custom logo | Select custom image logo |
| SVG Logo Code | Enter SVG Logo Code in here |
| Display Fix Top Menu? | Tick on the option to use Fixed Top Menu |
| Use custom icon | Tick on the option to use Favicon |
Go to Theme Settings > Footer section.
Preview
Settings
Go to Theme Settings > Popup Newsletter section.
Go to Theme Settings > Collection Page section.
Settings:
| Parameter | Value |
|---|---|
| Filter Ajax | Select Filter Tag use ajax (Yes/No) |
| Show label | Tick on the option to show label (New, Sold Out, Sale Off) |
| Show image carousel | Tick on the option to show list image per product item |
| Products per row | Set number of product per row |
| Items align | Set align of title, price, and review on the list |
Filter Sidebar
| Parameter | Value |
|---|---|
| Show Filter By Category | Tick on the option to Show Filter By Category |
| Filter By List | Tick on the option to show label (New, Sold Out, Sale Off) |
| List categories for all products | Enter collection value list (collection handle) |
Filter Tag
By default, you can filter products with 2 filter types: By Color and By Size.
Filter made with tags, so all value from filter must exist from the product. Let me give you an example to explain how to set up to make this filter sidebar work.
We have filter by size with values: XXL, XL, L, M, S, and X.You need to enter these tags from the product page. The steps is as below:
- Add the list of tags to "List Sizes" field. Please take note that each tag is separated by one comma, then click Save
- Add tags to the product that you want to filter, then click "Save".
For Filter by Color, you just need to do similar as Filter by Size.
| Parameter | Value |
|---|---|
| Show List Colors | Tick on the option to Show Filter By Colors |
| List Colors | Enter list Colors |
| Show List Sizes | Tick on the option to Show Filter By Sizes |
| List Sizes | Enter list Sizes |
Go to Theme Settings > Product Page section.
Go to Theme Settings > Blog Page section.
Blog Sidebar
Go to Theme Settings > Lookbook Page section.
Go to Theme Settings > About Us Page section.
Go to Theme Settings > Contact Page section.
Go to Theme Settings > Cart Page section.
Preview:
Settings:
Go to Theme Settings > Money options section.
| Parameter | Value |
|---|---|
| Enable currency conversion | Select to show the currencies on store |
| Format | There are 2 options: Without Currency, Ex: $10 and With Currency, $10 CAD |
| Currency Flags | There are 3 options: No, SVG, Custom Image |
| Currency 1, Currency 2, Currency 3, Currency 4 | Enter Currency value |
Go to Theme Settings > Payment icons section.
Tick on the option to show the socials network as you like.
Section
Homepage Configuration, Drag & Drop Sections.
Preview:
Settings:
| Parameter | Value |
|---|---|
| Layout | Select layout to show banner. |
| Slider Height | Set height for slideshow |
| Add Slide | You can click Add Image to add a new slide |
Block Slide Settings
| Parameter | Value |
|---|---|
| Image | Select image from libraries |
| Image on Mobile | Select image from libraries (the image will show on mobile) |
| Image effect | Select Image effect |
| Parameter | Value |
|---|---|
| Style | Select Style for Text |
| Text align | Select Text align |
| Title | Tick on the option to show title |
| Title Text | Enter title text |
| Color | Select color for title |
| Title effect | Select show effect for title |
| Button | Tick on the option to show button |
| Button Text | Enter button text |
| Link URL | Enter link for button |
| Button effect | Select show effect for button |
Preview:
Settings:
| Parameter | Value |
|---|---|
| Show images | Tick on the option to show image |
Block Text Settings
| Parameter | Value |
|---|---|
| Images type | Select Images type (Custom image or SVG) |
| Custom Image | Select image for Custom Image |
| SVG Code | Enter SVG Code if you select Image type is SVG |
| Title | Enter title for this block |
| Content | Enter content for this block |
Previews:
Settings:
| Parameter | Value |
|---|---|
| Collection | Select collection for this block |
| Set Collection Image | Set Collection Image is image default |
| Custom Image | Select Custom Image |
| Custom Name | Enter Custom Name if you do not show name Collection |
| Show Buttons | Tick on the option to show button |
| Button Name | Enter name for button |
Preview:
Settings:
| Parameter | Value |
|---|---|
| Title | Enter title for Collection list |
| Title align | Set align for Title |
| Collection | Select collection will show on collection list |
| Products per row | Set number of products per row for grid design |
| Row | Set number Row |
| Show 'View all' button | Tick on the option to show View All button |
Preview:
Settings:
| Parameter | Value |
|---|---|
| Title | Enter title for Blog Posts |
| Title align | Set align for Title |
| Blog | Choose the posts to show |
| Post In Row | Set number of posts per row for grid design |
| The Options | Tick on the option to show these sections: Date, 'View All' button |
Previews:
Settings:
| Parameter | Value |
|---|---|
| Title | Enter title for Instagram |
| Description | Enter description for Instagram |
| Link your Instagram | Enter link for description |
| Title align | Set align for Title and Description |
| Tag name | Enter user name for instagram |
| User ID | Enter User ID for instagram |
| Access Tokens | Enter Access Tokens for instagram |
Credits
- PhotoSwipe
- Google Maps
- Slick Carousel
- jQuery Library
Support
If you have any questions, please do not hesitate to use our support - Contact Us
Check for details - https://www.fivebone.com
We are happy to help!
Go to Theme Settings > Social Media section
Enter your media URL on the icon which you want to display
Share
Tick on the option to show the socials network as you like