1.STOREPIFY INTRODUCTION

Thank you very much for choosing Storepify theme. We truly appreciate and really hope that you’ll enjoy our theme! Below you will find the How to use the Storepify theme documentation.

If you have any questions that are beyond the scope of this help file, please feel free to submit a ticket at https://thimpress.com/forums/

2.THEME INSTALLATION

  • After purchasing Storepify theme on themeforest.net with your Envato account, download theme package from your Download page and select Download -> All file & documentation.

  • Extract/Unzip all files from the downloaded package.

You will see storepify.zip for Main Theme and demos. And 2 Child Themes in the folder child-theme that we have provided 2 Child Themes: organic-storepify.zip, camping-storepify.zip. You need to install one of these zip files.

So you have 10 Themes to choose to install:

    • storepify.zip
    • storepify clogs.zip
    • storepify craft.zip
    • storepify electro.zip
    • storepify gift.zip
    • storepify jewelry.zip
    • storepify pet.zip
    • storepify socks.zip
    • storepify-camping.zip (in child theme folder)
    • storepify-organic.zip (in child theme folder)
  •  Logging into your Shopify store and Navigate to Themes :  Store Admin -> Online Store -> Themes.

 

  • Click Add theme -> Upload zip file -> Add file -> Upload file.

Choose one of theme files above.

  • Click on Action -> Publish.

2.1.Choose a specific Demo

STOREPIFY provides many Demos with various fields that you can choose for your Store.

Demos in the Main Theme:

  • Home Default – Template File: index.json
  • Home Fashion – Template File: page.home-fashion.json
  • Home Fashion 2 – Template File: page.home-fashion-2.json
  • Home Fashion 3 – Template File: page.home-fashion-3.json
  • Home Fashion 4 – Template File: page.home-fashion-4.json
  • Home Fashion 5 – Template File: page.home-fashion-5.json
  • Home Fashion 6 – Template File: page.home-fashion-6.json
  • Home Fashion 7 – Template File: page.home-fashion-7.json
  • Home Fashion 8 – Template File: page.home-fashion-8.json
  • Home Fashion 9 – Template File: page.home-fashion-9.json
  • Home Bags – Template File: page.home-bags.json
  • Home Shoes – Template File: page.home-shoes.json
  • Home Hats – Template File: page.home-hats.json
  • Home Accessories – Template File: page.home-accessories.json
  • Home Accessories 2 – Template File: page.home-accessories-2.json
  • Home Cosmetic – Template File: page.home-cosmetic.json
  • Home Cosmetic 2 – Template File: page.home-cosmetic-2.json
  • Home Cosmetic 3 – Template File: page.home-cosmetic-3.json
  • Home Lookbook – Template File: page.home-lookbook.json
  • Home Single Product – Template File: page.single-product.json
  • Home Single Product 2 – Template File: page.single-product-2.json
  • Home Electro V2 – Template File: page.home-electro-2.json
  • Home Electro V3 – Template File: page.home-electro-3.json
  • Home Lookbook – Template File: page.home-lookbook.json
  • Home Lookbook V2 – Template File: page.home-lookbook-2.json

Child Theme:

  • Home Organic
  • Home Camping

Follow the next section to choose each Demo for your Store.

2.2.Demo from Main Theme

Make sure that you have published STOREPIFY Theme to your Store.

1. Edit Code

Click Edit Code button to go to Code File Manager.

2. Copy Code Content from Demo File

Find the file of the Demo that you want to use. Click on to file name or the pen icon you will see code content on the right side. Select all that code content (by Ctrl + A) and copy.

3. Paste Code to file index.json

Paste code content that you just copy to index.json and Save.

For your reference: index.json is code content for HomePage. With the above action copy – paste and save the index.json file you have used  “Home Fashion 4 (with template file: page.home-fashion-4.json)” for the HomePage of your Store.

4. Save file index.json

Save index.json file with new code content from page.home-fashion-4.json file then the process has finished.

2.3.Install and choose Demo from List Demos

1. Search “MaxSale” App from Shopify Store

In the search bar type: maxsale and click to search for MaxSale App from Shopify App Store.

