UNIVE - Shopify Theme Documentation

Overview

Thank you very much for choosing our theme. We truly appreciate and really hope that you'll enjoy our theme! If you like this theme, please support us by rating us 5 stars. Thanks you!

We outline all kinds of good information, and provide you with all the details you need to use the theme.

Please read shopify manual before you start!

Theme Installation

Package Structure

Once you download the package from ThemeForest Downloads page, please unzip it and you will find it contains the following folders.

  • Documentation: documentation for the theme.
  • Dummy_Data
    • database:
      • products_export.csv : sample product data
    • Home_1: sample image for home 1
    • Home_2: sample image for home 2
    • Home_3: sample image for home 3
  • Setting_Data
    • Home_1: setting data for home 1
    • Home_2: setting data for home 2

      • settings_data.json
    • Home_3: setting data for home 3
    • ...
  • Source_File
    • unive-drag-drop-vxx.xx.zip : this is the file you must upload when you install the theme.
  • README.txt
Uploading Theme

To install the theme, please log in to your Shopify store and go to the Online Store --> Themes. From there, click on Upload Theme and upload dresses-drag-drop-v1.0.zip file in the our package.

If your store is currently actived and is using a different theme, please publish our theme that you have just uploaded

Installing Home

Home 1

View Demo Home 1

Note:

You can get example data in our package which you download on Themeforest: Unive_Shopify_Package --> Dummy_Data --> Home_1


Home 2

View Demo Home 2

Change Settings Data

  1. Copy content of settings_date.json file from the source that you downloaded from ThemeForest: Unive_Shopify_Package --> Setting_Data --> Home_2
  2. From your Shopify admin, go to Store Online --> Themes --> Edit code open settings_data.json file and paste the content of above file into here.

  3. Click Save and go to Customize Theme Editor to see the result.

Note:

You can get example data in our package which you download on Themeforest: Unive_Shopify_Package --> Dummy_Data --> Home_2


Home 3

View Demo Home 3

Change Settings Data

  1. Copy content of settings_date.json file from the source that you downloaded from ThemeForest: Unive_Shopify_Package --> Setting_Data --> Home_3
  2. From your Shopify admin, go to Store Online --> Themes --> Edit code open settings_data.json file and paste the content of above file into here.

  3. Click Save and go to Customize Theme Editor to see the result.

Note:

You can get example data in our package which you download on Themeforest: Unive_Shopify_Package --> Dummy_Data --> Home_3


Home 4

View Demo Home 4

Change Settings Data

  1. Copy content of settings_date.json file from the source that you downloaded from ThemeForest: Unive_Shopify_Package --> Setting_Data --> Home_4
  2. From your Shopify admin, go to Store Online --> Themes --> Edit code open settings_data.json file and paste the content of above file into here.

  3. Click Save and go to Customize Theme Editor to see the result.

Note:

You can get example data in our package which you download on Themeforest: Unive_Shopify_Package --> Dummy_Data --> Home_4


Home 5

View Demo Home 5

Change Settings Data

  1. Copy content of settings_date.json file from the source that you downloaded from ThemeForest: Unive_Shopify_Package --> Setting_Data --> Home_5
  2. From your Shopify admin, go to Store Online --> Themes --> Edit code open settings_data.json file and paste the content of above file into here.

  3. Click Save and go to Customize Theme Editor to see the result.

Note:

You can get example data in our package which you download on Themeforest: Unive_Shopify_Package --> Dummy_Data --> Home_5


Home 6

View Demo Home 6

Change Settings Data

  1. Copy content of settings_date.json file from the source that you downloaded from ThemeForest: Unive_Shopify_Package --> Setting_Data --> Home_6
  2. From your Shopify admin, go to Store Online --> Themes --> Edit code open settings_data.json file and paste the content of above file into here.

  3. Click Save and go to Customize Theme Editor to see the result.

Note:

You can get example data in our package which you download on Themeforest: Unive_Shopify_Package --> Dummy_Data --> Home_6


Home 7

View Demo Home 7

Change Settings Data

  1. Copy content of settings_date.json file from the source that you downloaded from ThemeForest: Unive_Shopify_Package --> Setting_Data --> Home_7
  2. From your Shopify admin, go to Store Online --> Themes --> Edit code open settings_data.json file and paste the content of above file into here.

  3. Click Save and go to Customize Theme Editor to see the result.

