Afficart Setup Guide – Install & Configure Your Blogger Store

This Afficart setup guide explains how to install the Blogger template, add products, configure WhatsApp and Email checkout, change the currency, manage shipping options, customize widgets and prepare your online store for use.

Most Afficart settings can be managed from the Blogger Layout section. You only need to edit the theme HTML for specific settings such as template installation, currency configuration and verification tags.

Table of Contents

1. Before You Start
2. Install the Afficart Template
3. Change the Theme Color
4. Configure the Navigation Menu
5. Add Products to Afficart
6. Set Up WhatsApp & Email Checkout
7. Configure Payment, Shipping & Currency
8. Customize Homepage & Store Widgets
9. Set Up Product Labels, Related & Recent Products
10. Configure the Recently Sold Widget
11. Update Footer, Ads & Partner Logos
12. Add Social Media Profiles
13. Use the Desktop Theme on Mobile
14. Configure Search Description & Verification Tags
15. Afficart Setup FAQ

Live Demo

1. Before You Start

Before installing Afficart, back up your existing Blogger theme. This gives you a copy that can be restored if you need to return to your previous design.

1. Open your Blogger Dashboard.
2. Select the blog where you want to install Afficart.
3. Go to Theme.
4. Open the menu next to Customize.
5. Select Backup and download your current theme.
6. Keep the downloaded XML file somewhere safe.

Tip: If you are replacing another custom Blogger template, save any important widget content or custom code separately before installing the new theme.

2. Install the Afficart Template

For a clean installation, use the XML copy-and-paste method.

1. Extract the downloaded Afficart ZIP file using your computer's built-in extractor, WinRAR, 7-Zip or a similar tool.
2. Locate the Afficart template file ending in .xml.
3. Open the XML file in a plain-text editor such as Notepad, Notepad++ or TextEdit.
4. Select the entire XML code and copy it.
5. Open Blogger Dashboard → Theme.
6. Open the menu next to Customize and select Edit HTML.
7. Select all existing theme code and replace it with the Afficart XML code.
8. Click Save.
9. Open Layout after installation and begin configuring your store widgets.

Avoid using Microsoft Word or another formatted document editor to open the XML file because it may modify characters or formatting inside the template code.

3. Change the Theme Color

You can change supported Afficart colors without editing the template code.

1. Go to Blogger Dashboard → Theme.
2. Click Customize.
3. Open the available color settings, such as Advanced or Main Color Theme.
4. Select a color from the palette or enter your preferred color value if the option is available.
5. Click Save.

Choose colors with enough contrast between text, buttons and backgrounds so important store information remains easy to read.

4. Configure the Navigation Menu

Afficart's navigation menu is managed from the Blogger Layout section.

1. Go to Blogger Dashboard → Layout.
2. Find the Navigation Menu widget and click Edit.
3. Add your menu title and destination URL.
4. Use normal titles for main menu links.
5. Add one underscore before a title to create a first-level submenu item.
6. Add two underscores before a title to create a second-level submenu item.
7. Arrange submenu links directly below their parent menu item.
8. Save the widget and check the menu on your website.

Example:

Shop
_Electronics
__Mobile Phones
__Laptops
_Fashion

5. Add Products to Afficart

Afficart products are created as Blogger posts. Use the product code generator to create the required product layout without manually writing the HTML.

1. Prepare your product title, images, price, variants and description.
2. Upload your product images to Blogger and obtain their image URLs.
3. Open the Product Post Generator.
4. Enter the product information requested by the generator.
5. Add options such as sizes, colors or other variants when required.
6. Generate the product HTML and copy the complete code.
7. Go to Blogger Dashboard → Posts → New Post.
8. Switch the post editor to HTML View.
9. Paste the generated product code.
10. Add the product title, appropriate Blogger labels and a unique search description.
11. Preview the product before publishing.

