Canvas Minimal, Clean Shopify Theme (Section Ready)

Shopify Responsive Theme - Userguide

THANK YOU FOR PURCHASING OUR THEME!

Here are some basics on installing, configuring and customizing the Shopifytemplate,

BEFORE WE GO

The theme and the sample data is provided "as is". Customizing code and other design related issues can be done as freelance work on a $50-100 hourly rate only with Paypal and/or Skrill, if Canvas Store's available. If you are new to Shopify, please understand I cannot fix your site for free. Shopifytemplate would love to help everyone but there is no time. I suggest reading documentation available online regarding using Shopify, server requirements, etc.

If you like this theme please rate it.

Have a wonderful rest of your day!

Shopifytemplate Team

Overview

THEME INTRODUCTION

 
Responsive Shopify theme "Canvas Store" is an elegant eCommerce Shopify Canvas Minimal, Clean Shopify Theme (Section Ready) that charms your stores with the professional design, a sleek layout and functional features. The site makeover is well suited for Canvas Store about hats.
 
At the first glance, you may fall for the beautiful imagery display of "Canvas Store" which is catchy, smooth and mostly animated. "Canvas Store" supports responsive web design along with Off-canvas menu for mobile device accessibility."Canvas Store" also settings to get your store in multiple store views.

Getting Started

Getting Started

Getting up and running with Providence is quick and easy. Simply create a Shopify account, purchase the theme and upload it. You'll then have the opportunity to customize it to your liking before publishing it as your main theme.
If that sounds like a lot, don't worry… each step is outlined in detail below and it's entirely possible to go from scratch to a store running Providence in under ten minutes!
 

Creating a Shopify Account

If you already have a Shopify account then you can skip ahead to the next section. If you're considering setting up a store but haven't done so yet, read on.
Shopify is a hosted ecommerce solution that allows you to set up and run your own online store. Pick an ecommerce website template (preferably from us!), list your products, accept credit card orders, and ship your goods — all with a few clicks of the mouse. With Shopify it's easy to sell online and there's no software to download or maintain.
 
Interested in giving Shopify a try? Click the button below for a free 14 day trial.

Start a free, no-risk, 14 day Shopify trial. Create your store now

 

Purchasing Providence

You could buy theme at providers such as: ThemeForest , Shopify ...

 

Installing Providence

After you have followed the 'Purchasing Providence' steps above, you can download your theme and easily install your own theme for your online store based on our guideline below.

 

What you get

Once you have made the purchase you will find our product in your ThemeForest Downloads page. Click on Download and you will a dropdown will popup with following options:

 

Upload theme

 

Folder Structure

+ datasample
+ guides
+ psd
+ theme
+ licensing

Installation

I. Install theme

If you are new with Shopify. We advise reading and familiarizing yourself with the Shopify Manual.

1. To install the theme, log in to your Shopify store and go to the Themes. From there, click on Upload a Theme and upload the .zip file from the ‘upload’ folder included with this package.

Upload theme

Upload theme

2. In this step, you select button Publish theme what you have just upload.

Upload theme

Upload theme


II. Install Apps

1. Product Review
To enable product review, please install app: Product Review made by Shopify

Get App - Product Reviews


2. Ap Multilanguage New
Multi language shopify app has more functions, helping users translate into their preferred languages, as a result, shoppers are able to access products in your stores easily

Get App - Ap Multi Language


3. Instagram shop by Snapppt
Snapppt Instagram shop's core product, shoppable Instagram feeds, embeddable Instagram shops, sales conversion tracking and image performance analytics, is available free of charge.

Get App - Instagram shop by Snapppt


4. Sales Pop by Beeketing
Sales Pop is an influential selling tool which helps to boost your sales

Get App - Sales Pop by Beeketing


III. Edit Currency

- Goto: Admin -> Settings -> Gereral
- Scroll down to Standards & formats area, you'll see your Currency setting.

Upload theme

Upload theme

- You select Currency Formatting
- Change HTML with currency and HTML without currency elements in the dialog.