Note:

You can get example data in our package which you download on Themeforest: Unive_Shopify_Package --> Dummy_Data --> Home_7


Home 8

View Demo Home 8

Change Settings Data

  1. Copy content of settings_date.json file from the source that you downloaded from ThemeForest: Unive_Shopify_Package --> Setting_Data --> Home_8
  2. From your Shopify admin, go to Store Online --> Themes --> Edit code open settings_data.json file and paste the content of above file into here.

  3. Click Save and go to Customize Theme Editor to see the result.

Note:

You can get example data in our package which you download on Themeforest: Unive_Shopify_Package --> Dummy_Data --> Home_8


Importing Products

You can get product data (database) in our package which you download on Themeforest: Unive_Shopify_Package --> Dummy_Data --> Database

Importing products with a CSV file

Updating Theme

When our team updates a theme on the Themeforest with bug fixes and added features, those changes are not automatically added to your own theme. There is no automatic or manual way to run updates on your installed themes.

  1. Download the up-to-date (latest) version from https://themeforest.net/downloads

  2. Install the latest version as an unpublished theme.

  3. Go to your Theme Manager. On there, you can customize the theme while it remains unpublished.

  4. From the Edit code page, Config folder, copy the content of the settings_data.json file from the current theme to the new theme.
    That file contains all the current values of your theme's Customize page settings.

  5. Uninstall and re-install all of your Shopify applications that add code to the theme.

Apps Installation

Product Reviews

To enable Product Reviews, please install below app:

Product Reviews

Note:This app is free

Quick View
MetaFields Editor

To get Meta Fields App, please install below app:

MetaFields Editor

Note:This app is free

Sales Pop by Beeketing - Recent Sales Notification Popup

To get Sales Pop App, please install below app:

Sales Pop

Note:This app is free

Basic Configuration

Currency

Editing the HTML for currency formatting:

  1. From your admin, go to the Settings --> General

  2. Scroll down and then you will see a Standards & formats section. Find the Currency field

  3. Select your currency. Ie: USD

  4. Click Change formatting

  5. Replace selected text and click Save

    <span class="money">${{amount}} USD</span>
    <span class="money">${{amount}}</span>
  6. Click Save

Payment

1. From your admin, go to the Settings --> Payments

2. Choose a payment gateway to accept payments for orders. Then, checkout page will work.

Checkout - Enable Register/Login Link on Header
Shipping

1. From your admin, go to the Settings --> Shipping

2. To enable shipping calculator, please configure your shipping rates by following below guide:

Set up shipping rates

3. Instruction:

When shipping has one way: Standart work;
When shipping has two way. SHIPPING & HANDLING has message.

Message you can edit here: Online Store / Themes / Edit language -> General -> Shipping variants

If "Shipping variants" field is empty: SHIPPING & HANDLING field is hide

Navigation

Create a Menu

The first, you need read about menu here: Menus and Links

Example:

You would like to create a menu like below image, please follow steps:

  1. From your admin, go to the Online Store --> Navigation, and click Add Menu

  2. Enter Title of Menu and click Add menu item

  3. Enter Name & Link for menu item:

  4. Continue create menu item and you will create the menu you need

  5. Click Save

Navigation Configuration

To configure for Navigation, go to the Theme Settings --> Navigation

Add Main Navigation

To add/edit Navigation, please go to the Sections --> Navigation


Menu Item No Children


Menu Item Logo


Sub Menu Dropdown

  1. From your store admin, go to Customize --> Sections --> Navigation, add Sub Menu Dropdown content

  2. Go to Online Store --> Navigation, create a menu (ie: Page)

  3. Enter Title & Link, choose Sub menu (ie: Page)

  4. Result:


Mega Menu - Cate Image

  1. From your store admin, go to Customize --> Sections --> Navigation, add Mega Menu - Cate Image content

  2. Go to Online Store --> Navigation, create a menu (ie: Accessories)

  3. Go to Products --> Collections, create some collections (ie: New Products, Sale Products,...) and upload the image of these collections

  4. Enter Title & Link, choose Sub menu (ie: Accessories)

  5. Result:


Mega Menu - Linklist

This mega menu style is same as Mega Menu - Cate Image, just not show the collection image

  1. From your store admin, go to Customize --> Sections --> Navigation, add Mega Menu - Linklist content

  2. Go to Online Store --> Navigation, create a menu (ie: Accessories)

  3. Enter Title & Link, choose Sub menu (ie: Accessories)

  4. Result:


Mega Menu - Products

  1. From your store admin, go to Customize --> Sections --> Navigation, add Mega Menu - Products content

  2. Go to Online Store --> Navigation, create a menu (ie: Women)

  3. Enter Title & Link, choose Sub menu (ie: Women), Banner Image, Product List

  4. Result:


Mega Menu - Right Banner

  1. From your store admin, go to Customize --> Sections --> Navigation, add Mega Menu - Right Banner content

  2. Go to Online Store --> Navigation, create a menu (ie: Men)

  3. Enter Title & Link, choose Sub menu (ie: Men), Banner Image

  4. Result:


Mega Menu - Left Banner

  1. From your store admin, go to Customize --> Sections --> Navigation, add Mega Menu - Right Banner content

  2. Go to Online Store --> Navigation, create a menu (ie: Men)

  3. Enter Title & Link, choose Sub menu (ie: Men), Banner Image

  4. Result:


Mega Menu - Text, Banner

  1. From your store admin, go to Customize --> Sections --> Navigation, add Mega Menu - Right Banner content

  2. Go to Online Store --> Navigation, create a menu (ie: Men)

  3. Enter Title & Link, choose Sub menu (ie: Men), Banner Image

  4. Result:


Mega Menu - Video

  1. From your store admin, go to Customize --> Sections --> Navigation, add Mega Menu - Video content

  2. Go to Youtube, click to view a video and get Embeded Code

  3. Enter Title, Link and Embeded Code

  4. Result:


Mega Menu - HTML

  1. From your store admin, go to Customize --> Sections --> Navigation, add Mega Menu - HTML content

  2. Enter Title, Link and Custom HTML content

  3. Result:

Variant Color

Enable Variant Color

To enable Variant Color, you go to the Online Store --> Themes --> Customize -> Theme Settings --> Product Item --> Variant Color. Then check Enable Variant Color

Add Variant Color For a Product
  1. From your store admin, go to the Product --> Choose a product

  2. Click Add variants in your Product page.

  3. Input Option Name is "Color" and Option Values are red, green ....

  4. Click Save

  5. From Variant Tab, click on thumbnail image to upload new Image for new color.

  6. To add more Variant Color

Show Variant Color Icons

Option 1 - Color Name

  1. Start compiling all the names of your colors store-wide. By color names, we mean these:

  2. From your Shopify admin, go to Online Store > Themes -> Actions > Edit code, open variant-color.scss.liquid stylesheet in the online code editor.

  3. In the file, define your colors, following this very strict format:

    Find the proper hexadecimal value for each color. Use this tool: http://www.color-hex.com/. Add the hex value next to each color in variant-color.scss.liquid file.

    $colors: (
    'blue' #FE4365,
    'chocolate' #FE4365,
    'cornflower-blue' #FE4365,
    );

    Note:

    • The name of each color must match this pattern: <Option Name> <Option Value>.
    • <Option Name> is lowercase and except replace white space with a dash. So if you have a Color option, and one of its values is Cornflower Blue, please use cornflower-blue, not Cornflower Blue nor Cornflower-Blue.
    • There ought be no comma between the color name and the hex value.
    • There ought to be a comma at the end of each color definition except the last one.

Option 2 - Color Image

  1. Start compiling all the names of your colors store-wide. By color names, we mean these:

  2. From your Shopify admin, go to Online Store > Themes -> Actions > Edit code, open variant-color.scss.liquid stylesheet in the online code editor.

  3. In the file, define your colors, following this very strict format:

    You go to Settings --> Files and upload images here. Write down the file name next to the option value in variant-color.scss.liquid file. Repeat for all options.

    $patterns: (
    'orange' 'orange.png',
    'orange-red' 'orange-red.png',
    'violet' 'violet.png',
    );

    Note:

    • The name of each option must match this pattern: <Option Name> <Option Value>.
    • Except replace white space with a dash. So if you have a Color option, and one of its values is Orange Red, please use orange-red, not Orange Red nor Orange-Red.
    • There ought be no comma between the option name and the filename.
    • The filename can be anything, there's no naming convention to follow here.
    • There ought to be a comma at the end of each color definition except the last one.