2. Add MaxSale App to Store

3. Install MaxSale App to Store

After adding MaxSale App to the Store you have to Install MaxSale to Store for start using it.

4. Install a STOREPIFY Demo

After install successful, you can use the Install demo module to install a Demo from List Demos that STOREPIFY provided.

5. Input Purchase Code

Input the Purchase Code you received after you bought STOREPIFY Theme from ThemeForest.net to continue.

Get Purchase Code from Themforest.net.

6. Publish STOREPIFY Child Theme

Return to Store after installing STOREPIFY Child Theme. Click Publish button to officially apply this child theme to your Store.

Return to the Store’s Homepage to see how it looks like and start setup your Store.

2.4.Theme update

1. Go to Download tab from the ThemeForest account to download the Storepify theme’s latest version.

2. Go to Themes -> Add theme -> Upload zip file

3. Add the downloaded file

4. To move the configuration (custom code), follow these steps:

  • In  Current theme section, click on Actions -> Edit code.

  • Open settings_data.json & copy all code lines.

  • Now click Edit code of update version then open settings_data.json -> Delete all code lines -> Paste the code which you copied above -> Save.

5. To move the Translation, follow the steps below:
  • In Edit code page, please find Locales, choose the language you want to use (for example: English)
  • Copy all data and paste them into your new file.
    6. Finally, Publish the new version of the theme.

3.MEGA MENU

3.1.Create Menu

1. Go to Navigation to create a menu.
2. Click Add menu to add new or choose any items below the menu to edit.
3. Write the menu’s name, then choose Add menu item.
4. Write the menu item’s name and choose the item in dropdown box -> click Add.
5. To make an item to a child menu, drag it under the main item.
Menu items can also be added to create the same level of a child menu.

3.2.Add mega menu to the homepage

1. Go to Themes > Customize.

2. Choose Header section -> Main Menu -> Change -> Change menu and Choose the created menu.

 

4.COLLECTIONS & PRODUCTS

4.1.Single Product page

  • In the theme editor (Customize), open the template selector
  • Select Products, then Default product.

4.1.1.Product Template
By default, merchants can customize the Default product template.
1. In the theme editor (Customize), use the page selector to open Products > Choose or Create template.

Product detail

2. Add Name in the provided field for the new template.
4.1.2.Page Sections
4.1.2.1.Breadcrumbs
Provide the page’s position in the site hierarchy, and it may help users understand and explore a site effectively.
  1. In the theme editor (Customize), open the template selector.
  2. Select Products, then Default product.
  3. On the left-side bar, select Product Infomation.
  4.  Add Breadcrumb.
  5. Make necessary changes > Save.

Merchants can select background image, position, background color and show collections of product.
4.1.2.2.Product Information
Provide crucial data that belongs to an individual product such as price, title, buy button,…. Merchants can change the product information by re-ordering, removing, adding and arranging blocks.

To edit or add Product information, you go to Customize -> open the template selector -> Select Products -> Default product.Then on the left-sidebar, edit/add Product information -> Save.

General

  • Select image type.

Product information blocks

The product information blocks: title, price, description and quantity selector will be retrieved from the backend to display in this section. Merchants can change these blocks’ positions.

Fake viewer

Set the number of fake viewers, product sold and time to change.

 

Variant Picker

Select type for variant.

Free Shipping & Returns

Add shipping text.

Estimated Delivery

  • Enable/disable delivery estimation and shipping text. Add preferable info regarding the delivery, shipping text, and the number of days that the package will arrive.
  • A badge or seal that merchants put on the websites which meant to instill trust in their potential customers.
  • Add text and select image for the trust badges.

Custom liquid

Add app snippets or other Liquid code to create advanced customizations.

4.1.2.3.Main Product Information
This section provides extra info such as product description.
  1. In the theme editor (Customize), open the template selector.
  2. Select Products, then Default product.
  3. On the left-sidebar, add Main product information.
  4. Make necessary changes > Save.