Upload theme

- HTML with currency

- HTML without currency

IV. Account

- Goto: Admin -> Settings -> Checkout
- You select Accounts are optional

Upload theme

Upload theme

IV. Import Data Product Sample

- Goto: Admin -> Products -> Import
- In popup window, you selected file product sample import.
https://help.shopify.com/manual/products

Upload theme

Theme Settings overview

Below you can see a screen shot of the Theme settings area within the Canvas Store Shopify Theme.  - Goto: Admin -> Store -> Theme -> Customize Theme -> General settings
The following values can be adjusted to customise the look and feel of your store.

Settings Color

- General Setting -> Color Theme

Upload theme

Typography

- General Setting -> Typography

Upload theme

Apollo Theme Configuration

- General Setting ->Theme Configuration
- Header Style: Float style(Float Header, Float Top Bar), Header style list(Header style one, ...)
- Custom witdh layout
- Image Size: System will get longest side of the image.
You can edit size image ex: 500x

- You can config ON or OFF panel tool

- You can config ON or OFF Smooth Scroll

- You can config ON or OFF Multiple Language

- You can config Favicon

- You can config New Products

- You can config Breadcrumb

- You can config ON or OFF Backtop

- You can config ON or OFF Pepper Contacts link config

Upload theme

Loading Site

- General Setting -> Loading site
- Prebuild 5 style loading for site.

Upload theme

Apollo Megamenu

Navigation on your Shopify website is controlled by menus and links. Each menu contains links which visitors can click or tap to explore your website.Before starting this section, we strongly recommend you to check the following guide to know how to control Shopify's navigation:

1.First step: You create main menu for your shop

- Default menu shopify
- Add a menu item
- Edit a menu item
- Change the display order of menu items
- Create a drop-down menu
- Remove a menu item
- Adding a menu to your online store

- Main menu

Upload theme

2.Dropdown menu:

a. Must identify what menu item has dropdown menu.

Upload theme

b. Create dropdown menu.
- From the Navigation in the Shopify Admin, create a new "link list". The title of this "link list" must match the name of menu item has dropdown menu (Item name of Main menu, We have identified above)
- Create Dropdown Menu. Admin -> Navigation -> "Add menu"

Upload theme

Create a new 'link list'.

Upload theme

Upload theme

3.Megamenu

- Go to: Shopify Admin -> Themes -> Customize Theme -> General settings ->Megamenu

Upload theme

- Must identify what menu item has megamenu

Upload theme

Upload theme

- In Customize Theme -> General settins ->Megamenu, scroll to Megamenu item. Select "Enable megamenu item" and input name menuitem of Mainmenu has Megamenu.
+ If megamenu fullwidth, you must select "Megamenu Fullwidth". If not, you must uncheck and input width of megamenu.
+ Each Megamenu has some elements as: Block links, Block Video, Block products, Block Html.

Upload theme

- To set up block links, you access to Shopyfy Admin -> Navigation to start


a. Block links

- You can config it. AtMegamenu scroll to "Block links"

+) Active: You can active block links by Select/Unselect "Megamenu blocklinks enable"

+) Columns of block links: Choose the width of "Block links" in a Megamenu. (Columns bootstrap)

+) Columns links of block links: Choose the width of "List Links" in a "Block links"

Upload theme

- To Create Block links. Goto: Admin -> Navigation -> Add new link list

Example: Create Two Link List for megamenu of Shop

1.) Shop for home

+) Name: Shop (Menu item has mega menu)

+) List Links: Collection

2.) Collection

+) Name: Colection (Name of parent link)

+) List Links: Colection full width, Colection sidebar left, Colection sidebar right,...

Upload theme


b. Block Video

- AtMegamenu scroll to "Block video"

+) Active: You can active block video by Select/Unselect "Megamenu video enable"

+) Columns of block video: Choose the width of "Block video" in a Megamenu. (Columns bootstrap)