Header

Header Configuration

Please configure the header at Theme Settings --> Header

Promotion Bar

To enable Promotion Bar, please go to Theme Settings --> Header --> PROMOTION BAR

To configure Promotion Bar, please go to Sections --> Header Promotion Bar

Header Layout

Header Layout 1

Please go to Customize --> Theme settings --> Header and choose Header Layout 1


Header Layout 2

Please go to Customize --> Theme settings --> Header and choose Header Layout 2


Header Layout 3

Please go to Customize --> Theme settings --> Header and choose Header Layout 3


Header Layout 4

Please go to Customize --> Theme settings --> Header and choose Header Layout 4


Header Layout 5

Please go to Customize --> Theme settings --> Header and choose Header Layout 5


Header Layout 6

Please go to Customize --> Theme settings --> Header and choose Header Layout 6

Footer

Footer Configuration

Please configure the footer at Theme Settings --> Footer

To add/edit Section Block, please go to Sections --> Section Block


Footer Links

  1. Please enter Heading, choose Menu and Column Width

  2. Result:


Custom HTML

  1. Please enter Heading, Text and choose Column Width

  2. Result:


Recently Posts

  1. Please enter Heading, choose Limit Number Post and Column Width

  2. Result:


Recently Products

  1. Please enter Heading, choose Limit Number Product and Column Width

  2. Result:


Newsletter

  1. Please enter Heading, Description and choose Column Width

  2. To configure Newsletter Action, please go to Theme settings --> Newsletter --> NEWSLETTER ACTION

    To add/edit social media icon, please go to Theme Settings --> Social Media

    To choose style for social media icon, please go to Theme Settings --> Footer --> FOOTER SOCIAL

  3. Result:


Clearing

This block does not allow floating elements

Theme Sections

Enhanced theme customization with sections

Think of sections as individual, customizable components of a theme. Within each section, you or your client can easily add, reorder, and remove chunks of content such as products, slideshows, videos, or collections.

Here’s how easy it is to add new sections to a theme:


It’s just as simple to reorder existing sections:


We’ve also made editing content within sections a breeze:

Sections on Home Page

Banner 1

Please add Banner 1 at Customize Theme --> Section --> Add Content --> Banner 1

  • Block: Image

  • Block: Image & Text, Image & Overlay Text (the second banner)


Brand Logo Slider

Please add Brand Logo Slider at Customize Theme --> Section --> Add Content --> Brand Logo Slider


Brand Logo List

Please add Brand Logo List at Customize Theme --> Section --> Add Content --> Brand Logo List


Collection List 1

Please add Collection List 1 at Customize Theme --> Section --> Add Content --> Collection List 1

  • Style: Slider

  • Style: Grid


Collection List 2

Please add Collection List 2 at Customize Theme --> Section --> Add Content --> Collection List 2

  • Block: Grid 3-Items 1

  • Block: Grid 3-Items 2

  • Block: Grid 3-Items 3

  • Block: Grid 4-Items 1

  • Block: Grid 4-Items 2

  • Block: Grid 4-Items 3

  • Block: Grid 4-Items 4

  • Block: Grid 5-Items 1

  • Block: Grid 5-Items 2

  • Block: Grid 5-Items 3


Collection List 3

Please add Collection List 3 at Customize Theme --> Section --> Add Content --> Collection List 3


Collection List 4

Please add Collection List 4 at Customize Theme --> Section --> Add Content --> Collection List 4


Collection List 5

Please add Collection List 5 at Customize Theme --> Section --> Add Content --> Collection List 5


Collection List 6

Please add Collection List 6 at Customize Theme --> Section --> Add Content --> Collection List 6


Product List 1

Please add Product List 1 at Customize Theme --> Section --> Add Content --> Product List 1


Product List & Banner

Please add Product List & Banner at Customize Theme --> Section --> Add Content --> Product List & Banner

  • Position of Banner: Left

  • Position of Banner: Right