Merchant can select type.
4.1.2.4.Product Recommendations
This section suggests similar products for the product which is being viewed, based on the contents of product details.
  1. In the theme editor (Customize), open the template selector.
  2. Select Products, then Default product.
  3. On the left-side bar, add Product recommendations.
  4. Make necessary changes > Save.

Merchants adjust the elements based on their needs to display the recommendation section such as heading, heading size, the number of products to show, color scheme, image ratio, show second image on hover, vendor and product rating.

  • Select mobile layout.
  • Set top padding & bottom padding.
  • Set margin bottom.

 

4.1.2.5.Recently Product
This section will show recently products.
  1. In the theme editor (Customize), open the template selector.
  2. Select Products, then Default product.
  3. On the left-side bar, show/hide Recently product.

4.2.Collection Page

  1. In the theme editor (Customize), open the template selector.
  2. Select Collections, then Default collection.

 

4.2.1.Collection Template
By default, merchants can customize using the Default collection template. Merchants can add a new template directly to the admin page rather than the default.
1. In the theme editor (Customize), use the page selector to open Collections > Create template.
2. Add Name in the provided field for the new template.
3. Choose the suitable value in the Based on dropdown, then select Create template.
4.2.2.Collection Sections
  1. In the theme editor (Customize), open the template selector.
  2. Select Collections, then Default collection.
  3. On the left-sidebar, add Product Grid.
  4. Make necessary changes > Save.
  • Select collections for the sidebar and set the number of products per page.

  • Show vendor, second image on hover, product rating , quick add button on product.

  • Enable filter & sorting.
  • Select type for filter and filter price.
  • Set price ranges: separate price ranges with commas.

  • Select type for pagination, load more button, sale badge.
  • Set top padding and bottom padding.

 

5.PAGE’S GLOBAL SECTIONS

5.1.Announcement bar

Flexible announcement message bar with targeting options.

It helps merchants display their important sale dates or shipping information on top of the header.

  1. In the theme editor (Customize)
  2. On the left-side bar, select Announcement bar.
  3. Add Style block.
  4. Make necessary changes > Save.
  • Merchants can select background color, text color and type.

  • Add text for content.
  • Show language selector & currency selector.

 

 

5.2.Header

  1. In the theme editor (Customize).
  2. On the left-side bar, select Header.
  3. Make necessary changes > Save.
  • Select color background, logo image, logo position, type, menu.
  • Show/hide separator line, sticky header.

  • Show/hide label hot.
  • Label hot: merchant can edit “Hot” text.
  • Label hot items: merchant can add 1 or more menu items to show label hot and separate them with a comma or enter to a new line.

Mega menu block

  • For item: add the number of menu item that you want to show mega menu.
  • Select menu, product, banner image.
  • Add text for list product title.

  • Show/hide label hot & label new.
  • Label hot: merchant can edit “Hot” text & “New” text.
  • Label hot items: merchant can add 1 or more menu items to show label and separate them with a comma or enter to a new line.

 

6.THEME SECTIONS

We provide a lot of demos.

To change to other demos, Merchants can add/remove sections or follow these steps:

  1. Logging into your Shopify store and Navigate to Themes :  Store Admin -> Online Store -> Theme -> Current theme.
  2. Click “Action” -> Edit code.

3. Search page.home -> Choose the demo (.json) -> Copy all code lines.

4. Open index.json-> Delete all code line -> Paste the code which you copied above -> Save.

6.1.Slide

  1. In the theme editor (Customize).
  2. Locate Slider Medical.
  3. Make necessary changes > Save.

 

6.1.1.Slide Settings
  • Show/hide navigation, and pagination.
  • Enable/disable loop images and auto play slider.
  • Select position for pagination.
  • Select pagination color & navigation type.

  • Set margin bottom for slider on desktop, tablet and mobile.
6.1.2.Slide Block
  • Merchant can add more slider blocks and arrange them.
  • Select image and mobile image.
  • Select position for content.
  • Add text for title, subtitle and descriptions.
  • Add link for slide url

Config Block

  • Set font size for subtitle, title & description.
  • Select color for subtitle, title, description, button.
  • Select button type.

NOTE:

  • In Electro child theme, Config Button section will be in Slide section settings.
  • In Jewelry child theme will not have Config Button section.

