How To Build Successful E-commerce Website -Using Astra Theme
Home » Blog » How to Build a Successful E-commerce Website – Using Astra Theme

How to Build a Successful E-commerce Website – Using Astra Theme

E-commerce also stands for electronic commerce which is a buying and selling process via the internet. The first E-commerce concept is started from the year of 1971 by ARPANET is used to arrange cannabis sales between students. Conversely, the most flourishing moment of E-commerce activities began from the year of 2000, which the giant E-commerce website like Amazon.com, eBay started well establish and posts profit from the online buying and selling activities. Ever since develop an E-commerce website had become popular among corporate and also small business enterprises.

Today, to develop an E-commerce could be as simple as a few steps with the ready theme and plugin available from different frameworks. But, simple and fast development never represents quality. After doing a long research on available theme and framework on WordPress, we had found that Astra theme could achieve our requirement and also well-performing in many aspects. Therefore, we would like to do a sharing step by step on how to create a successful E-commerce website with Astra Theme and Woocommerce plugin. We had separated the contents consist of 3 pages as below:

Current Page: What is Astra and How to Setup Astra theme.
Page 2: What is Woocommerce and How to Setup Woocommerce with Astra Pro Function.
Page 3: Paypal Account Setup.

What is Astra?

Astra is one of the WordPress theme developed by a company from India – Brainstorm Force. Astra theme is free and it was objectively built for speed and focus on performance. It had been recommended by a few famous platforms like wpforms, atheme.com as the fastest theme of the year. Astra theme does have 3 types of Pro options that provide extra features for different types of user or agency. The addition features do come with valuable product bundles such as Ultimate Addons for Elementor, Convert Pro plugin and Schema Pro plugin which really could help to speed up the website development process.

Why Choose Astra?

Lite and fast in speed is the most important criteria that every website should have in order to get a better ranking from search engine especially Google. Following by a list of the benefit of using Astra Theme:

  • cut down development time
  • lighter (improve speed and performance of website)
  • compatible with popular page builder (eg:Elementor)
  • SEO friendly (content that is built based on search engine format)
  • easy for non-programmer to build a website
  • easy to install, upload either through dashboard or ftp
  • simple to find documentation, tutorials
  • compatible with plugin
  • compatible with WooCommerce
  • Can show real time live preview

Table of Contents

1.0 Install Astra Theme
2.0 Install Starter Template
3.0 Prepare Material for Your Website
4.0 Astra Pro Features & Functions
5.0 Header
6.0 Footer
7.0 Typography, Colors, Containers
8.0 Customize Scroll to Top button
9.0 Customize Blog
10.0 Tips to Improve Your Website Performance

Login WordPress Dashboard

Before begin you need to access to one WordPress website.

