Data & Email
Data & Email Configuration
In this section, you will set up your store's checkout system and connect it with Google Sheets to
seamlessly
capture all order data. Every time a customer places an order, the details will be automatically stored in
Google Sheets, making it easy to track, manage, and analyze your sales.
You can also configure automated emails to be sent to both customers and the admin whenever an order is
placed.
These emails can be customized and delivered through SMTP integration, ensuring timely notifications and
professional communication.
Below, you’ll find step-by-step details on how to:
- Connect your checkout system to Google Sheets
- Access and manage order data in real time
- Integrate with SMTP to send automated confirmation and notification emails
Export Data
Overview — Checkout → Google Sheets
This guide explains how to capture every new order from your Vivid checkout and store the details
in a Google Sheet. Each
order is automatically logged as rows (one per product line), with a
persistent Order ID
generated for tracking and email notifications.
checkout.js →
test
→ optionally enable email automation.
Step 1 — Create & configure the Google Sheet
- Open Google Sheets and sign in.
- Click + Blank to create a new sheet.
- Rename the document title and the sheet tab name (bottom-left).
Important: The sheet tab name is case-sensitive — it must exactly match later in the script (e.g.Orders Data). -
Insert headers from
A1→Q1:Timestamp|OrderID|Name|Email|Phone|Shipping Address|Billing Address|Product|Variant|Qty|Price|Image|Payment Method|Notes|Subtotal|Total Shipping|Total.
Example Fields
Configuration
- Locale / Currency: File → Spreadsheet settings → adjust locale for currency formatting.
- Protect headers: Data → Protect sheets and ranges → lock row 1 (optional).
- Freeze header row: View → Freeze → 1 row.
Header row A1→Q1 with frozen top row.
Step 2 — Add the Google Apps Script
- From the Sheet menu: Extensions → Apps Script.
- Remove any existing code from the editor.
- From your
Vivid Premium themepackage → open theAssetsfolder. - Locate
Google Sheets.jsand copy all code inside it. - Paste this code into the Apps Script editor.
- Replace placeholders like
Your_Sheet_IDandYour_Sheet_Nameas instructed in comments.
Configuration
- Get Sheet URL In the Header of your browser where the URLs show get URL of the sheet
(
https://docs.google.com/spreadsheets/d/<SHEET_ID>/edit). - Get Sheet ID: From your sheet URL
(
https://docs.google.com/spreadsheets/d/<SHEET_ID>/edit) the string between the/d/and/edit?this<SHEET_ID>is your sheet ID. - Sheet Name: Must exactly match your sheet tab title (case & spacing sensitive).
Example
Paste the provided Google Sheets.js code here.
Step 3 — Deploy as Web App
- Click Deploy → New deployment.
- Choose Web app as deployment type.
- Execute as: Me (keeps your account permissions).
- Who has access: Anyone (required for checkout to send data).
Note: Secure with token in advanced configs. - Click Deploy → Copy the generated Web App URL.
Configuration
- Save the Web App URL — you’ll paste it into Blogger’s
checkout.js. - If you update the script later, redeploy with New version to refresh the endpoint.
Deployment screen — copy the Web App URL.
Step 4 — Authenticate your Google Account
- Before deploying, the script requires authorization to access your Google Sheet.
- Click Run → doPost / test function once in Apps Script.
- Approve permissions when prompted. This ensures the script can edit the sheet and insert images.
- Once authorized, proceed to Step 3 to deploy as Web App.
Configuration
- Ensure your Google account is logged in and authorized for Apps Script edits.
- Authorization is mandatory before deploying the Web App; otherwise, POST requests will fail.
Authorize the script to access your Google Sheet before deployment.
Step 5 — Connect Web App URL to Blogger checkout
- In
Bloggergo toThemethan click onCUSTOMIZEthan clickEdit Htmlthan in the themeSource Codesearch for this exact textYour_App_Script_URLand than replace it with yourApp Script Urland than clickSave - Search (
CTRL+F) forYour_App_Script_URL. - Replace it with your Web App URL (copied in Step 3).
- Save template → Test a checkout → Verify rows in Google Sheets.
Configuration
- In Blogger → Theme → CUSTOMIZE → Edit HTML.
- Ensure your headers A1→Q1 exist before testing.
- Check that order rows + product images populate in the sheet.
Replace placeholder with your Web App URL.
Step 6 — Convert Email column to People Chips
- In
Google Sheetyour email will display as simple text by default like →youremail@yourstore.com - To make it a
Email Cardin the Sheet Follow the following steps. - Hover over the header cell of column
D (Email). - After hover in header of the column to the right of the column name a dropdown icon show →
- Click the dropdown icon → Scroll to down hover the second last option → Smart Chips → Select Convert to People Chip.
- All existing and future emails will now appear as interactive People Cards. Hovering will show owner info if available.
Configuration
- Ensure you convert emails before sending live orders to benefit from People Chips.
- This enhances visibility and makes email management in Google Sheets easier.
Email column converted to People Chips.
Step 7 — Grant Image permissions
- In
Google Sheetall images which URL will show asImagesautomatically. - The Google will need your approvel to show urls as images.
- Click any cell in the
Imagecolumn (Google Sheets will prompt for permission). - Click Allow and refresh the sheet (if there is showing
Error Loadingin Images ). - All product images from future orders will now display as thumbnails instead of plain URLs.
Configuration
- Ensure permission is granted for all images to display correctly.
- If some images still show URLs, click the cell and refresh again.
Grant permission for product images in the sheet.
- ✔ The included Apps Script in
Assets/Sheets.jsis fully tested and ready to use with yourVivid Premium theme. - ⚠ Always double-check
Your_Sheet_IDandYour_Sheet_Name— they must match exactly (case & spacing sensitive). - ⚠ If it doesn’t work: check for duplicate scripts, wrong Sheet ID, or mismatched Sheet Name.
- In you
Sheetsthere must not any duplicate sheet withSame Nameor with sameApp Script Code. - If any other sheet have same
Js Codethan this will not work perfectely. - ⚠ If edits don’t reflect: redeploy script as New version and update Blogger template with the new Web App URL.
- ✔ Each order generates a unique
Order IDin Google Sheets — do not reset or delete the script properties unless you want to restart numbering. - ✔ Avoid renaming or deleting columns after integration — the script depends on header positions
(A1 → Q1). - ⚠ Do not create multiple
Sheetsor scripts with the sameNamein the sameGoogle account— it can cause conflicts. - ✔ Always authorize your Google account when prompted — without permissions, the script cannot append rows or insert images.
- ✔ The Image column requires permission: click a cell once, grant access, and refresh to display product thumbnails.
- ✔ Emails can be converted to People Chips for better visibility — do
this on the
Emailcolumn after setup. - ⚠ Large orders with multiple items will generate multiple rows — ensure you scroll down in your sheet to see all product entries.
- ✔ Currency prefix (default
Rs) can be changed in the script if your store uses USD, EUR, etc. - ⚠ When testing: place a real test order from checkout to confirm data flow — do not rely only on the
testAppendData()function. - ✔ If your Blogger template shows console errors: re-check the fetch URL in
checkout.jsmatches your latest Web App URL. - ⚠ Sheets quota: Free Google accounts have limits
(e.g., ~500k cells per sheet)— archive old orders into another sheet if you hit limits.
Email Integration — Gmail Notifications
Overview — Automatic Order Emails
This guide explains how to automatically send order confirmation emails to your customers and notifications to the admin whenever a new order is received via your Vivid Theme checkout. Using Gmail's SMTP through Apps Script ensures reliable delivery of HTML-formatted emails directly from your Google account.
Step 1 — Access the Gmail Integration Script
- From your Vivid Premium theme package, open the
Assetsfolder. - Locate
Gmail Integration.jsand copy all the code inside it. - Open Google Sheets → Extensions → Apps Script in the Sheet where orders are being logged.
- Remove any existing code in the editor and paste the Gmail Integration script.
- Replace placeholders like
Your_Sheet_ID,Your_Sheet_Name,adminEmail, andsenderNameas instructed in the script comments.
Configuration
- Admin Email: The email that will receive notifications about new orders.
- Sender Name: Name that appears in the "From" field for all outgoing emails.
- Customer Email: Automatically fetched from the order form submitted by the customer.
Step 2 — Why Use Gmail SMTP?
Gmail SMTP via Google Apps Script is used for sending emails directly from your Google account. Benefits include:
- Reliable delivery with Gmail's trusted servers.
- Support for HTML email templates, including images, tables, and inline styling.
- Automated sending to multiple recipients (customer + admin).
- Integration with your existing Vivid checkout workflow for seamless notifications.
@gmail.com accounts are supported by default. For business emails, upgrade to Google Workspace.
Step 3 — Gmail Daily Limits & Precautions
- Free Gmail accounts can send up to 500 emails per day.
- Google Workspace accounts can increase this limit to 2,000 emails per day.
- Sending limits are shared across all Apps Script services under your account.
- Do not exceed limits to avoid temporary email sending restrictions.
- Always test with a few sample orders before going live.
Configuration
- Ensure that
data.emailis correctly captured in the checkout form. - Verify that
adminEmailis a valid Gmail address to receive notifications. - Customize
senderNamefor professional branding in emails.
Step 4 — Deploying the Script
- Click Deploy → New Deployment in Apps Script.
- Choose Web App as the deployment type.
- Execute as: Me (keeps your account permissions).
- Who has access: Anyone (required for checkout to trigger email sending).
- Click Deploy and copy the generated Web App URL.
Configuration
- Paste the Web App URL in your Blogger theme's
checkout.jswhere instructed. - After deployment, test sending emails by placing a test order.
Step 5 — Email Template & Customization
The email template is fully HTML-enabled and includes:
- Customer name, email, phone number.
- Billing & shipping addresses.
- Order summary with products, quantity, variant, price, and total.
- Dynamic images embedded using
=IMAGE("URL")syntax. - Stylized buttons and "What's Next?" order processing steps.
Configuration
- You can modify the HTML structure in
Gmail Integration.jsfor branding. - Keep variable names intact to ensure correct data mapping.
- Inline CSS ensures proper rendering across all major email clients.
Step 6 — Testing & Verification
- Place a test order from your checkout page.
- Verify that the customer receives the confirmation email.
- Verify that the admin receives the notification email.
- Check all HTML elements render correctly, including images and product details.
- Check spam/junk folder for the first test; mark as "Not Spam" if needed.
- Review email limits if sending to multiple test emails.
- ✔ Use only one Gmail account per Apps Script to avoid conflicts.
- ✔ Free Gmail accounts have strict sending limits; upgrade to Workspace for higher limits.
- ✔ Do not modify function names in the script; they are required for automation.
- ✔ Always back up your sheet and script before making edits.
- ✔ Test with small orders to ensure accurate email formatting.
- ✔ Ensure your product images have correct URLs; placeholder images will appear otherwise.
- ✔ Inline CSS is essential — do not move styles to external CSS.
- ✔ Double-check admin email for typos to avoid missed notifications.
- ✔ Customer emails must be valid to prevent sending errors.
- ✔ Use meaningful
senderNamefor professional communication. - ✔ Do not exceed daily sending limits to prevent Gmail account suspension.
- ✔ Re-deploy the script after any edits to apply changes.
Vivid Theme Settings
Preview
Theme Options
Configure your Vivid ecommerce store settings using the options below
Shipping Rate FREE
You can configure how shipping costs are calculated for your store to ensure accurate charges for your customers. Choose one of the following options:
Per Item: Shipping cost is calculated for each individual item in the cart. For example, if a customer adds three different products, each product will incur its own shipping fee.
Per Quantity: Shipping cost is calculated based on the total quantity of all products in the cart. For example, if a customer orders multiple units of the same product, the shipping fee will increase proportionally.
Selecting the appropriate method helps you manage shipping costs efficiently and provide a transparent checkout experience for your customers.
Blogger Configuration
In the Theme Options LinkList widget, set the shipping rate:
Shipping Cost FREE
Define the base shipping cost for your store, such as Rs 150 or $2. This amount will be applied based on the Shipping Rate setting (Per Item or Per Quantity). Setting a clear shipping cost helps customers understand the total cost at checkout and ensures consistency in pricing.
Blogger Configuration
In the Theme Options LinkList widget, set the shipping cost:
Related Products
Enhance your product pages with a slider showcasing related products, matched by labels or tags. You can control the number of related products displayed, such as 3, 6, 7, or up to 20. This feature encourages customers to explore more items, potentially increasing sales and engagement.
Blogger Configuration
In the Theme Options LinkList widget, set the number of related products:
Shop Page Items
Customize the display of your shop page (/p/shop.html) by setting the number of products shown per page, such as 8, 12, 15, or 32. Alternatively, you can choose to display all products on a single page for a seamless browsing experience. This flexibility ensures your shop page aligns with your store’s aesthetic and user preferences.
Blogger Configuration
In the Theme Options LinkList widget, set the number of shop page items:
Comments Limit
Control the number of comments displayed initially on your product pages, such as 7, 9, or 20. If more comments are available, a "Load More" button will appear, allowing users to view additional comments. This feature helps manage comment visibility and improves page load times.
Blogger Configuration
In the Theme Options LinkList widget, set the comments limit:
Default Size Chart
Set a default size chart image to be displayed across all products unless a product-specific size chart is provided. This ensures customers have access to sizing information, improving their shopping experience. Configure the image URL in the Size Guide section for seamless integration.
Blogger Configuration
In the Theme Options LinkList widget, set the default size chart image URL:
Currency
Control the currency symbol displayed across your entire store, including product listings, checkout, related products, and the shop page. This ensures that all prices are consistent and match the currency you want your customers to see.
For example: Rs for Pakistan, $ for USD, € for Euro, £ for British Pound, etc. You only need to set it once in the Theme Options, and it will be applied everywhere automatically.
Note: If you leave this option empty, the theme will use the default currency defined inside your store’s hidden settings.
Blogger Configuration
To set your currency:
- Go to Blogger Dashboard → Layout → Theme Options (LinkList widget).
- Locate the option labeled Currency.
- Edit the field and enter your preferred currency symbol (e.g., Rs, $, €, £).
- Save the changes.
Once saved, the chosen currency will be applied globally to all prices shown on your store.
Payment Options
Configure payment methods for your online store (Premium feature only)
Bank Transfer
Enable direct bank transfers by providing your bank account details, including Account Name, Account Number, Bank Name, and IFSC Code. This method allows customers to make secure payments directly to your bank account. You can enable or disable this option as needed.
Blogger Configuration
In the Bank Transfer LinkList widget, configure your bank details:
EasyPaisa
Offer mobile payments through EasyPaisa by configuring your account details, including Account Name, Account Number, and a QR code image URL. This convenient payment method caters to customers who prefer mobile-based transactions. Enable or disable this option as needed.
Blogger Configuration
In the EasyPaisa LinkList widget, configure your account details:
UPI Transfer
Add multiple UPI accounts (e.g., Paytm, PhonePe, GPay) by specifying account names and their respective QR code image URLs. This flexible option allows you to offer unlimited UPI payment methods, catering to a wide range of customer preferences. Enable or disable this option as needed.
Blogger Configuration
In the UPI Transfer LinkList widget, configure your UPI accounts:
PayPal
Integrate PayPal for secure international payments by adding your PayPal account link. Customers will be redirected to PayPal for payment processing, ensuring a trusted and seamless transaction experience. Enable or disable this option as needed.
Blogger Configuration
In the PayPal LinkList widget, configure your PayPal account link:
Vivid Header Settings
Header Configuration
Customize your Vivid ecommerce website's header components to create a professional and user-friendly navigation experience. The header includes essential elements such as alert messages, main navigation menu, logo, secondary menu, and action buttons. Each component can be configured through Blogger's intuitive interface, allowing for seamless integration and customization.
Preview
Alert Message
The Alert Message feature allows you to display prominent notifications at the top of your website, ideal for announcements, promotions, or important updates. This message appears site-wide, ensuring visitors see critical information immediately upon loading the page. It's particularly useful for demo sites, sales alerts, or policy changes, helping to engage users and guide their experience effectively.
Blogger Configuration
To set up the Alert Message, use the dedicated HTML widget in the "Alert Message" section of your Blogger layout. Enter your message in the content field, and it will be displayed professionally across your site. This simple configuration ensures your message is visible without requiring advanced coding skills.
Preview
Main Menu
The Main Menu serves as the primary navigation for your ecommerce site, allowing users to easily access key pages and categories. It supports multi-level dropdowns for organized content structure, making it simple for customers to browse products, view blogs, or contact support. Proper configuration enhances user experience, reduces bounce rates, and improves site accessibility.
Blogger Configuration
Configure the Main Menu using a LinkList widget in Blogger. Add links with the slash syntax for dropdowns, ensuring logical organization. This setup provides a responsive, user-friendly navigation system that adapts to various screen sizes.
Preview
Logo
Your website logo is a crucial branding element that appears prominently in the header, representing your ecommerce business. Using Blogger's default Header widget, you can upload a high-quality image that scales responsively across devices, ensuring brand consistency and professional appearance.
Blogger Configuration
Access the Header widget in your Blogger layout to upload or link your logo image. Opt for "Show logo instead of title and description" to prioritize visual branding over text, creating a clean and modern header design.
- Navigate to Layout in Blogger dashboard
- Locate and edit the Header widget
- Upload image or provide URL
- Select logo display option
- Save changes
Preview
Secondary Menu
The Secondary Menu provides additional navigation options in a horizontal, scrollable format, perfect for highlighting promotions, categories, or quick links. It supports unlimited items without dropdowns, offering a streamlined way to direct traffic to important pages while maintaining a clean header layout.
Blogger Configuration
Implement the Secondary Menu via a LinkList widget, adding as many links as needed. This flexible setup allows for easy updates and ensures the menu remains accessible on mobile devices through horizontal scrolling.
Preview
Action Button
Action Buttons are eye-catching call-to-action elements in your header, designed to drive user engagement such as shopping, signing up, or contacting support. Using a LinkList widget styled as buttons, you can create prominent links that encourage conversions and improve overall site interactivity.
Blogger Configuration
You can set up an Action Button using a LinkList widget. The first item in the LinkList will automatically be converted into a single button, using its text as the button label and its link as the destination. Any additional items added to the widget will be ignored. This ensures that only one Action Button is displayed, keeping the design clean and focused.
Preview
Hero Slider
The Hero Slider is a full-width, visually stunning slider placed immediately after the header, ideal for showcasing featured products, promotions, or announcements. It grabs visitors' attention and sets the tone for your store. Use shortcodes in the format [vividSlider/value/count] to display posts, where 'value' can be 'recent' for the latest posts, 'random' for a random selection, or a specific label (e.g., 'Creams' or 'Hand Bags', matching exact capitalization and spaces). The 'count' specifies how many posts to show in the slider.
PREMIUM FREE (Limited)Blogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Banner Images
Banner Images create eye-catching promotional sections with images, titles, descriptions, and call-to-action buttons. Perfect for highlighting sales, new arrivals, or special offers, this component uses Blogger's default Image widget. Upload an image, add a title and description, and include a link—the link is automatically styled as a button to drive user engagement. Place multiple banners in a grid layout to maximize visual impact on your homepage.
PREMIUMBlogger Configuration
Configure Banner Images using Blogger's Image widget:
- Go to Layout in your Blogger dashboard.
- Add or edit an Image widget in the desired homepage section.
- Upload your banner image or provide an image URL.
- Enter a title and description for the banner.
- Add a link to direct users (this will become a button).
- Save the widget. Repeat for additional banners.
Preview
Post List
The Post List component displays blog posts in a horizontal slider, allowing users to browse content seamlessly. Use shortcodes in the format [vividPostList/value/count], where 'value' can be 'recent', 'random', or a specific label (e.g., 'Mask'), and 'count' sets the number of posts. This is ideal for showcasing related products or recent posts in a compact, scrollable format on your homepage.
PREMIUMBlogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Categories
The Categories component displays your product categories in a responsive slider, making navigation intuitive for users. Each category includes an image and name, linking to the corresponding posts. This uses Blogger's LinkList widget: In the 'Text' field, include an HTML image tag like <img src="image-url"> followed by the category name, and in the 'Link' field, add the category URL. Add unlimited categories to create a comprehensive, scrollable showcase.
FREE PREMIUMBlogger Configuration
Configure the Categories section using a LinkList widget:
- Navigate to Layout in your Blogger dashboard.
- Add or edit a LinkList widget in the homepage layout.
- In the 'Text' field, enter:
<img src="your-image-url"> Category Name. - In the 'Link' field, enter the URL of the category page.
- Add as many categories as needed.
- Save the widget to display the slider.
Preview
Product Services
Product Services highlight your store’s key features, such as free shipping, easy returns, or secure payments, in a professional grid layout. This builds customer trust by showcasing your value propositions. Use Blogger widgets to add icons (via Font Awesome or images), titles, and descriptions for each service. Display 4 services for a balanced and impactful presentation.
FREE PREMIUMBlogger Configuration
Configure Product Services using HTML or Image widgets:
- Go to Layout in your Blogger dashboard.
- Edit an Image widget on the homepage layout.
- For icons, use Font Awesome classes (e.g.,
<i class="fas fa-truck"></i>) or upload an image. - Add a title and description for each service.
- Repeat for each service (4-6 recommended).
- Save the widget to display the grid.
Preview
Featured Post
The Featured Post component showcases up to 4 posts in a clean, professional grid, perfect for highlighting best-sellers, new arrivals, or special promotions. Use the shortcode [vividFeactured/value], where 'value' is 'recent', 'random', or a specific label (e.g., 'Perfumes'). The count is fixed at a maximum of 4 to maintain a balanced layout, ensuring focus on your top content.
PREMIUMBlogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Product Grid
The Product Grid displays posts in a responsive grid layout, ideal for product catalogs, galleries, or collections. Use the shortcode [product-grid/value/count], where 'value' is 'recent', 'random', or a label, and 'count' allows any number of posts. Its unique strength is its flexibility—it can be embedded anywhere on your site, including posts, pages, or the homepage, making it perfect for versatile content integration.
PREMIUMBlogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Product List (Horizontal)
The Product List (Horizontal) displays posts in a scrollable horizontal slider, similar to Product Grid but optimized for row-based browsing. Use the shortcode [product-list/value/count], with 'value' as 'recent', 'random', or a label, and any 'count'. Its site-wide usability makes it perfect for sidebars, footers, or embedded sections in posts and pages.
PREMIUMBlogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Product List (Vertical)
The Product List (Vertical) displays posts in a stacked vertical list, ideal for detailed listings in narrow spaces like sidebars or mobile views. Use the shortcode [product-list-2/value/count], with 'value' as 'recent', 'random', or a label, and any 'count'. Like Product Grid and Product List, it can be used anywhere on your site, offering flexibility for content placement.
PREMIUMBlogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Main Post Components
Main Post Components
Enhance your product posts with these powerful shortcodes designed for seamless integration into your Blogger posts. These components allow you to display prices, discounts, brand information, SKUs, accordions, and styled messages directly within your content. Most components are Premium-only, with some features available in the Free version. All shortcodes can be used anywhere in your posts or pages, offering flexible placement throughout your website.
Preview
Post Count
Control the number of posts displayed on the homepage to optimize user experience and page load times. Configure this setting in Theme Settings > Theme Options > Post Count.
FREE PREMIUMPreview
Homepage displays a configurable number of posts, such as 6 posts per page, with a "Load More" button for additional posts.
Prices
The Prices component allows you to display product pricing with shortcodes for current and original prices.
Use [data-current-price=""] to show the current price (e.g., $49.99, Rs 3,499) and
[data-old-price=""] to show the original price with a strikethrough for comparison. This is
perfect for highlighting discounts and deals in your product posts.
Default Shortcode Syntax
Example
Preview
Sale
The Sale component lets you highlight discount percentages on your products using the shortcode
[data-sale=""]. You can specify percentages up to 100% (e.g., -50%, 70% OFF) to draw attention
to
special offers. This component is ideal for creating urgency and boosting conversions in your posts.
Default Shortcode Syntax
Example
Preview
Brand
The Brand component allows you to showcase the product’s brand with a name, optional link, and optional
logo
using the shortcode [data-brand="Name {Link} {Image-URL}"]. The link can point to an external
site (e.g., https://nike.com) or a Blogger page (e.g., /p/brand.html), and the image URL displays the brand
logo. Both link and image are optional, making this component flexible for branding in product posts.
[data-brand="Name {Link} {Image-URL}"]. The link and image URL are optional and must be
enclosed
in curly braces. Ensure valid URLs for external links or correct Blogger page paths. This shortcode can be
used anywhere in your posts or pages.
Default Shortcode Syntax
Example
Example
Preview
SKU
The SKU component displays a product’s Stock Keeping Unit (SKU) using the shortcode
[data-SKU="Value"]. You can use any combination of digits, characters, or symbols (e.g.,
NIKE-AF1-2023) to identify products uniquely. This is ideal for inventory tracking and customer reference in
product posts.
Default Shortcode Syntax
Example
Preview
Size Guide
The Size Guide component displays sizing charts using shortcodes like [size-guide="{Img-URL}"]
for product-specific images, [size-guide="{none}"] to hide, or defaults
[size-guide-default="{Img-URL}"] to the global setting.
Set the default in Theme Settings > Theme Options > Default Size Chart. This helps customers choose the
right
size, reducing returns.
{Img-URL} for the image link (e.g.,
{https://example.com/chart.jpg}). {none} hides the guide for that product. If no shortcode is
used, the default from settings applies. This shortcode can be used anywhere in your posts or pages.
Default Shortcode Syntax
Example
Preview
Accordions
The Accordions component allows you to create interactive, collapsible sections in your posts using the
shortcode [accordition (icon=, title=, content=) ...]. Each accordion item can include an icon
(Font Awesome or image URL), a title, and content. You can create unlimited accordion items within a single
group and multiple accordion groups in a post, making it perfect for FAQs, product details, or service
information. Icons can be specified using Font Awesome classes (e.g.,
<i class="fas fa-undo"></i>) or an image URL in curly braces (e.g.,
{https://example.com/icon.png}).
[accordition (icon=, title=, content=) (icon=, title=, content=)...]. Icons can be Font Awesome
classes or image URLs in curly braces. Add as many items or groups as needed in your post content. This
component can be used anywhere in your posts or pages.
Default Shortcode Syntax
Example
Preview
Our return policy allows returns within 30 days of purchase. Products must be in original packaging and condition.
You can track your order by logging into your account and visiting the "Orders" section. A tracking link will be available there.
Delivered worldwide in 3-7 business days.
Example
Preview
24/7 support via email, chat, and phone.
We accept all major credit cards and PayPal.
Additional Info
The Additional Info component allows you to display structured product details in a table format using the
shortcode [AdditionalInfo( Label = Value , Label = Value )]. This is perfect for listing
specifications like skin type, texture, or dimensions. The shortcode uses '=' to separate labels and values,
and ',' to separate entries (creating new rows). You can add unlimited entries for comprehensive product
information.
Default Shortcode Syntax
Example
Preview
Messages
The Messages component allows you to display styled messages with various types using shortcodes like
[type(Title) "Content"]. Available message types include alert, warning, news, dark, danger,
success, info, tip, loading, processing, interactive, promo, update, successActions, and dangerActions. Some
types (update, successActions, dangerActions) support optional action buttons with links (e.g.,
Button Text{URL}). You can add up to two buttons for dangerActions, one for update and
successActions. These messages can be placed anywhere in your posts or pages, making them versatile for
notifications, promotions, or status updates.
[type(Title), Button Text{URL} "Content"] for messages with buttons. Buttons are supported only
for update (1 button), successActions (1 button), and dangerActions (up to 2 buttons). Ensure valid URLs for
buttons. Messages can be embedded anywhere in your content for maximum flexibility.
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Countdown Timer
The Countdown Timer component adds urgency to your products by displaying a timer for limited-time offers
using the shortcode [countdown=Days/Hours/Minutes/Seconds(repeat)]. Specify the time in
Days/Hours/Minutes/Seconds format. Add '(repeat)' to restart the timer after completion; omit it to hide the
timer once it ends. This is great for flash sales or promotions.
Preview
Variants
Add product variants like colors, sizes, or images to allow customers to select options. Use shortcodes to define up to one group of variants per product, categorized as Colors, Sizes, or Electronics.
PREMIUM[variants1(Colors)=...] for colors (with optional hex codes),
[variants2(Sizes)=...]
for text-based options, or [variants3(Electronics)=...] for image-based options. Separate
variants with '+'. For Colors, add hex codes like (#f1f1f1) for custom colors. For Electronics, include
image
URLs in curly braces {url}. Only one variant group per product. This shortcode can be used anywhere in your
posts or pages.
Variant Group 1
Default Shortcode Syntax
Example
Example
Preview
Variants Group 2
Default Shortcode Syntax
Example
Example
Preview
Variants Group 3
Default Shortcode Syntax
Example
Preview
Linking Variants with Product Images & Info
In addition to basic variant groups (Colors, Sizes, or Images), you can link each variant directly to a specific product slider image. This allows you to automatically update the displayed product image, prices, stock, sale status, and badges when a user selects a variant.
PREMIUM[variant=...] definition inside the image ALT text of a slider image.
You can also include optional attributes for old-price, current-price,
sale, stock, and badge.
Format:
[variant=Name, old-price=Value, current-price=Value, sale=Value, stock=Value, badge=Value]
If a specific value is missing, the product will use the default values instead.
Blogger Configuration
To link variants with product images, you need to edit the ALT text of your product images. Go to Blogger > Posts > Edit Post > Click on the Image > Edit > Properties and enter the variant shortcode in the Alt Text field.
Default Shortcode Syntax
[variant=Name , old-price= Value , current-price= Value , sale= Value , badge= Value , stock= Value]
Examples
[variant=20ml]
[variant=20ml, old-price=Rs 100, current-price=Rs 50, sale=-50%, stock=In Stock, badge=Hot]
[variant=Red, current-price=Rs 120, stock=Limited Stock]
[variant=Travel, current-price=Rs 299, badge=Best Seller]
[variant=Crystal White, current-price=Rs 799, stock=Out of Stock]
Full Example
[variant=Travel , old-price=Rs 2000 , current-price=Rs 1500 , sale=-25% , badge=Hot , stock=In Stock]
- When a user selects a variant, the product slider will scroll to the image with that variant.
- Prices, stock status, sale percentage, and badges will update to match the variant data.
- Missing fields fall back to the default product values.
- For Groups 1 (Colors), 2 (Sizes), and 3 (Images), always use the variant name as defined in the shortcode, without hex codes or URLs in the
[variant=...].
Preview
Social Share
The Social Share component adds sharing buttons for platforms using the shortcode
[socialShare(platform1, platform2, ...)]. Available platforms: facebook, instagram, twitter,
whatsapp, youtube, tiktok, linkedin, snapchat, pinterest, reddit, discord, telegram. If no shortcode is
used,
the first 5 platforms show by default. Buttons open sharing dialogs for easy social promotion.
Preview
Stock Status
The Stock Status component displays product availability using the shortcode
[data-stock="Status"], with two options: "In Stock" or "Out of Stock". When "Out of Stock" is
used, the "Add to Cart" and "Buy Now" buttons are automatically disabled to prevent purchases. This helps
manage inventory and improve user experience.
Preview
Badges
The Badges component allows you to add visual highlights to products using the shortcode
[data-badge="Badge Name"]. You can select from a predefined list of badges to indicate status
like "Hot", "New", or "On Sale". Badges can be added to the main product or variants (up to 1 per
product/variant). Each badge has unique styling to stand out and attract attention.
Preview
Preview
Short Description
The Short Description component adds a concise product summary using the shortcode
[data-short-description="Text"]. You can include any text, numbers, symbols, or digits without
limits (no images). This is ideal for quick overviews at the top of product posts.
Default Shortcode Syntax
Example
Preview
Related Products
The Related Products component displays similar products in a slider based on matching labels and categories. Products appear after the product body in full-page view. Set the count in Theme Settings > Theme Options > Related Products. This encourages cross-selling by showing relevant items automatically.
FREE (Limited) PREMIUMPreview
Comments
The Comments component uses Blogger's default system with Premium enhancements. In Premium, users can add up to 6 images using {image-url} in comments (e.g., {https://example.com/image.jpg}), which display as thumbnails with fullscreen view. Add links as (Text {url}), e.g., (Daraz {https://daraz.com}), showing "Daraz" as a clickable link. Set comment limits in Theme Settings > Theme Options > Comments Limit to show a "Load More" button after the specified number (e.g., 6, 10, 20).
FREE (Basic) PREMIUMPreview
Hot Posts
The Hot Posts component displays a masonry grid of popular or trending posts using the shortcode
[vividHotPosts/type/count]. You can choose from 'random', 'recent', or a specific label to
filter
posts, and define the number of posts to display. This layout is ideal for showcasing top-performing content
in a visually engaging, dynamic grid format.
Blogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Brand Products
The Brand Products component displays a slider of products from a specific brand using the shortcode
[vividBrandProducts/type/count]. Filter by 'random', 'recent', or a specific label, and set the
number of products to display. This is perfect for showcasing branded collections.
Blogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Brand Images
The Brand Images component automatically creates a slider of brand images extracted from posts, using the
shortcode [vividBrand/images]. No manual image uploads are needed; images are pulled from posts
tagged with brand labels. This is ideal for showcasing brand logos or product images at the bottom of your
website.
Blogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Footer
The Footer component is a container that organizes the Logo, Menu, Social Share, and Copy Rights components at the bottom of your website. It provides a cohesive and professional look, enhancing navigation and branding.
FREE (Basic) PREMIUM (Enhanced)Preview
Logo
Your website logo is a crucial branding element that appears prominently in the header, representing your ecommerce business. Using Blogger's default Header widget, you can upload a high-quality image that scales responsively across devices, ensuring brand consistency and professional appearance.
Blogger Configuration
Access the Header widget in your Blogger layout to upload or link your logo image. Opt for "Show logo instead of title and description" to prioritize visual branding over text, creating a clean and modern header design.
- Navigate to Layout in Blogger dashboard
- Locate and edit the Header widget
- Upload image or provide URL
- Select logo display option
- Save changes
Preview
Footer Menu
The Footer Menu component displays a flat list of navigation links, similar to the header Main Menu but without dropdowns. It is managed through a LinkList widget, where each item represents a menu link with its label and URL. This allows users to easily add, remove, or reorder links directly from the widget settings without using shortcodes.
FREE PREMIUMBlogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Footer Social Share
The Footer Social Share component adds sharing buttons for social platforms, identical to the Main Post
Social Share, using the shortcode [socialShare(platform1, platform2, ...)]. Available platforms
include
facebook,
instagram,
twitter,
whatsapp,
youtube,
tiktok,
linkedin,
snapchat,
pinterest,
reddit,
discord,
telegram. If no shortcode is used, the first 5 platforms are shown by
default.
Blogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
Copy Rights
The Copy Rights component allows users to add custom copyright text to the footer through the Blogger Text widget. This is a premium-only feature and does not use any shortcode. It is ideal for personalizing the footer with your brand’s copyright notice.
PREMIUMBlogger Configuration
Set up Action Buttons with a LinkList widget, where each item's text becomes the button label and the link its destination. This configuration allows for multiple buttons, each tailored to specific user actions for maximum impact.
Preview