6.2.Breadcrumbs

  1. In the theme editor (Customize).
  2. Locate Breadcrumb.
  3. Make necessary changes > Save.
  • Select background image, position and background color.
  • Set margin bottom on desktop, tablet and mobile.

6.3.Service

  1. In the theme editor (Customize)
  2. Locate Service.
  3. Make necessary changes > Save.
6.3.1.Service Settings
  • Set item gap.
  • Select color for background.
  • Show/ hide border right.
  • Set margin bottom for desktop, tablet & mobile.

6.3.2.Service Block
  • Merchant can add more slider blocks and arrange them.
  • Select image and color for background, title and service brief
  • Add text for title, and description.
  • Add link.

 

 

6.4.Feature Collection

  1. In the theme editor (Customize)
  2. Locate Featured collection.
  3. Make necessary changes > Save.

1. General

  • Select type, collections.
  • Add text for heading & description.
  • Set the number of products and columns to show.

2. Product card & Margin bottom.

  • Show/hide second image on hover.
  • Select button type.
  • Add text for button.
  • Set margin bottom on desktop, tablet and mobile.
  • Show/hide countdown & sale badge.

 

6.5.List Collection

  1. In the theme editor (Customize)
  2. Locate List Collections
  3. Make necessary changes > Save.
  • Select type and collection.
  • Add text for heading.

6.7.Banner

  1. In the theme editor (Customize).
  2. Locate Banner.
  3. Make necessary changes > Save.
6.7.1.Banner Settings
  • Set margin bottom on desktop, tablet & mobile.

6.7.2.Banner block
  • Merchant can add more slider blocks and arrange them.

 1. Banner Menu Block

  • Select image, menu and position.
  • Add text for title & button.

 

2. Banner Normal Block

  • Select image.
  • Add text for title, description & button.

6.8.Banner image card

  1. In the theme editor (Customize).
  2. Locate Banner Image Card.
  3. Make necessary changes > Save.
6.8.1.Banner image card settings
  • Select width type, layout.

  • Set margin top and margin bottom on desktop, tablet & mobile.

6.8.2.Banner block
  • Merchant can add more banner blocks and arrange them.
  • Select content position, alignment, image, color title & color background title.

  • Select hover type, button label.
  • Set font size button.
  • Select color for text button, background button, text button hover & background button hover.

  • Grid layout 1: You should use 1 block and image size: 1920 x 640 px – Or use 2 blocks with image size: 960 x 199 px.
  • Grid layout 2: You should use 2 blocks and image size: 630 x 370 px. – Or use 3 blocks with image size: 820 x 820 px.
  • Grid layout 3: You should use 5 blocks. You should use images that have sizes: The first, third, forth, fifth: 640 x 320px – The second: 640 x 640 px.
  • Grid layout 4: You should use 4 blocks. You should use images that have sizes: The first: 960 x 640 px – The second: 450 x 306 px – The third: 450 x 305 px – The forth: 930 x 307 px.
  • Grid layout 5: You should use 4 blocks. You should use images that have sizes: The first: 630 x 630 px – The second: 300 x 630 px – The third and the forth: 300 x 300 px.
  • Grid layout 6: You should use 5 blocks. You should use images that have sizes: The first: 300 x 300 px – The second: 630 x 630 px – The third: 300 x 300 px – The forth: 300 x 300 px – The fifth: 300 x 300 px.
  • Grid layout 7: You should use 4 blocks. You should use images that have sizes: The first: 630 x 450 px – The second: 630 x 320 px – The third: 630 x 320 px – The forth: 630 x 450 px.

6.9.Banner Lookbook

  1. In the theme editor (Customize).
  2. Locate Banner Lookbook.
  3. Make necessary changes > Save.
6.9.1.Banner Lookbook Settings
  • Select background image and width layout.
  • Set margin bottom on desktop, tablet and mobile.

6.9.2.Banner Lookbook Block
  • Merchants can add more blocks and arrange them.
  • Select pin color, product and position.
  • Set top and left position.