Product Slider 1

Please add Product Slider 1 at Customize Theme --> Section --> Add Content --> Product Slider 1


Product Tab 1

Please add Product Tab 1 at Customize Theme --> Section --> Add Content --> Product Tab 1


Small Product List

Please add Small Product List at Customize Theme --> Section --> Add Content --> Small Product List


Slideshow

Please add Slideshow at Customize Theme --> Section --> Add Content --> Slideshow

  • Block: Only Image

  • Block: Image & Text

  • Block: Image & Text & 2 Button


Text & Icon

Please add Text & Image at Customize Theme --> Section --> Add Content --> Text & Icon

  • Style: Simple

  • Style: Box


Text & Image

Please add Text & Image at Customize Theme --> Section --> Add Content --> Text & Image

  • Block: Image on Left

  • Block: Image on Right

  • Block: Text Overlay

  • Block: Text On Center


Instagram

Please add Instagram at Customize Theme --> Section --> Add Content --> Instagram


Lastest Post

Please add Lastest Post at Customize Theme --> Section --> Add Content --> Lastest Post

  • Style 1

  • Style 2

  • Style 3


Newsletter

Please add Newsletter at Customize Theme --> Section --> Add Content --> Newsletter

  • Layout: Simple

  • Layout: Center


Testimonials

Please add Testimonials at Customize Theme --> Section --> Add Content --> Testimonials

Theme settings

Theme settings

The Customize theme lets you view and change the built-in settings of your theme.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Click the Customize button on the theme that you want to customize:

    Click the customize theme button
  3. Choose Theme Settings

Typography

To configure for Typography, please go to Theme Settings --> Typography

Heading

To configure for Heading, please go to Theme Settings -> Heading

Heading Custom


Heading Page and Heading SideBar

Colors

To configure for Colors, please go to Theme Settings -> Colors

Button/Input/Form

To configure for Button/Input/Form, please go to Theme Settings -> Button/Input/Form

Product Label

New Label

To add new label to a product. Please follow these below steps:

  1. From your Shopify admin, go to Products --> All Products and choose a product that you would like to add new label
  2. Add new tag into this product tags

  3. Then below is the result:


Sale Label

To add sale label to a product. Please follow these below steps:

  1. From your Shopify admin, go to Products --> All Products and choose a product that you would like to add sale label
  2. Set the price in the Compare at price are. You must set the price in Compare at price is bigger than in Price area.

  3. Then below is the result:

Money options

This is currency switcher on header, please configure it at Customize -> Theme Settings -> Money options

Please sure that you have configured Currency at Basic Configuration

Social Media

To configure for Social Media, please go to Customize -> Theme Settings -> Social Media

Facebook Messenger Chat
Popup Newsletter

To configure for Popup Newsletter, please go to Customize -> Theme Settings -> Popup Newsletter


Mailchip Form Action URL

Please replace this code by your Mailchip Form Action URL. The current code is our demo code

List Collection Page

View List Collection Page


To configure for List Collection Page, please go to Customize -> Theme Settings -> List Collection Page

Cart Page

View Cart Page


To configure for Cart Page, please go to Customize -> Theme Settings -> Cart Page

404 Page

View 404 Page


To configure for 404 Page, please go to Customize -> Theme Settings -> 404 Page

Checkout Page

Collection Page

Create Collection Page
Collection Settings

To setting for Collection, please access to Theme --> Customize --> Theme Settings --> Collection Page


Collection Slideshow

To add/edit block in Collection Slideshow, please go to Sections --> Slideshow

If you would like that each collection will show a different image, please follow below steps:

  1. Disable Collection Slideshow

  2. Go to Product --> Collection, choose a collection

  3. Upload an image into Description field

Collection Filters

To create Product Filter for Collection page, please follow these below steps:

  1. From your Shopify Admin, go to Online Store --> Theme -> Customize. On Select page dropdown, please choose Collection pages

  2. Go to Sections --> Collection Filter

  3. Choose Categories block, enter Heading and choose Categories show type

  4. Choose Filter by Price (Filter by Size, Filter by Color, Filter by Brand...) block, enter Filter Title and Filter by tags list

    • Go to Products, choose a product

    • Add price tags (ie: Under $100, $100 - $200, Above $200), size tags (ie: XS, S, M, L, XL, XXL), color tags (ie: Red, Blue, Pink, Black, Yellow, Green, Orange, White), brand tags (ie: Adidas, Chanel, Nike)... into Product Tags field.

    • Click Save
  5. Result:

Collection Sidebar

To enable Collection Sidebar, please go to Theme Settings--> Collection Page.

To add/edit block in Collection Sidebar, please go to Sections --> Collection Sidebar

Product Page

Create a Product
Product Design Style

To choose Product Design Style, please access to Theme --> Customize --> Theme Settings --> Product Page


Bottom Thumbnails

View Demo



Left Thumbnails

View Demo



Grid Image

View Demo


Product Content Settings

To configure for Product Content, please access to Theme --> Customize --> Theme Settings --> Product Page

Product Tab

To configure for Product Page, please access to Theme --> Customize --> Theme Settings --> Product Page

To add/edit Product Tab, please go to Sections --> Product Tab


Description Tab

  1. Please enter Heading

  2. From your Shopify admin, go to Products, choose a product and add content into Description field

  3. Result:


Reviews Tab

  1. Please enter Heading

  2. From your Shopify admin, go to Apps and install Product Reviews app

  3. Result:


Sizing Tab

  1. Please enter Heading and upload Sizechart image

  2. If your product has a differrent sizechart, please follow below steps:

    • From your Shopify admin, go to Apps --> MetaFields Editor

    • Choose a product, then Add New Metafield

    • Enter the value for: Namespace, Key, Value

      For Namespace:

      sizechart

      For Key:

      sizechartkey

      For Value: Please enter Sizechart Image URL

      • From your Shopify admin, go to Settings --> Files

      • Upload the sizechart image

      • Copy URL and paste into Value field

    • Click Add button

  3. Result:


Tags Tab

This tab show all tags of this product

  1. Please enter Heading

  2. Result:


Additional Tab

This tab shows the information for each product

  1. Please enter Heading

  2. From your Shopify admin, go to Apps --> MetaFields Editor

  3. Choose a product, then Add New Metafield

  4. Enter the value for: Namespace, Key, Value

    For Namespace:

    addition

    For Key:

    additionkey

    For Value: Please enter content here

  5. Click Add button

  6. Result:


Custom Tab

This tab show the information for all products

  1. Please enter Heading and Content

  2. Result:

Related Products

To configure forRelated Products, please access to Theme --> Customize --> Theme Settings --> Product Page

Product Sidebar

To enable Product Sidebar, please access to Theme --> Customize --> Theme Settings --> Product Page

To add/edit Product Sidebar, please go to Sections --> Product Sidebar

Add CountDown For a Product

View Demo Page


To add Countdown for a product, please follow below steps:

  1. Install MetaFields Editor

  2. From your store admin, go to Apps --> MetaFields Editor

  3. Choose a product, then Add New Metafield

  4. Enter the value for: Namespace, Key, Value

    For Namespace:

    countdown

    For Key:

    countdownkey

    For Value: Please enter value follow the Format Year/Month/Day Hour:Minute:Second

    2018/12/12 12:30:00
  5. Click Add button

Add Video For a Product

View Demo Page


To add Video Popup for a product, please follow below steps:

  1. Install MetaFields Editor

  2. From your store admin, go to Apps --> MetaFields Editor

  3. Choose a product, then Add New Metafield

  4. Enter the value for: Namespace, Key, Value

    For Namespace:

    video

    For Key:

    videokey

    For Value: Please enter the Link from YouTube, Vimeo... If your video is a Youtube or Vimeo video, it will open a popup to view video, otherwise, it will link to webpage contain that video

  5. Click Add button

Add Social Share in Product Page

To add Social Share in Product Page, please follow below steps:

  1. Go to www.addthis.com/dashboard

  2. Add a New Tool

  3. Select a Tool and choose Share Button

  4. Select a Tool Type and configure it. Then, click Save & Continue button.

  5. Copy the code:

    and go to Shopify Admin --> Online Store --> Customize Theme --> General settings --> Product Page, Then paste the code into Social Share Code field.

Other Pages