Use consistent product images, accurate prices and clear product descriptions. Avoid adding options or specifications that do not apply to the actual item.

6. Set Up WhatsApp & Email Checkout

Afficart supports two order submission methods: WhatsApp checkout and Email checkout. Configure both with your own contact information before accepting orders.

1. Go to Blogger Dashboard → Layout.
2. Find the All Settings widget and click Edit.
3. Replace the default WhatsApp number with your business WhatsApp number.
4. Replace the default email address with the email address where you want to receive orders.
5. Review and customize the available cart and checkout message text.
6. Save the widget.
7. Add a test product to the cart and test both WhatsApp and Email checkout before launching your store.

Important: WhatsApp and Email are the methods used to send the customer's order information. They are not payment gateways themselves.

7. Configure Payment, Shipping & Currency

Payment Methods

Use the relevant payment widget to show customers which payment methods your store accepts.

1. Go to Blogger Dashboard → Layout.
2. Edit the Payment Methods or corresponding store settings widget.
3. Keep only the payment methods you actually accept.
4. Update payment names, logos or supporting information where the widget allows it.
5. Save your changes.

You may display methods such as PayPal, Cash on Delivery or bank transfer if you actually offer them. Displaying a payment method does not automatically integrate that payment gateway with Afficart.

Shipping

If your version of Afficart includes shipping settings:

1. Open the appropriate shipping or payment settings widget.
2. Enable or disable shipping charges as required.
3. Add the shipping service name.
4. Enter the applicable shipping fee.
5. Save and test the final cart total.

Make sure your shipping fees and policies match what you actually charge customers.

Change the Store Currency

If the currency is configured inside the template code:

1. Go to Blogger Dashboard → Theme.
2. Open the menu next to Customize → Edit HTML.
3. Search the theme code for SimpleCart.currency or the existing currency configuration block.
4. Update the currency code, name and symbol with the values required for your store.
5. Save the template.
6. Check several product prices and the cart total after making the change.

For example, a currency configuration may contain values for:

Currency Code: USD
Currency Name: US Dollar
Currency Symbol: $

Do not change decimal precision unless your chosen currency genuinely requires a different number of decimal places.

8. Customize Homepage & Store Widgets

Most Afficart homepage content can be managed from Blogger Dashboard → Layout without editing HTML.

Depending on your template version, you may find widgets for:

• Top Announcement Bar
• Homepage Product Slider
• Shop by Category
• Trust or Service Badges
• Promotional Banners
• Recent Products
• Products by Label
• Advertisement Areas
• Contact or Call Us
• Partner Logos
• Footer Content

Homepage Product Slider

1. Go to Layout.
2. Find Homepage Product Slider and click Edit.
3. Replace the title and caption.
4. Add the correct product or category URL.
5. Replace the image with your own promotional image.
6. Save and check the slider on desktop and mobile.

Use images with consistent dimensions to keep the slider visually balanced.

9. Set Up Product Labels, Related & Recent Products

Blogger labels are used to organize Afficart products and can also help populate related and category-based product sections.

1. Open a product post in Blogger.
2. Find Labels in the post settings.
3. Add a relevant category label such as Electronics, Fashion or Furniture.
4. Use the same label on products belonging to the same category.
5. Publish or update the post.

Products that share relevant labels can be used for related-product sections.

Recent Products by Label

1. Go to Blogger Dashboard → Layout.
2. Edit the applicable recent-products or products-by-label widget.
3. Enter the exact Blogger label used on your product posts.
4. Save the widget.

If a section remains empty, verify that published products use the exact same label spelling.

10. Configure the Recently Sold Widget

If you use the Recently Sold Items widget, configure it from:

Blogger Dashboard → Layout → Recently Sold Items

Update the available product information and settings according to your store. Use genuine store information and avoid presenting fabricated purchases or customer activity as real sales.

11. Update Footer, Ads & Partner Logos