6.10.Testimonials

  1. In the theme editor (Customize).
  2. Locate Our Testimonials.
  3. Make necessary changes > Save.
6.10.1.Testimonials Settings
  • Ađ text for the title.
  • Select background color, type.
  • Set padding top & botttom.
  • Show/hide pagination.
  • Set margin bottom on desktop, tablet & mobile.

6.10.2.Testimonials block
  • Merchant can add more testimonials blocks and arrange them.
  • Select image and background color.
  • Add text for title, description & name.

6.11.Portfolio Grid

  1. In the theme editor (Customize).
  2. Locate Portfolio grid.
  3. Make necessary changes > Save.
6.11.1.Portfolio Grid Settings
  • Select width and style.
  • Set margin bottom on desktop, tablet and mobile.

6.11.2.Portfolio Grid Blcok
  • Merchant can add more slider blocks and arrange them.
  • Select image/
  • Add text for title, URL, filter tag.

6.12.Partner

  1. In the theme editor (Customize).
  2. Locate Partner.
  3. Make necessary changes > Save.
6.12.1.Partner Settings
  • Select type for partner.
  • Set margin bottom on desktop, tablet & mobile.

6.12.2.Partner Block
  • Merchant can add more blocks and arrange them.
  • Add text for heading & select image.

6.13.Title section

  1. In the theme editor (Customize).
  2. Locate Title Section.
  3. Make necessary changes > Save.

1. Content

  • Add text for title & sub title.
  • Show/hide icon.

2. Config Settings

  • Select type & position for title.

3. Font Size & Color.

  • Set font size for title & sub title.
  • Select color for title & sub title.

4. Margin bottom

  • Set margin bottom on desktop, tablet & mobile.

6.14.Latest News

  1. In the theme editor (Customize).
  2. Locate Latest News.
  3. Make necessary changes > Save.
  • Select blog, width & position.
  • Set number of posts to show & item gap.
  • Show/hide date.
  • Set margin bottom on desktop, tablet & mobile.

6.15.Instagram

  1. In the theme editor (Customize).
  2. Locate Instagram.
  3. Make necessary changes > Save.

Always update your Instagram token in Theme settings > Integration

Generate your Instagram token

To get an Instagram Access Token, you will need:
  • A Facebook account
  • An Instagram account
Steps:
  1. Register application on Facebook for Developers
  2. Register new app
  3. Configure Instagram Basic Display
  4. Get Access Token

Section Settings

  • Add text for title, sub title.
  • Add profile URL.
  • Set margin bottom on desktop, tablet & mobile.

6.16.Email signup

  1. In the theme editor (Customize).
  2. Locate Email Signup.
  3. Make necessary changes > Save.
6.16.1.Email signup Settings
  • Select color for background, title & color.
  • Show/hide social media icons.
  • Set padding-top & padding-bottom.
  • Set margin bottom.

6.16.2.Email signup block
  • Merchant can add blocks and arrange them.

Subheading

  • Add text for description.

6.17.Border

  • Select type, width and color.
  • Set height.
  • Set margin bottom on desktop, tablet, mobile.

6.18.General Title Page

  • Add text for heading, sub heading.
  • Select alignment.
  • Set margin bottom on desktop, tablet, and mobile.

6.19.Demo Page

  1. In the theme editor (Customize).
  2. Locate Demo Page.
  3. Make necessary changes > Save.
6.19.1.Demo Page Settings
  • Show/hide title.
  • Set font size for title.
  • Add text for title and sub title.
  • Set margin bottom on desktop, tablet and mobile.

6.19.2.Demo Page Block
  • Merchants can add more blocks and arrange them.
  • Select Image, topic, status and background color.
  • Add link and text for title.

6.20.About

  1. In the theme editor (Customize).
  2. Locate About.
  3. Make necessary changes > Save.

1. Title block

  • Add text for title and sub title.

2. Description block

  • Add text for description.

3. Featured block

  • Select hover type and image.
  • Add text for title and description.

4. Our mission block

  • Select type and image.
  • Add text for title, subtitle, description, intro and name.

5. Image block

  • Select type and images.
  • Add text for description.