Static Page

Create a new page:

  1. From your Shopify Admin, click Online Store, and then click Pages (or press G W P).

  2. From the pages tab, click the Add page button. You will be taken to a new page template:

    Create page
  3. From the page template, enter a Title and Content in the text boxes provided.

  4. On Visibility field, by default, your new page will be visible.

  5. Select the Hidden option if you want your new page to be hidden on your storefront.

  6. Click Save.
Wishlist Page

Create wishlist page:

  1. From Online Store / Pages, find and click button Add page

  2. Write in Title field:

    Wishlists
  3. Select Visibility: Visible

  4. Select Template: page.wishlists

  5. Click save

Compare Page

Create Compare Page:

  1. From Online Store / Pages, find and click button Add page

  2. Write in Title field:

    Compare
  3. Select Visibility: Visible

  4. Select Template: page.compare

  5. Click save

FAQ Page

View FAQ Page

Create FAQ Page:

  1. From Online Store / Pages, find and click button Add page

  2. Write in Title field:

    FAQ
  3. Select Visibility: Visible

  4. Select Template: page.faq

  5. Click save


Add FAQ Page Content

  1. From your Shopify admin, go to Online Store --> Themes --> Customize. On Select page field, please choose FAQ

  2. Then, go to Sections --> FAQ List

  3. Edit Label Filter, add Filter (ie: Filter 1, Filter 2, Filter 3) content

  4. Enter Question and Answer field

  5. Result:

    View FAQ Page

Contact Page

View Contact Page

Create Contact Page:

  1. From Online Store / Pages, find and click button Add page

  2. Write in Title field:

    Contact
  3. Select Visibility: Visible

  4. Select Template: page.contact

    Create page 2
  5. Click Save


Edit a Google map on Contact page

  1. In Google Maps, go to your storefront location.

  2. Click on menu icon in seach form, then choose Share or embed map.

    Google maps
  3. Copy the embed map code

    Embed google maps code
  4. From your Shopify admin, click Online Store, and then click Themes --> Customize --> Theme Settings

  5. Find Contact Page and paste this code into the field Google Map Code.


Edit/Add fields to the Contact Form

To add/edit contact field, please follow below guide:

Adding fields to the Liquid Contact Form


Edit Custom HTML

  1. From your Shopify admin,go to Online Store --> Themes --> Customize --> Theme Settings

  2. Find Contact Page and go to CONTACT - CUSTOM HTML section.

Gallery Page

View Gallery Page

Create Gallery Page:

  1. From Online Store --> Pages, find and click button Add page

  2. Write in Title field:

    Gallery
  3. Select Visibility: Visible

  4. Select Template: page.gallery

  5. Click Save


Gallery Page Configuration

To configure Gallery page, please go to Theme Settings -> Gallery Page

  1. From your Shopify admin, click Online Store, and then click Themes --> Customize --> Theme Settings

  2. Find Gallery Page and edit the options for it.

    - Please select Gallery Item Per Row and Gutter Item! Below is the examples:


Add Gallery Page Content

  1. From your Shopify admin, go to Online Store --> Themes --> Customize. On Select page field, please choose Gallery

  2. Then, go to Sections --> Sections -> Gallery List

  3. Add Image (ie: Image, Image & 1 Tint, Image & 2 Tint) content

    Tint(+) is an anchor on the gallery image to link to the product appear on this image.

  4. Upload Image, choose Product and set up the position

  5. Result:

    View Gallery Page

Blog Page

To create an article in your store, please follow below manual:

Blog Posts Manual


Blog Page Configuration

To edit Blog Page, please go to Themes --> Customize --> Theme Settings --> Blog page


Blog Sidebar

To enable Blog Sidebar, please access to Theme --> Customize --> Theme Settings --> Blog Page

To add/edit Blog Sidebar, please go to Sections --> Blog Sidebar

Password Page

Enable Password Page

  1. From your Shopify admin, go to Online Store --> Preferences

  2. Find Password page section and click Enable password page


Add Password Page Content

  1. From your Shopify admin, go to Online Store --> Themes --> Customize. On Select page field, please choose Password

  2. Then, go to Sections --> Password Page

  3. Set up all fields:

  4. Result:

    View Password Page