+) Megamenu video content: Enter CODE video form Youtube, vimeo ... or you can use shortcode Youtube.

Upload theme



- Create megamenu2 the same megamenu1

Upload theme



c. Block Products

- AtMegamenu scroll to "Block products"

+) Active: You can active block product by Select/Unselect "Megamenu product enable"

+) Columns of block product: Choose the width of "Block product" in a Megamenu. (Columns bootstrap)

+) Megamenu product title: Enter title for Block product.

+) Megamenu product: Select one collections for Block product.

+) Megamenu product number: Number product display in a Block product.

Upload theme



d. Block HTML
- AtMegamenu scroll to "Block html"

+) Active: You can active block html by Select/Unselect "Megamenu html enable"

+) Columns of block html: Choose the width of "Block html" in a Megamenu. (Columns bootstrap)

+) Megamenu html title: Enter title for Block html.

+) Megamenu html image: Upload image for Block html.

+) Megamenu html description: Enter description for Block html.

Upload theme


- Create megamenu3 the same megamenu1

- scroll 3rd Megamenu scroll to menu block link & image block link
e. Image Block Link

Upload theme

Products Grid Item

- Goto Customize Theme -> General settings -> Products Grid Item
- You can config :

Upload theme

Cart Ajax

- Goto Customize Theme -> General settings -> Cart
- You can config :

Upload theme

Upload theme

Block Currrencies

Go to Themes > Customize Theme >  General settings >Block Currrencies section.

Upload theme

Apollo Product Count Down

- Goto Customize Theme -> General settings ->Product Count Down.

Upload theme

- Get Id Product: Goto admin edit product

Upload theme

- You can create Deal Pages. Goto: Admin shopify -> Pages -> Add a page (Add new pages)

Upload theme

Upload theme

Popup Newsletter

- Go to: Admin Shopify -> Themes -> Customize Theme -> General settings ->Popup Newsletter
- You can input Title, Description and Background image for Block
- You can config Social in Popup Newsletter.

+) Active: You can active Popup Newsletter by Select/Unselect "Use Popup Newsletter"

+) Styles template : Pre-made 4 Styles

+) Popup Time Cookie: Enter the number of minutes that the popup will open up when customer visit the site

+) Popup Newsletter Title: Enter title for Popup Newsletter.

+) Popup Newsletter Message: Enter description for Popup Newsletter.

+) MailChimp Form Action URL: Enter Url action from MailChimp

+) Popup Newletter Background: Upload background image for Popup Newsletter

+) Social In PopupNewLetter: You can use social: Facebook, Twitter, Rss, Youtube, Google Plus, Instagram, Pinterest

Upload theme

Upload theme

Fillter

- Goto: Admin -> Customize Theme -> General settings -> Scroll to block "Filter"

-Select the type of display Filer

a) type Top

- Goto: Admin -> Customize Theme -> General settings -> Scroll to block "Filter" -> Filter position -> "Top"

Upload theme

b) type Sidebar

1- Goto: Admin -> Customize Theme -> General settings -> Scroll to block "Filter" -> Filter position -> "In sidebar"

2- Goto: Admin -> Customize Theme -> General settings -> Scroll to block "Sidebar" -> Enable Sidebar Collection page

Upload theme

- Enable or Disable block Filter

1. Filter with tag

- Filter with tag in product

+ In config input "[Titlle]|[prefixtag]_"

Upload theme

-Steps 2: Import Tag in Product

-Admin -> Products -> Products -> choose a product to input tag

+ Enter the tag of the product follow Structure: "[prefixtag]_[tagname]"

* If you use multiple languages, add the en prefix

Upload theme

Upload theme


* If you want to show the same image, you can add "true" in config follow Structure: "[Titlle]|[prefixtag]_true"


Upload theme

+ Name image same [tagname]. The name of the image must be written in lowercase vd: green, blue, white...v.v.

+ After upload Image on folder asset

Example: Create filter Tag Color Product By following the steps below:

-Steps 1: upload image color in asset follwing capture below

Upload theme