6.21.Custom Liqud

  1. In the theme editor (Customize).
  2. Locate Custom Liquid.
  3. Make necessary changes > Save.
  • Add app snippets or other Liquid code to create advanced customizations.
  • Select background.
  • Set top padding and bottom padding.

6.22.Header Onepage

  1. In the theme editor (Customize).
  2. Locate Header Onepage.
  3. Make necessary changes > Save.
6.22.1.Header Onepage Settings
  • Select logo image and container.

6.22.2.Header Onepage Block
  • Merchants can add more blocks and arrange them.
  • Add text for title.
  • Select type.

6.23.Electro demo

6.24.Organic demo

6.24.1.Banner Slide

  1. In the theme editor (Customize).
  2. Locate Banner Slide.
  3. Make necessary changes > Save.

NOTE: This section only has in Organic demo.

6.24.1.1.Banner Slide Settings
  • Select width layout
  • Set margin bottom on desktop, tablet & mobile.
  • Select pagination color.

6.24.1.2.Banner Slide Block
  • Select background image.
  • Add text for title, percent number, sale text and sub title.
  • Set time to countdown (day, month, year).

  • Select color for text countdown, background countdown and button.
  • Select button type and add url.

6.25.Jewelry Demo

6.25.1.Banner Block

  • Merchant can add more slider blocks and arrange them.

 1. Banner Menu Block

  • Select image, menu and position.
  • Add text for title & button.

 

2. Banner Normal Block

  • Select image.
  • Add text for title, description & button.

3. Banner full block.

NOTE:  This block only has in Jewelry child theme.

  • Select image.
  • Add text for sale off, title, subtitle, description, button text.
  • Add link for button.

7.THEME SETTINGS

7.1.General

  • Enable/disable right to left theme.

7.2.Fonts

  • Select font for body.

7.3.Favicon

The favicon is a small square image that represents a website in web browsers at the address bar of browser.
  1. In the theme editor (Customize), click Theme settings.
  2. Locate Favicon.
  3. In the Favicon image area, click Select image, and then merchants can select or upload an image.

7.4.Currency Format

  1. In the theme editor (Customize), click Theme settings.
  2. Locate Currency format.
  3. Make necessary changes.
  4. Save.

Merchants can show or hide currency codes.

7.5.Social Media

  1. In the theme editor (Customize), click Theme settings.
  2. Locate Social media.
  3. Make necessary changes.
  4. Save.

Merchants can add social account URLs.

7.6.Color

  • Select color for primary color, header, product item and button.

7.7.Collection Page

  • Select the number of columns of product for collection page.

7.8.Product Items

  • Show/hide wishlist, quickview, compare and add to cart button.

7.9.Integration

  1. In the theme editor (Customize), click Theme settings.
  2. Locate Integration.
  3. Make necessary changes > Save.
  • Merchant can add Instagram token.

Generate your Instagram token

To get an Instagram Access Token, you will need:
  • A Facebook account.
  • An Instagram account.
Steps:
  1. Register application on Facebook for Developers.
  2. Register new app.
  3. Configure Instagram Basic Display.
  4. Get Access Token.

7.10.Checkout

This is where the customer completes payment and provides the information for delivery and contact details that are needed for invoicing.
  1. In the theme editor (Customize), click Theme settings.
  2. Locate Checkout.
  3. Make necessary changes.
  4. Save.

1. Banner & Logo

  • Merchants can add their background banner or logo. If not, they can leave it blank. 
  • The recommended format for background image is png, size 1000 x 400 px.
  • Select position and logo size.

2. Main content area

It shows on the site’s left-hand side which has contact info and shipping address. For this area, merchants can also add background image or leave it blank and use background color only.
The provided field to add text can be set as white or transparent.

3. Order summary area

Appear on the right-hand side of the site. The same as main content area, background image and color can be added to match merchants’ expectation.

 

4. Typography & Color

  • Select font for heading & body.
  • Select color for accents, buttons & errors.

7.11.Theme Style

  1. In the theme editor (Customize), click Theme settings.
  2. Locate Theme style.
  3. Make necessary changes.
  4. Save.