#1: Add /wp-admin at the end of your website URL.
(eg: https://www.yourdomain.com/wp-admin)

#2: Enter your username and password. Once login you will be redirect to WordPress dashboard.

1.0 Install Astra Theme

#1: Login to WordPress dashboard.

#2: Go to Appearance > Theme > Add New

#3: Search for Astra, Install and Activate it.

install-astra-theme-2

2.0 Install Starter Template

Starter templates provide you with a complete site template. All you need to do is add your content and image.

#1: Go to Plugin > Add New from dashboard

#2: Search for Starter Templates.

#3: Install and Activate it.

install-starter-template-1

#4: After that, Go to Appearance > Starter Templates

#5: Browse through the library and select the template without AGENCY label at the top right corner. This is because Agency template only available for Astra Premium Sites.

install-starter-template-2

#6: You can also click the dropdown to filter the templates.

install-starter-template-3

#7: Click on the template you want and the page below will shown. Preview at the left side will preview the whole site in new tab.

#8: Click Import Complete Site at the right.

install-starter-template-4

#9: A pop-out shown as below, Check all the box and Click Import.

install-starter-template-5

#10: Once the installation is completed, pop out shown as below. Click View Site if you want to view your imported site.

install-starter-template-6

3.0 Prepare Material for Your Website

  • Landing page banner – 1920x1100px
  • Homepage banner – 1920x1080px
  • Logo(white and color) – Small: 180x60px, Big: 360x120px, Vertical: 500x500px
  • About us and contact us banner – 1920x1100px, Sub image:1200x675px
  • Account banner – 1920x1080px
  • Carrying logo – 150x150px
  • Blog image – 1920x1280px

4.0 Astra Pro Features & Functions

Astra Pro Addon is a premium plugin that provides more customization options and features to Astra themes. Astra Pro features consist of the navigation menu, blog layouts, site layouts, WooCommerce, sticky header, page header, more color controls, better typography, custom layouts, scroll to top links, footer widget, header sections, more header designs, and spacing control. There are several packages offered by Astra. The Astra Pro package used here is Agency Bundle Package. Every customization option explained includes features in the Astra Pro package.

price-table-for-astra-pro-theme
Astra Pro Annual Price Table

Install Astra Pro

#1: Download plugin from store that you purchase Astra Pro.

#2: Compress the plugin to store as zip file.

#3: Go to Plugins > Add New

astra-pro-addon-1

#4: Click Upload Plugin.

astra-pro-addon-2

#5: Choose your plugin file in zip format.

astra-pro-addon-3

#6: Click Install Now.

#7: Go to Appearance > Astra Options

astra-pro-addon-4

#8: Activate features below Available Astra Pro Modules as your need.

astra-pro-addon-5

#1: Go to Appearance > Customize from dashboard

edit-header-1

#2: Select Header.

edit-header-2


5.1 Site Identity

Site identity allows you to customize your site logo, icon, title and tagline. Besides, site icon is the favicon of your website. Moreover, site title is typically the name of your site and site tagline is a short phrase/sentence that describes your site. Search engines normally will look at your site title and tagline thus it is important for search engine optimisation (SEO).

#1: Go to Header > Site Identity

#2: You can upload your site logo by clicking Select Logo.

edit-header-3

#3: Check the box of Different Logo for Retina Devices and Upload logo. This is because some devices (Apple device) have high pixels than normal device and normal site logo may appear to be too tiny for them. Check Different Logo for Mobile Devices if you have different logo for mobile device.

edit-header-4

#4: You also can adjust site logo width for different devices by select the device beside Hide Controls.

edit-header-5 edit-header-6

#5: Upload your site icon and the icon will appear in tab.

edit-header-7

#6: Add your site title and Check the box to Display Site Title in Header.
Check the box if you want to Inline Logo and Site Title. You also can adjust the font size of the site title.

edit-header-8

#7: Add your site tagline and Check box to Display Site Tagline. You can adjust the font size as well.

edit-header-9

This is the output of display both site title and tagline in header.
edit-header-10

#8: You also can adjust spacing of site identity.

edit-header-11

5.2 Primary Header

Primary Header allows you to customize header layout, width, border bottom size, border bottom color, mobile header layout, header background color, outside menu item color and header space.

#1: Go to Header > Primary Header

#2: You can choose a layout of header where 3 layouts are provided, width of header either content width or full width, customize border bottom size and color. You also can choose the layout of mobile header, background color of header, outside menu item color and customize header space.

edit-header-12 edit-header-13

5.3 Primary Menu

Primary menu allow you to customize menu, submenu, mobile menu, color, typography and spacing of menu, submenu, mega menu heading.

#1: Go to Header > Primary Menu

#2: Check box of Disable Menu will disable primary menu in header.

#3: You also can select last item in menu from dropdown list (either none, search, button, text/html, widget or woocommerce)
You can check the box to hide last item only for menu in mobile, also can take last item outside menu if you want last item have different layout from primary menu.

edit-header-14

#4: You can select submenu container animation (default, slide down, slide up or fade), adjust container border, border color.

#5: Check the box of Submenu divider if you need which allow you to select the divider color.

edit-header-15

#6: You can adjust the menu breakpoint where when it reach the width you set it automatically become mobile menu, add label beside mobile menu, choose the mobile menu style (dropdown, flyout, fullscreen or no toggle).

#7: This is a toggle button. edit-header-16You can choose its style (fill, outline or minimal) and its color.

#8: You can choose the dropdown target (icon or link), adjust border for menu items.

edit-header-17

#9: You can choose mobile menu border color.

#10: You can choose link/text color and background color for normal, hover and active menu and submenu. You also can select the background image for the normal menu. For mega menu column heading, you can select the color for normal and hover. You can also customize typography and spacing for menu, submenu and mega menu column heading.

edit-header-18 edit-header-19

5.4 Above Header / Below Header

This is Astra Pro Addon feature

#1: Go to Appearance > Customize > Header > Above Header / Below Header

#2: You can choose to merge above / below menu with primary menu on mobile. If you choose to merge, above / below  menu will appear inside the primary header toggle button. If you do not merge, separate toggle for above / below menu appear on mobile.

#3: Swap sections on mobile devices – You can swap section of 1 and 2 on mobile.

#4: Layout – you can display above / below header section inline or stacked on mobile.

edit-header-20 edit-header-21

5.5 Sticky Header

This is Astra Pro Addon feature.

#1: Go to Appearance > Customize > Header > Sticky Header

#2: Check box of Stick Primary Header if need header while scrolling through the page.

#3: Check box of Different Logo for Sticky Header if you want to change the logo for sticky header and upload the logo below Sticky Logo.

#4: Check box of Different Logo for retina devices if have any.

#5: You can adjust the sticky logo width.

#6: Check the box of enable Shrink effect if want the sticky header to be shrink while scrolling.

#7: Check box of Hide when scrolling down if want sticky header to be invisible while scrolling.

#8: You can select animation for sticky header (none, slide or fade).

edit-header-22

#9: You can select place to enable sticky header from dropdown list (desktop, mobile, desktop + mobile).

#10: You can customize elements (header, menu, submenu, mega menu heading, content) color above header, elements (header, menu, submenu, mega menu heading, outside item) color for primary header as well as elements (header, menu, submenu, mega menu heading) color below header.

edit-header-23 edit-header-24

5.6 Transparent Header

#1: Go to Header > Transparent Header

#2: Check this box if want to enable transparent header on complete website. After you check this box, there are more options appear.

edit-header-25

#3: Check the box if you want to disable sticky header on it.

edit-header-26

#4: Choose to enable on desktop, mobile or desktop and mobile.

#5: Check the box if want to enable different logo and upload it below Logo.

#6: Check the box if different logo for retina devices and upload logo below Retina Logo.

#7: You can adjust the logo width as well.

edit-header-27

#8: You also can adjust bottom border size and color.

#9: You can choose background overlay color, normal and hover site title color, normal menu, submenu link / text color and background color; hover menu, submenu link color, content normal text and link color, content hover link color.

edit-header-28

#1: Go to Appearance > Customize > Footer from dashboard

edit-footer-1

#2: Select Footer Widgets

edit-footer-2

6.1 Footer Widgets

#1: You can choose from 7 layouts provided or you do not want any widget.

#2: You can choose the width either content width or full width.

#3: You can adjust the padding and top border size.

edit-footer-3

#4: You can adjust top border color, select background color or background image, select content normal title, text and link color, content hover link color, customize typography of widget title and widget content.

edit-footer-4

6.2 Footer Bar

#1: Go to Footer > Footer Bar

#2: Choose from 2 layouts provided.

#3: In Section 1, you can choose to include either text, widget or footer menu. Normally section 1 custom text will include copyright but you can change as you wish. Section 2 dropdown list is the same as Section 1. 

edit-footer-5

#4: You can custom text in section 2, adjust footer bar width (either content width or full width), adjust border size, select border color, select background color or image, normal content text and link color, hover link color, customize content typography, adjust footer space.

edit-footer-6

7.0 Typography, Colors, Containers

Typography
– Go to Appearance > Customize > Global > Typography. You can customize base typography and headings. Refer here for documentation.

Colors
– Go to Appearance > Customize > Global > Colors. You can customize base colors and content color. Refer here for documentation.

Containers
– Go to Appearance > Customize > Global > Container. Refer here for documentation.

8.0 Customize Scroll to Top button

Scroll to top module on Astra Pro Addon help to add scroll to top action on web page.

#1: Go to Appearance > Customize

add-widgets-for-sidebar-4

#2: Select Global

customize-scroll-to-top-1

#3: Select Scroll To Top.

customize-scroll-to-top-2

#4: You can choose to Display on either Desktop, Mobile or Desktop + Mobile.

#5: You can choose scroll to top to align on left or right of page.

#6: You can adjust the icon size (size of icon font) and border radius (apply rounded border for icon background).

#7: You also can change normal and hover icon color and background color.

9.0 Customize Blog

9.1 Add Blog Post

#1: Go to Posts > Add New

#2: Enter title for your post.

#3: Enter body content of post.

#4: Set a featured image at right sidebar (usually shown on top of post and also is post’s thumbnail image).

customize-blog-1

#5: Add tags and categories for post at right sidebar. Categories more broader while tags more specific. Click Publish if done.

customize-blog-2

9.2 Create Separate Blog Page

By default, WordPress display blog post as home page.

#1: Create one home page and one blog page.

#2: Go to Settings > Reading

#3: Choose A static page as your homepage displays. Choose homepage for Homepage and Choose blog page for Posts page.

customize-blog-3

#4: Click Save Changes at the bottom.

#5: Go to Appearance > Customize

add-widgets-for-sidebar-4

#6: Select Homepage Settings

customize-blog-4

#7: Select A static page for Your homepage displays. Select home page for Homepage and blog page for Posts page.

customize-blog-5

#8: Click Publish after done.

9.3 Customize Blog Post

#1: Go to Appearance > Customize

add-widgets-for-sidebar-4

#2: Select Blog.

customize-blog-6

9.3.1 Blog / Archive

Blog Pro module in Astra Pro add more customization options for blog / archive and single post.

#1: Select Appearance > Customize > Blog > Blog / Archive. Archive page is a collection of posts

customize-blog-7

#2: You can choose either full content or excerpt for post content.
Full content – entire written text in post visible in archive page
Excerpt – display short extract of content, default length is 55 words but you can control the word count to display

#3: You can manage the post structure. You can reorder or hide featured image, title & blog meta, publish date, comments, category, author, tag and read time. To reorder simply drag and drop the items. To hide the item, Click the eye icon at the left. If you hide title and blog meta, meta options disappear too.

customize-blog-8

#4: You can adjust the content width of blog page.

customize-blog-9

#5: You can set typography for Archive title and Post title.

customize-blog-10

9.3.2 Single Post

#1: Go to Appearance > Customize > Blog > Single Post

customize-blog-11

#2: You can choose to display or hide featured image, title and meta by click on the eye icon.

#3: You also can display author information.

#4: It will load previous blog post below current post.

#5: You also can remove featured image padding but only work for Boxed and Content Box container layout.

10.0 Tips to Improve Your Website Performance

10.1 Save Image for Web using Photoshop

Things to take note:
Website speed is important for SEO, thus image need to be optimize before upload so that it won’t affect much on the loading speed of website. First you need to choose right format where colourful image should save as jpeg while transparent image save as png. Next, you need to use image compression tool. We suggest Photoshop where you can save save image for web to reduce file size without reducing the quality of image.

#1: Open your image in Photoshop.

#2: Go to File > Save for Web

prepare-material-save-image-for-web-using-photoshop-1

#3: A pop out shown, Select appropriate format and Click Save. Your image had been compressed.

prepare-material-save-image-for-web-using-photoshop-2

10.2 Add Image Alt Text 

Image alt text is important for search engine to crawl. It appears to describe the image if image fail to load on the webpage.

Take note for image alt text:
You must describe the image specifically, use keywords appropriately but not every single image which might cause keyword stuffing, alt text should not more than 125 characters and no special characters.

#1: Login to WordPress dashboard.

#2: Open post or page to edit the content.

#3: Click on the image to open Image Settings in Block tab of right sidebar.

prepare-material-add-image-alt-text-1

#4: Add appropriate Alt Text and Click Update.

prepare-material-add-image-alt-text-2

#5: Repeat the steps from 3 – 4 for all images in the website.

10.3 Add Heading Tags

Headings for web pages are important for readability and help to add SEO value. It shows the topic of a particular page which helps search engines to find the page easily when people search for it. It also used to differentiate heading and subheading from all the text in content. There are 6 heading tags size. H1 normally used for title of webpage, H2 breaking H1 contents into bits and H3 breaking H2 contents.

Take note for heading tags:
Normally H1 to H3 is sufficient enough for a web page unless the page is text heavy, maintain hierarchy level while using heading tags and don’t skip a level and do not use header tags just only for some text to stand out.

#1: Login to WordPress dashboard.

#2: Open post or page to edit the content.

#3: Highlight the text and Click ‘Paragraph’ options in toolbar.

prepare-material-add-heading-tags-in-wordpress

#4: Pick from six heading tags in dropdown list shown. The text appears as heading now.

10.4 Add Outbound Link

Outbound link is the link that link your website to others website. It is important to increase the trust and quality of the website. There are 2 types of outbound links where Nofollow tell search engine not to follow the link and Dofollow pass ranking power from your website to targeted page.

Things to take note:
Insert relevant natural outbound link into webpage (don’t force link), ensure link open in new tab so that reader can come back to your site later and best to have but not too much (may cause distraction and push visitor away from your site).

#1: Login to WordPress dashboard.

#2: Open post or page to edit the content.

#3: Highlight text and Click icon below in toolbar.
prepare-material-add-outbound-link-1

#4: Toolbar below appears below the text. Click settings icon.

prepare-material-add-outbound-link-2

#5: A pop out shown. Add the url link in URL field. Check box of Open link in new tab. Click Add Link and outbound link created.

prepare-material-add-outbound-link-3

10.5 Check Mobile Version

#1: Go to Appearance > Customize 

#2: Click the mobile icon at bottom. You can view the live preview at right side.

check-mobile-version

#3: Check for every page. Check on this website for mobile-friendly.



To continue reading, click on the page buttons below…

1 thought on “How to Build a Successful E-commerce Website – Using Astra Theme”

  1. Pingback: How to Make a Good Website in 5 Steps? - Latitude Innovation Sdn Bhd

Leave a Comment

Your email address will not be published. Required fields are marked *

15585

DISCOUNT VOUCHER

Subscribe now to get voucher for website package

15856

Great Deal

RM500

Scroll to Top