Banking - Shopify Theme Documentation

Theme Installation Steps

Prepare For Installation

Step 01: With the theme package, you can get Two folders like dummy-data, theme-main.

Upload Theme

To upload that particular chosen theme layout-file, Please follow the below steps:

Step 01: Go to Online Store -> Themes and Click to Upload Theme

image

Step 02: And Browse chosen theme-layout package to upload it (like theme-main.zip)

first of all you have Extract the sp-banking.zip and then upload banking-main.zip

image

Step 03: Click to Publish.

image

2. Store Configuration

Please follow the below-required settings to configure your store like a theme demo

Enable Customer Accounts

Go to Store Admin -> Settings -> Customer accounts

Find Customer accounts Select Classic customer accounts and click Show login link in the header of online store and at checkout then Save

image

3. Language Translation Settings

To change RTL layout CSS-style, you just need to regenerate the RTL file to get changes.

Go to Online Store -> Settings -> languages -> Change default language

image

To choose your Default Translation Language

image

4. Navigation Menu

Refer to some articles to get a clear idea about how to setup menu-navigation.

How to create a new menu

You can create a link, list of collections, products, pages, or blogs with the menu.

Go to Online Store -> Navigation -> Add Menu button

image
TT Megamenu Settings
image
image
Add Style Product Menu Presets

To add Submenu category page links and Banner. In this add title, select menu, and also set menu width in customizer.

heading-menu
Add page Menu

To add Submenu category page links and Banner. In this add title, select menu, and also set menu width in customizer.

heading-menu

5. Set Store Pages

Refer to some articles to get a clear idea about how to setup menu-navigation.

How to Create Pages

Step 01: Go to Online Store -> Pages

image

Step 02: Click on the Add page

image
Create a Contact us page

Step 01: Go to Online Store -> Pages -> Add page

Step 02: Set Title & Template suffix as contact

image

Step 02: OR, To add additional contact page details.

image

Go to Online Store -> Customize ->Select Contact Page from top Navigation -> Section -> Contact Page

image
Create About us page

Step 01: Go to Online Store -> Pages -> Add page

Step 02: Set Title & Template suffix as aboutus

image

Step 03: OR, To add additional content on the about page.

Go to Online Store -> Customize -> Select About Page from top Navigation -> Section -> About Page

image
Create Faq's page

Step 01: Go to Online Store -> Pages -> Add page

Step 02: Set Title & Template suffix as faq

image

Step 03: OR, To add additional content on the faq's page.

Go to Online Store -> Customize -> Select Faq's Page from top Navigation -> Section -> Faq's Page

image
Create Appointment page

Step 01: Go to Online Store -> Pages -> Add page

Step 02: Set Title & Template suffix as appointment

image

Step 03: OR, To add additional content on the Appointment page.

Go to Online Store -> Customize -> Select Appointment Page from top Navigation -> Section -> Appointment Page

You can get images from, Theme-package -> banking-dummy-data -> appointment-img1, appointment-img2.

image
image
Create Compare page

Step 01: Go to Online Store -> Pages -> Add page

Step 02: Set Title & Template suffix as compare

image
Create Service page

Step 01: Go to Online Store -> Pages -> Add page

Step 02: Set Title & Template suffix as Service

image

Step 03: OR, To add additional content on the Service page.

Go to Online Store -> Customize -> Select Service Page from top Navigation -> Section -> Service Page

You can get images from, Theme-package -> banking-dummy-data -> icon, pdp-banner, award-logo, home-banner-star1.

image

The Pro Testimonials, CMS Aboutus, Service Section, cms information included in services page.

image
Create Price page

Step 01: Go to Online Store -> Pages -> Add page

Step 02: Set Title & Template suffix as Price

image

Step 03: OR, To add additional content on the Price page.

Go to Online Store -> Customize -> Select Price Page from top Navigation -> Section -> Service Page

You can get images from, Theme-package -> banking-dummy-data -> blog-banner, price-section-right-ptrn, price-card-img-1.

image

The Pro common banner, cms information, CMS Email included in price page.

image
Create Other pages

Step 01: Go to Online Store -> Pages -> Add page

Step 02: Set Title & Template suffix as Default page

image

Theme Customize

Step 01: Go to Admin -> Online Store -> Themes -> Customize

image

Step 02: If in case of change code files.

Go to : Admin -> Online Store -> Themes -> Edit Code

edit_code

Theme Settings

With the theme, there are too many options available to quickly set up your store.

theme-setting
theme-setting
theme-setting
theme-setting
ajax-addtocart-setting
product-hover-style
category-banner2
product-hover-style
Theme Color Settings