Upload theme

Upload theme

-Steps 2: Import Tag in Product

-Admin -> Products -> Products -> choose a product to input tag

Upload theme

-Steps 3: Admin -> Customize Theme -> General settings -> Scroll to block "Filter" -> FILTER WITH TAG -> checkbox Enable

- input Filter tag 1 follow tructure "Color|color_|true".

Upload theme

(*) Themes installed app "ap multiple language" need to add "en" in front of the tag structure: "[code]_[prefixtag]_[tagname]" Inside where [code] will correspond to each language

- to know the code: Admin -> App -> Ap Multi-language

- We can see [code] same capture below

Upload theme

Same for all filter tag

SEO

- Goto: Admin -> Customize Theme -> General settings -> SEO

Upload theme

Checkout

You can custom checkout page with option : logo , background-color ...

Go to Themes > Customize Theme >  General settings > Checkout section.

Upload theme

1. Banner

- Goto: Admin -> Customize Theme -> Checkout -> Scroll to block "Banner"

+) Use a custom background: You can Enable/Disable Use a custom background.

+) Background image: Upload custom background if you use it.

+) Background color: Background color for checkout page.

Upload theme

2. Logo

- Goto: Admin -> Customize Theme -> Checkout -> Scroll to block "Logo"

+) Image: You can choose logo for checkout page. There are type: None, Custom, Storefront

+) Custom image: Upload custom logo if you choose Custom.

+) Tagline: Text under your logo.

Upload theme

2. Colors

- Goto: Admin -> Customize Theme -> Checkout -> Scroll to block "Colors"

+) Accents : You can change code color for /p>

+) Custom image: Upload custom logo if you choose Custom.

+) Call to action: Text under your logo.

Upload theme

Section settings review

- Go to: Admin -> customize -> Sections

- Add section or delete section

Upload theme

Slideshow

- Add slideshow: Admin -> customize -> Sections -> Add sections -> slideshow

- Go to config: Admin -> customize -> Sections -> Scroll to block "Slideshow"

  • Edit Layout
  • You can On or Off auto rotate slides
  • You can change time rotate
  • You can change height section slideshow
  • Change Animation
  • You can change font size text slideshow
  • You can change Button text
  • You can change type Navigator
  • You can change Arrow Style
  • Enable Arrow vertical center
  • Style Navigation
  • Enable dot Center
  • You can change Position Top
  • Change Background Overlay
  • Change Opacity Overlay

Upload theme

Upload theme

- to add slideshows, then click "Add content" -> click video or image

Collection Tabs

- Add Block Product: Admin -> customize -> Sections -> Add sections -> Collection Product Tabs

- Go to config: Admin -> customize -> Sections -> Collection Product Tabs

  • Edit Css Padding Margin
  • Edit Layout
  • Edit Background
  • Title
  • Edit Grid/ Slick Carousel
  • Enable Dot
  • Enable Arrows
  • Limit Products
  • Column products
  • Rows Slick Carousel
  • Slide to scroll
  • Column products for Screen Desktop small
  • Column products for Screen Table
  • Column products for Phone Table
  • Interval Carousel
  • Button & Link
  • add Tab
    • Tab Name
    • Select Collection

Upload theme

Upload theme

All product blocks are similarly configured

The Lookbook

- Add Service: Admin -> customize -> Sections -> Add sections -> "Image Lookbook"

Upload theme

- Go to config: Admin -> customize -> Sections -> Scroll to block "Image Lookbook"

Upload theme

Result

Upload theme

The Lookbook 2

- Add Service: Admin -> customize -> Sections -> Add sections -> "Image Lookbook 2"

Upload theme

- Go to config: Admin -> customize -> Sections -> Scroll to block "Image Lookbook 2"

Upload theme

Image Home Look

- Add Service: Admin -> customize -> Sections -> Add sections -> "Home Look"

Upload theme

- Go to config: Admin -> customize -> Sections -> Scroll to block "Home Look"

Upload theme

Instagram