Open Blogger Dashboard → Layout and review the widgets near the bottom of your layout.

Footer

Update your store information, useful links, contact details and any other footer content supplied by the template.

Advertisements

Edit the available advertisement widgets and replace demo banners with your own image, destination URL or approved advertising code.

Partners

Replace demo partner logos with your own business partners, brands or supported store logos. Only display logos that you are permitted to use.

12. Add Social Media Profiles

1. Go to Blogger Dashboard → Layout.
2. Find the Follow Us widget and click Edit.
3. Edit or add a link.
4. Enter the supported social network name, such as Facebook or Instagram.
5. Paste the complete URL to your social profile.
6. Save the widget.
7. Open your store and test each social link.

Some template icons depend on the exact social network name, so follow the naming format already used in the widget.

13. Use the Desktop Theme on Mobile

To make sure the responsive template displays correctly on mobile devices, set Blogger to use the desktop version of the theme.

1. Go to Blogger Dashboard → Theme.
2. Click the drop-down menu beside the Customize button.
3. Open Mobile settings.
4. Change the setting from Mobile to Desktop.
5. Click Save.

This allows the template's responsive design to control the mobile layout instead of Blogger's separate mobile theme.

14. Configure Search Description & Verification Tags

Enable Blogger Search Descriptions

Use Blogger's built-in search-description feature instead of manually adding description meta tags for each page.

1. Go to Blogger Dashboard → Settings.
2. Scroll to Meta tags.
3. Enable Search description.
4. Add a concise description for your store homepage.
5. Save the setting.

After this feature is enabled, a Search description field becomes available when editing posts and pages. Write a unique description for important product posts instead of using the same text everywhere.

Google & Bing Verification

If you use the HTML meta-tag verification method for Google Search Console or Bing Webmaster Tools, open:

Theme → Edit HTML

Then search for:

<!-- Customize Meta Tags -->
<meta content='GOOGLE-META-TAG-HERE' name='google-site-verification'/>
<meta content='BING-META-TAG-HERE' name='msvalidate.01'/>

Replace only the placeholder verification values with the codes provided by the relevant service, then save the template.

You do not need to add a meta keywords tag. Concentrate on useful product titles, unique descriptions, clear headings, descriptive image alt text and accurate store content.

15. Afficart Setup FAQ

How do I install Afficart on Blogger?

Extract the Afficart package, open the template XML file in a plain-text editor, copy the complete code and paste it into Blogger Dashboard → Theme → Edit HTML. Back up your existing theme before replacing it.

How do I add products to Afficart?

Create your product using the product post generator, copy the generated HTML and paste it into a new Blogger post using HTML View. Add the product title, labels and search description before publishing.

How does Afficart WhatsApp checkout work?

Customers add products to the cart and can submit their order information through WhatsApp. Your business WhatsApp number is configured in the template's store settings.

Does Afficart support Email checkout?

Yes. Afficart also allows customers to submit order information through Email. Configure the destination email address in the All Settings widget.

Does Afficart automatically process PayPal payments?

No automatic PayPal payment integration should be assumed from the payment-method display. Afficart's primary order submission options are WhatsApp and Email. You can display the payment methods your business accepts and arrange payment according to your store process.

How do I change the currency in Afficart?

Open Theme → Edit HTML, locate the existing currency configuration and replace the currency code, name and symbol with the values required for your store. Save the template and test product and cart prices afterward.

Why are related products not appearing?

Check the Blogger labels assigned to your products. Related-product sections depend on products sharing relevant labels, so use consistent label names and make sure the products are published.

Where can I change the Afficart homepage sections?

Most homepage sections are configured from Blogger Dashboard → Layout. Edit the corresponding slider, category, banner, product, footer or other available widgets.

Need Help Setting Up Your Template?

Prefer to have everything configured for you? We can help install and set up your Blogger template, including menus, homepage sections, widgets, colors and other available settings.

Get Setup Help