Merchants can select theme style.

8.OTHER PAGES

8.1.Blogs

Merchants can add any section that is listed in the Theme sections. Nevertheless, there is a section designed specifically for the blog posts page.
  1. In the theme editor (Customize), open the template selector.
  2. Select Blogs, then Default blog.
8.1.1.Blogs Section Setitngs
  • Select container type, sidebar placement, and layout.
  • Show/hide date/sidebar.
  • Set the number of posts per row.

8.1.2.Blogs Blocks

1. Categories block

  • Add text for title and select categories menu.

2. Recent Post block

  • Add text for title & select blog.

3. Tag block

  • Add text for title.

8.2.Blog Posts

 

Merchants can add any section that is listed in Theme sections. Nevertheless, there is a section designed specifically for the blog page.

  1. In the theme editor (Customize), open the template selector.
  2. Select Blog Posts, then Default blog.
  3. On the left-sidebar, select Blog post section.
8.2.1.Blog Post Section Settings
  • Show/hide social share.

8.2.2.Blog Post Block
  • Merchant can add blocks and arrange them.

1. Title block

  • Show/hide date, comment and author.

2. Content block

  • This block will show content of block that merchant insert in backend.

8.3.Portfolio

Merchants can add any section that is listed in Theme sections. Nevertheless, there is a section designed specifically for the portfolio page.

  1. In the theme editor (Customize), open the template selector.
  2. Select Pages, then Portfolio.
  3. On the left-sidebar, select Portfolio section.
8.3.1.Portfolio Section Settings
  • Select width and style.
  • Set margin bottom on desktop, tablet & mobile.

8.3.2.Portfolio Block
  • Merchant can add blocks and arrange them.
  • Select image & add URL.
  • Add text for title & filter tag.

8.4.About us

Merchants can add any section that is listed in Theme sections. Nevertheless, there is a section designed specifically for the about us page.

  1. In the theme editor (Customize), open the template selector.
  2. Select Pages, then About us.
  • Merchant can add blocks and arrange them.

1. Title About block

  • Add text for title & subtitle.

2. Featured About block

  • Select type.
  • Add text for titles & descriptions.
  • Select images.

3. Our Mission block

  • Select style & image.
  • Add text for title, subtitle, description, intro & name for our mission.

4. Image About block

  • Select type & images.
  • Add text for description.

8.5.Contact

 

Merchants can add any section that is listed in Theme sections. Nevertheless, there is a section designed specifically for the contact page.

  1. In the theme editor (Customize), open the template selector.
  2. Select Pages, then Contact.
  3. On the left-sidebar, select Contact Form section.
  4. Make necessary changes > Save.

1. Contact Info block

  • Add text for title, description, phone, phone number, address.

2. Form block

  • Add text for heading & description.

 

9.Single Product Page

Merchants can add any section that is listed in Theme sections. Nevertheless, there is a section designed specifically for the blog page.

  1. In the theme editor (Customize), open the template selector.
  2. Select Pages, then single-product.
  3. On the left-sidebar, select/add sections. 
  4. Make necessary changes > Save.

9.1.Nature section

  1. In the theme editor (Customize)
  2. Locate Nature.
  3. Make necessary changes > Save.
  • Select style.
  • Set margin bottom on desktop, tablet, mobile.
  • Set ID.

 

9.1.1.Nature element block
  • Select image.
  • Select position for content.
  • Add text for title, brief, button.
  • Set font size for title.
  • Select color for background and text of button.
  • Add nature link.

9.3.FAQ section

  1. In the theme editor (Customize)
  2. Locate FAQ.
  3. Make necessary changes > Save.
  • Select type.
  • Add text for title and sub title.
  • Set margin bottom on desktop, mobile and tablet.

9.3.1.FAQ block
  • Add text for question and answer

10.How to create Wishlist and Compare page

  • To use Wishlist and Compare function, merchants need to create a Wishlist page and Compare page.
  • To create a new page, you go to Admin => Online Store => Pages => Click Add page.

  • Type title: Wishlist or Compare and select Theme template like images below. Finally, click Save.