- Add Instagram: Admin -> customize -> Sections -> Add sections -> "Instagram Photo"

Upload theme

- Go to: Admin -> customize -> Sections -> Scroll to block "Instagram Photo"

Upload theme

Result

Upload theme

Result style 2

Upload theme

Upload theme

Instagram Shop

- Add Instagram: Admin -> customize -> Sections -> Add sections -> "Shop Instagram "

Upload theme

- Go to: Admin -> customize -> Sections -> Scroll to block "Shop Instagram "

Upload theme

Result

Upload theme

Blog posts

-Add Blog posts: Admin -> customize -> Sections -> Add sections -> "Blog posts"

Upload theme

- Goto config: Admin -> Customize Theme -> Sections -> Scroll to block "Blog posts"

Upload theme

Result

Upload theme

Service

-Add Service: Admin -> customize -> Sections -> Add sections -> "Service"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Service"

- you can get svg https://www.flaticon.com/ or font fontawesome.io

Upload theme

Result

Upload theme

Image With Text Overlay

-Add Image With Text Overlay: Admin -> customize -> Sections -> Add sections -> "Image With Text Overlay"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Image With Text Overlay"

Upload theme

Result

Upload theme

Testimonial

-Add Testimonial: Admin -> customize -> Sections -> Add sections -> "Testimonial"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Testimonial"

Upload theme

Result

Upload theme

Collection Product Style 1

-Add Collection Product List: Admin -> customize -> Sections -> Add sections -> "Collection Product Style 1"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Collection Product Style 1"

Upload theme

Result

Upload theme

Collection Product Style 2

-Add Collection Product List: Admin -> customize -> Sections -> Add sections -> "Collection Product Style 2"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Collection Product Style 2"

Upload theme

- List Product Special

-Add Collection Product List: Admin -> customize -> Sections -> Add sections -> "- List Product Special"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "- List Product Special"

Upload theme

Collection 1

-Add Collection: Admin -> customize -> Sections -> Add sections -> "Collection"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Collection"

Upload theme

Result

Upload theme

Collection icon (only home 7)

-Add Collection: Admin -> customize -> Sections -> Add sections -> "Collection List Style 3"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Collection List Style 3"

Upload theme

Result

Upload theme

Image with text

-Add Image with text: Admin -> customize -> Sections -> Add sections -> "Image with text"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Image with text"

Upload theme

Result

Upload theme

Text columns with images

-Add Image with text: Admin -> customize -> Sections -> Add sections -> "Text columns with images"

Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Text columns with images"

Upload theme

New Letter & Social

-Add New Letter & Social: Admin -> customize -> Sections -> Add sections -> "Section Newletter"

p>Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "Section Newletter"

Upload theme

Result

Upload theme

Map location

-Add map: Admin -> customize -> Sections -> Add sections -> "map"

p>Upload theme

- Go to config:Admin -> customize -> Sections -> Scroll to block "map"

Upload theme

Result

Upload theme

Product Page

-> Goto Page product page

Upload theme

- Goto config: Admin -> Customize Theme -> Sections -> Enter one product -> click to block "Product pages" on Section

Upload theme

Upload theme

1.More info

+) show short descrioption: Goto Admin-> product -> input Description product same image below

Upload theme

Upload theme

+) show Description Tab (more info, Tab1, tab2, tab3, tab4)

Upload theme

+) to display contents of the part "more info", tab1, tab2, tab3, tab4, it is necessary to input contents of the product in the respective order of each tab in [tab] [/tab]

+) For example, when you want to display "Tab1", you must input contents of this part into [tab] [/tab] as the following image:

Upload theme

Upload theme

1.Video

+) to the video, add tags [video] [/ video]. ex: [video]http://www.youtube.com/watch?v=opj24KnzrWo[/video]

Upload theme

2.SERVICE PRODUCTS

- Goto config: Admin -> Customize Theme -> Sections -> Enter one product -> click to block "Product pages" on Section -> scroll to SERVICE PRODUCTS