Go to Theme Settings -> Color

To easy to set custom-color to the body, link, title, header, footer, primary button, secondary button, product hover button, etc...

theme-color-setting
MailChimp Newsletter

Just have to add MailChimp Form URL.

mailchimp-newsletter
newsletter_action_url
  • Just have to register the MailChimp account & get an action URL for the newsletter form.

  • Read the official source at How to get a newsletter action URL

Newsletter Popup

To Add a Newsletter Popup.

popup-newsletter
newsletter_pop_setting
newsletter_popup
Social Media

Add social media accounts.

social-media
social-media-link-setting

7. Header settings

Go to Online Store -> Customize -> Section -> Header design
header1

8. Footer settings

Go to Online Store -> Customize -> Section -> Footer design
footer-setting1
footer-setting2

9. Blog Post

To Add/Manage Blog Posts

manage_blog
add_blog
add_blog_template

To customize Blog inner pages.

blog_inner

10. Cookie Popup

To enable a Cookie message-bar on store Front.

cookie-setting
cookie_bar
cookie

11. Product Metafields

"Metafields" is adding Products custom fields like product label 'New', countdown, descripition.

step 01, 02:Go To Settings, Visit the Metafields

header1

step 03: Click The products

header1

step 04: Click The add definition button

header1

step 05: To Add countdown with specific date

header1

step 06: To Add Custom Label

header1

step 07: To Description of product

header1

step 08: To set added Metafields Countdown, Custom label, Description values to the Product

header1

step 09: Checkout Front-end with the Metafields values

header1
header1

12. Homepage Section Setting

To Create a Home page section

To add a Section, Create a new one.

add_section

13. Homepages Sections & Customization

Layout - Home
home-01
01

Theme Layouts Common CMS Sections

With the theme, There are many sections for the homepage builder. You can discover a list of sections in the customized control panel

List of Banner Styles
banner
Home Slider

Go to Section -> Slideshow

In this section, you can add left image, right image, title, description, button, button URL, video url and banner.

You can get images from, Theme-package -> banking-dummy-data -> main-banner-left-ptrn, main-banner-right-ptrn, main-banner-img, award-logo, Home-main-banner-star1, main-banner-right-line.

slideshow
slider
CMS Service

Go to Section -> CMS Service

In this section, you can add service icon, title, description, button and button URL.

You can get images from, Theme-package -> banking-dummy-data -> service-group-profile, service-icon.

slideshow
Brand Logo

To display top-brand logos with a carousel.

You can get images from, Theme-package -> banking-dummy-data -> brand.

brand
CMS Aboutus

Go to Section -> CMS Aboutus

In this section, you can add first content, second content, third content and also add background image.

You can get images from, Theme-package -> banking-dummy-data -> about-section-left-ptrn, about-bank-img-1, about-bank-img-2, award-logo, about-bank-group-profile.

block-banner
Custom Banner

Go to Section -> Custom Banner

In this section, you can add image, title, description, button, button URL.

You can get images from, Theme-package -> banking-dummy-data -> two-columns-img-1, two-columns-img-2.

sub-banner
Custom Banner

Go to Section -> Custom Banner

In this section, you can add background image, title, description, button, button URL.

You can get images from, Theme-package -> banking-dummy-data -> review-section-bg.

sub-banner
CMS Subbanner

Go to Section -> CMS Subbanner

In this section, you can add background image, title, description, button, button URL, image, image related contents.

You can get images from, Theme-package -> banking-dummy-data -> info-section-left-ptrn, info.

category-product
Service Section

Go to Section -> Service Section

In this section, you can add service icon, title, description, button and button URL.

You can get images from, Theme-package -> banking-dummy-data -> service-icon.

category-product
CMS Information

Go to Section -> CMS Information

In this section, you can add title, description, button, button URL, image.

You can get images from, Theme-package -> banking-dummy-data -> price-section-right-ptrn, price-card-img-1, Icon, Icon1.

category-product
Testimonial

Go to Section ->Testimonial

In this section, you can add title, description, review image, author image, author name, author designation and also add left image, right image.

You can get images from, Theme-package -> banking-dummy-data -> star, testimonials-review-profile-img, testimonials-line.

top-banner
Blog Posts

Go to Section -> Blog Posts

You can get images from, Theme-package -> banking-dummy-data -> blog-images

latest-blog
blogdesign-1
CMS Email

Go to Section -> CMS Email

In this section, you can add title, description.

block-banner
Get Support
Back to top