Usage Guide¶

Get Started¶

Thanks for using our theme!

To set up the theme exactly like our demo stores, you may need to install the our free app PapaThemes Widgets. This app provides additional widgets to build the content in Page Builder visually without coding skill.

For displaying your Instagram photos on your website, you can use our free tool PapaThemes Instagram. We will guide you step by step later in this manual.

Customzing Typography, Fonts and Colors¶

Customzing Typography, Fonts and Colors, Buttons in Page Builder > Theme Styles > General. There are dozens of options to help you customize your website beautifully and uniquely.

Customzing Checkout Page's Typography and Colors¶

Customzing the checkout page's typography and colors in Page Builder > Theme Styles > Optimized Checkout

Installing PapaThemes Widgets App¶

Find and install PapaThemes Widgets app from BigCommerce Apps Marketplace.

After installed, go to your admin page, on the left sidebar, click Apps > My Apps, click Launch button of PapaThemes Widgets app to open the app:

launch-papathemes-widgets-app

Then click the Install buttons in turn to install all widgets for Beautify theme:

install-papathemes-widgets

Go to Storefront > My Themes > click Customize in dropdown menu of Beautify theme to open Page Builder. Select any theme style to start:

click-theme-customize

Verify the widgets installed successfully if they appear in Page Builder:

custom-widgets-appear

Setting Up Cosmetics Home Page¶

In your admin page, go to Storefront > My Themes, click Customize in the dropdown menu of Beautify theme, select Cosmetics style, then click Continue button to open Page Builder.

To create the top banner, go to Marketing > Banners > click Create a Banner button.

Enter Banner Name, Banner Content. Select Show on Page = Home Page. Select Location = Top of Page. Then click Save button to finish.

Configuring the top banner colors in Page Builder > Theme Styles > General > Top Banners:

cosmetics-header

Editing the phone number in Store Setup > Store Profile > Phone.

Editing the currencies list in Store Setup > Currencies.

The announcement (ie: Covid 19 Delivery Update: Click Here) displays on all pages. Drag the Text widget to this region to add it:

edit-annoucement

Changing the header's background color, the site name's text color, toggle auto hide/show header in Page Builder > Theme Styles > Header as showed in the screenshot below:

configure-header-colors

Changing the icons and links's colors (ie. Sign in & Register, Gift Certificates, Cart) in Theme Styles > Headers > User navigation:

configure-user-navigation

Changing the main navigation's colors in Theme Styles > Header > Main navigation:

configure-main-navigation

Changing the quick search form in Theme Styles > Header > Quick search:

Home Page Carousel¶

cosmetics-home-slideshow

Creating the home page carousel in Storefront > Home Page Carousel.

You can:

Turn off / on the home page carousel.
Change colors.
Change the content position of each slide.

Go to Page Builder > Theme Styles > Home Page > Carousel:

configure-home-carousel

Content Arrangement¶

You can arrange the content of the home page in Page Builder > Theme Styles > Home Pages > Sections, choose the content to display on each position.

sections-arrangement

New / Featured / Popular Products¶

You can configure number of products to display, number of products per row, display type (grid or carousel) in Page Builder > Theme Styles > Home Page > Featured products or New products or Best-sellers products:

configure-featured-new-popular-products

To set product as Featured, edit the product, select Set as a Featured Product on my Storefront as the screenshot below:

set-featured-product

Popular products are automatically assigned by BigCommerce based on customer order analysis.

New products are automatically assigned by BigCommerce based on the product's added date.

newsletter-subscription

Enabling the newsletter subscription feature in Marketing > Email Marketing, tick on Allow Newsletter Subscriptions, enter the summary content in Show Newsletter Summary box if you want. See below screenshot for example:

enable-newsletter-subscription

You can configure the heading, display style, colors, background image and toggle this newsletter form on the footer in Page Builder > Theme Styles > Footer > Newsletter:

configure-newsletter

cosmetics-footer

Configuring the footer in Page Builder > Theme Styles > Footer > Main Footer:

configure-main-footer

Configuring the social icons in Storefront > Social Media Links.

You can also add the custom cotent to the footer using widgets. Just drag the widget to the available regions:

footer-regions

Copyright¶

Configuring the copyright's colors in Page Builder > Theme Styles > Footer > Copyright:

configure-copyright

You can also toggle "Powered by BigCommerce" and "© current year and store name".

Payment Icons & GeoTrust SSL Seal¶

Configuring the payment icons in Page Builder > Theme Styles > Footer > Payment icons:

configure-payment-icons

Configuring GeoTrust SSL seal in Page Builder > Theme Styles > Footer > GeoTrust SSL:

configure-geotrust

Note that GeoTrust SSL seal only displays if you purchase GeoTrust SSL Certificate from BigCommerce. Read more details here.

Callout Icons¶

cosmetics-callout-icons

To display these icons, drag and drop Callout Icons | PapaThemes Beautify widget to the particular region:

drag-callout-icons

For Cosmetics style choose Style = Large, Icon color = #ecb9e4, Icon size = Original, Text style = Theme.

Select an icon in Icon list. You can also input your custom icon if selecting Icon = Custom then in put the SVG file content to the next text box. Or if selecting Icon = Choose Image, you can upload your image file.

Enter the link in Link text box.

edit-callout-icons

Click Save button to save your changes.

Drag & drop Leaderboard Banner | PapaThemes Beautify widget to a particular region.

Click on the text or button to edit its content.

Banners:

Banner link: Enter the banner link.
Content align: setting content aligment left, center or right.
Banner height: Specify the image height.
Background color: Input the background color.
Image: Upload your image.
Image alt text: Image altenative text.
Image fit: Display image fit to the box or cover the box.
Lazy-load?: Use lazy-load image.

Text:

Description style: Text style, set Theme to use the theme style.
Text color: Text color on desktop.
Text color (mobile): Text color on mobile.

Button:

Button: Show or hide the button.
Button style: set Theme default to use the theme style.

Flex Banners¶

flex-banners

Drag & drop Flex Banners | PapaThemes Beautify widget to a particular region.

configure-flex-banners

Click on the text or button to edit its content.

Image: Upload your image.
Image width: Specify the image width.
Image height: Specify the image height.
Show different image on mobile: Allows displaying a different image on mobile.
Image alt text: Image alternative text.
Image fit: Display image fit to the box or cover the box.
Lazy-load?: Use lazy-load image.
Link: Enter the banner link.
Show text: Toggle text visibility.
Text style: specify text style using the theme style or custom.
Content align: align content left, right or center, top, bottom or middle.
Content padding: Spacing around the text.
Action button: Toggle the button visibility.
Style for theme: pre-styled for some particular theme.
Your theme name: Enter your theme name to allow you to customize its style using CSS.

Spacer | PapaThemes Beautify widget allows adding spacing between widgets. It also supports different spacing on desktop, tablet and mobile.

Customer Reviews Slider (or Testimonials)¶

cosmetics-custom-reviews

Drag & drop Customer Reviews | PapaThemes Beautify widget to a particular region.

configure-customer-reviews

Click on the text or button to edit its content.

Avatar: Choose avatar image or avatar color.
Title: The review title.
Content: The review content.
Rating: The rating stars.
Author: Reviewer name.
Style for theme: pre-styled for some particular theme.
Your theme name: Enter your theme name to allow you to customize its style using CSS.

Setting Up Family Home Page¶

In Page Builder > Theme Styles, if your current style is not Family, click on Family thumbnail to apply:

apply-family-style