+) You can edit icon and text service

Upload theme

Upload theme

3.PRODUCT RELATED

- Goto config: Admin -> Customize Theme -> Sections -> Enter one product -> click to block "Product pages" on Section -> scroll to PRODUCT RELATED
  • Show related products
  • Edit Css Margin Padding
  • Title
  • Enable Dot
  • Enable Arrows
  • Limited
  • Columns Products
  • Slider To Scroll
  • Row for Slick carousel
  • Interval
  • Number Item per Line ( small Laptop )
  • Number Item per Line (Table)
  • Number Item per Line (Phone Min )

Upload theme

4.RECENT VIEWED

- Goto config: Admin -> Customize Theme -> Sections -> Enter one product -> click to block "Product pages" on Section -> scroll to RECENT VIEWED
  • Show Recent Viewed
  • Title for Recent Viewed
  • Limit Products

Upload theme

5.Select SIDEBAR

You can view more layout detail product page -> Link Demo

Collection Page

- You can config Product per page, Product per row and upload collection image default.
-> Goto Page product page

Upload theme

- Goto config: Admin -> Customize Theme -> Sections -> Enter collection-> click to block "Collection pages" on Sections
  • Set Layout Section
  • Layout Sidebar
  • Product per row
  • Product per page
  • Select Pagination

Upload theme

Blog pages

-> Goto Page blog List

Upload theme

- Goto config: Admin -> Customize Theme -> Sections -> click to "Blog" -> Sections -> Blog pages
  • Sidebar Enable
  • 7 Pre-made Layout styles
  • Limit Number Blog items on Page
  • Show author
  • Show date

Upload theme

Edit Sidebar Blog
- Goto config: Admin -> Customize Theme -> GENERAL SETTING -> Scroll to -> "Sidebar Blog"

Upload theme

Upload theme

Creat page

1. Contact us

- Goto: Admin -> Pages -> Add a page

Upload theme

Upload theme

2. Wish list

- Goto: Admin -> Pages -> Add a page

Upload theme

3. About Us

- Goto: Admin -> Pages -> Add a page

Upload theme

- Goto page About config Section

Upload theme

Upload theme

* note: page about2, about3 them same about1

4. Page 404

- Goto config: Admin -> Customize Theme -> GENERAL SETTING -> scrollto -> 404 page

Upload theme

5. Page Faq

- Goto: Admin -> Pages -> Add a page

Code Shortcode FAQ : Code Faq shortcode

Upload theme

FAQ style 2 Select page.faq_v2

Upload theme

6. Instagram Shop

- Goto: Admin -> Pages -> Add a page

Guide add code instagram shop Link here

Upload theme

7. Lookbook Page

- Goto: Admin -> Pages -> Add a page

Upload theme

-> Goto Page Lookbook Section

Upload theme

- Goto config: Admin -> Customize Theme -> section -> "Image Social LookBook"

Upload theme

-> Result

Upload theme

8. Page Sidebar CMS

- Goto: Admin -> Pages -> Add a page -> template page.password

Upload theme

- Goto config Sidebar: Admin -> Customize Theme -> GENERAL SETTING -> scrollto -> Sidebar CMS

Upload theme

9. Password Page

- Goto: Admin -> Pages -> Add a page
- Goto config Sidebar: Admin -> Customize Theme -> GENERAL SETTING -> scrollto -> Page Password

Upload theme

Example Page html prebuild:

Home Page 1

Upload theme

Home Page 2

Upload theme

Home Page 3

Upload theme

Home Page 4

Upload theme

Home Page 5

Upload theme

Home Page 6

Upload theme

Home Page 7

Upload theme

Home Page 8

Upload theme

Home Page 9

Upload theme

Home Page 10

Upload theme

Home Page 11

Upload theme

Home Page 12

Upload theme

Home Page 13

Upload theme

Home Page 14

Upload theme

Home Page 15

Upload theme

Home Page 16

Upload theme

Home Page 17

Upload theme

Home Page 18

Upload theme