Sunlight – Online Shopping eCommerce Blogger Template

It is a Shopping Store eCommerce Blogger Template for modern online businesses. It features a clean, responsive layout that looks perfect on all devices. This template is fast loading and SEO optimized.

Sunlight blogger template has lots of unique features that you won’t find in any other blogger template. All its features can be configured with a few clicks and without any coding knowledge. Sell more quickly and easily with it.

Template Features

• Fully Responsive and Mobile Friendly
• Dark Mode & Dark Logo Support
• Automatic Live Search
• Your Own PWA App
• Table of Contents
• Content Pagination
• Sidebar Display Options
• Advanced Footer Section
• Multiple Slideshow Banner
• Google Sheets Subscribe Form
• Shopping Cart & Checkout Page
• Google Sheets Order Management
• Custom Related Posts (Label, Recent, Random, Related)
• Multiple Post Cards (Custom Cards, Download, Product)
• Multiple Custom Posts (Label, Recent, Random, Related)
• Fully Customizable Layout, Fonts, Background and Colors

{getButton} text=Preview $icon=bi-eye $color=#22c55e {getButton} text=Order Panel $icon=bi-file-spreadsheet $color=#a855f7

{getCPC} $icon=bi bi-cart title=Sunlight Template meta=Template Price: $20 button=Purchase Now {getBox} text=Continue to the next page to view the full setup documentation. $icon=bi-info-circle-fill $background=rgba(41,128,185,0.1) $color=rgba(41,128,185,1) {nextPage}

This documentation provides everything you need to get started — from installation and layout setup to customization options like fonts, colors, widgets, and post styles. You’ll also learn how to take full advantage of its responsive design, fast-loading performance, and built-in SEO features to create a smooth and engaging experience for your readers.

Header Widgets

1. Header Logo

Access your blog layout > click the edit icon in the header widgets (image) gadget > upload your logo > click save

2. Header Menu

Access your blog layout > click the edit icon in the header widgets (link list) gadget > edit menu items > click save

Default & Sub Links

• Default Link Example: Level 0
• SubLink Level 1 Example: _Level 1 “Before the Title add 1 underscore”
• SubLink Level 2 Example: __Level 2 “Before the Title add 2 underscore”

3. Menu Icons

Access your blog layout > click the edit icon in the header menu icons (link list) gadget > edit menu icons > click save

Get Menu Icons

• Go To Bootstrap Icons > Copy Icon Name > Then Paste [bi-IconName]
• Example One: [bi-SkyBlue] Example Two: [bi-arrow-Down]

4. Menu Links

Access your blog layout > click the edit icon in the header menu links (link list) gadget > edit menu links > click save

Slideshow Banner

Access your blog layout > click the edit icon in the slideshow widgets (image) gadget > upload your banner > click save

Mini Cards

Access your blog layout > click the edit icon in the mini card widgets (text) gadget > edit card items > click save

Get Card Icons

• Go To Bootstrap Icons > Copy Icon Name > Then Paste [bi-IconName]
• Example One: [bi-SkyBlue] Example Two: [bi-arrow-Down]

Custom Posts

Access your blog layout > click on add a gadget in the post card widgets section > select html/javascript > enter shortcode > click save

Post Shortcode

This shortcode allows you to display posts dynamically on your site. You can fetch posts based on different criteria like recent, specific label, random, or related posts.

Basic Syntax

{ACB}{S} [{Get Post} {Title} {Button1 Text} {Type=TypeName} {Button2 Text} {Total=Number}] {E}

Parameters

• Title: Heading for the post section (e.g., Recent Posts, Random Posts)
• Button1 Text: Text displayed on the button (e.g., View All, Read More)
• Type: Type of posts to fetch: Recent, Random, Related, or a Specific Label
• Button2 Text: Text for the read more link
• Total: Number of posts to display

1. Recent Posts

{codeBox} $background= $color= $code=[{Get Post} {Recent Posts} {See More} {Type=Recent} {Read More} {Total=З}]

2. Posts with Specific Label

{codeBox} $background= $color= $code=[{Get Post} {Label Post} {Load All} {Type=Wearables} {Order More} {Total=Ƽ}]

3. Random Posts

{codeBox} $background= $color= $code=[{Get Post} {Random Posts} {See All} {Type=Random} {Buy More} {Total=З}]

4. Related Posts

{codeBox} $background= $color= $code=[{Get Post} {Related Posts} {Load More} {Type=Related} {View More} {Total=Ƽ}]

Blog Posts

Use the label in your blog post to ensure it’s displayed on the blog page. To hide the Related Posts widget in a specific post, insert the shortcode below (wrapped in a bold tag) anywhere within the post content.

{codeBox} $background= $color= $code=Label Name: Blog Posts | Shortcode: [Hide-Related-Widget]

Store Page

Use the ‘Store’ label in your product post to ensure it’s displayed on the store page.

Footer Widgets

1. Footer Logo

Access your blog layout > click the edit icon in the footer widgets (image) gadget > upload your logo > click save

2. Footer Links

Access your blog layout > click the edit icon in the footer widgets (link list/labels) gadget > edit items > click save

3. Footer Copyright

Access your blog layout > click the edit icon in the footer widgets (text) gadget > edit content > click save

4. Footer Menu

Access your blog layout > click the edit icon in the footer widgets (link list) gadget > edit menu items > click save

Owner Info

1. Owner Photo

Access your blog layout > click the edit icon in the default widgets (owner photo) gadget > upload owner img > click save

2. Owner Name

Access your blog layout > click the edit icon in the default widgets (default text) gadget > edit owner name > click save

Product Price

To enable the feature on a product post, you need to add the product price shortcode in the post’s HTML view. Once added correctly, the Order Now or Add to Cart button will automatically appear on the product post.

Basic Syntax

{ACB}{S} {E}

Steps to Add the Shortcode

• Open the product post you want to edit.
• Switch the editor to HTML view.
• Scroll to the very bottom of the HTML content.
• Paste the appropriate product price shortcode there.
• Save or update the post.

Shortcode Examples

Use the shortcode format below based on your product type and variations:

{ACB}{S} {E}
{ACB}{S} {E}
{ACB}{S} {E}

Note: Multiple variations must be separated by commas.

Related Posts

Access your blog layout > click the edit icon in the related widgets (html/javascript) gadget > enter shortcode > click save

Shortcode: Same as Custom Post shortcode

Sidebar Widgets

1. Follow Us

Access your blog layout > click the edit icon in the sidebar widgets (follow us) gadget > edit link list > click save

Get Icons: Same as Get Card Icons

2. Product Widgets

Access your blog layout > click on add a gadget in the sidebar widgets section > html/javascript > shortcode > click save

Shortcode: Same as Custom Post shortcode

Get (PWA) Apk

1. App Icon

Access your blog layout > click the edit icon in the default widgets (app icon) gadget > upload app icon > click save

2. App Info

Access your blog layout > click the edit icon in the default widgets (app info) gadget > edit app info > click save

Hide Loader

Access your blog layout > click the edit icon in the default widgets (css loader) gadget > hide widget > click save

{nextPage}

This documentation provides everything you need to get started — from installation and layout setup to customization options like fonts, colors, widgets, and post styles. You’ll also learn how to take full advantage of its responsive design, fast-loading performance, and built-in SEO features to create a smooth and engaging experience for your readers.

Shopping Cart Page

To create a shopping cart page, follow the steps below:

1. First, create a new page and name it “Shopping Cart”
2. Switch the page to HTML View
3. Paste the provided code into the HTML editor
4. Disable the comments section for this page
5. Make sure to remove the “(X)” part from the ID
6. Finally, publish the page

{ACB}{S}

[Full-Width] {E}

Checkout Page

To create a checkout page, follow the steps below:

1. First, create a new page and name it “Checkout”
2. Switch the page to HTML View
3. Paste the provided code into the HTML editor
4. Disable the comments section for this page
5. Finally, publish the page

{ACB}{S} [Full-Width] {E}

Shipping Charge

Access your blog layout > click the edit icon in the default widgets (shipping charge) gadget > edit charge > click save

Advance Payment

Access your blog layout > click the edit icon in the default widgets (default text) gadget > edit method > click save

Order Confirmed Page

To create a order confirmed page, follow the steps below:

1. First, create a new page and name it “Order Confirmed”
2. Switch the page to HTML View
3. Paste the provided code into the HTML editor
4. Disable the comments section for this page
5. Make sure to remove the “(X)” part after getBox
6. Finally, publish the page

{ACB}{S} {getBox(X)} text=Your Order Has Been Placed Successfully! Thank You. $icon=bi-check-circle-fill $background=rgba(39,174,96,0.1) $color=rgba(39,174,96,1)

Our representative will contact you soon to confirm the details over the phone. Please keep your phone active so we can reach you easily. If you need immediate assistance, feel free to contact our support team.

[Full-Width] {E}

Checkout Page Integration

To make the checkout page fully functional, it needs to be connected with Google Sheets. Please follow the steps:

Step 1 : Create a Google Sheet

1. Create a new Google Sheet.
2. Name the Google Sheet “Order Management”.
3. Rename the sheet (tab) to “Orders”.

Step 2 : Set Up the Orders Sheet

In the Orders sheet, the first row (Row 1) must contain the column headers, and each cell name must be written exactly as provided, without any modification. The headers must be placed in the given serial order starting from Column A, and no extra spaces, renaming, reordering, or additional columns should be added.

Any change to the exact header names or their positions may cause the checkout system to stop working, as the checkout page reads and processes data strictly based on these predefined column names and their positions.

1. Date_Time
2. Name
3. Number
4. Email
5. Address
6. Delivery_Area
7. Payment_Method
8. Account_Number
9. Transaction_ID
10. Order_Note
11. Order_List

Step 3 : Add Google Apps Script

1. From the Google Sheet menu, go to Extensions → Apps Script.
2. Paste the provided script code into the editor.
3. Rename the Apps Script project to “Order Management”.

Step 4 : Run and Deploy the Script

1. Run the script once to authorize the required permissions.
2. Deploy the script as a Web App.
3. Copy the deployment (script) URL.

Step 5 : Connect with Blogger

1. Go to Blogger → Layout.
2. Find the Order Management widget.
3. Paste the copied Apps Script URL into the widget.
4. Save the layout.

Once these steps are completed, the checkout page will be successfully connected to Google Sheets, and all order data will be stored automatically in the Orders sheet.

Subscribe Form Integration

To make the Subscribe Form fully functional, it must be connected to Google Sheets, following the same process used for the checkout page integration.

First, create a new Google Sheet and name it “Subscriber List”. Rename the sheet tab to “Subscriber”. In the Subscriber sheet, set the first row and first column cell (A1) header to Email, written exactly as shown.

Next, open Extensions → Apps Script from the Google Sheet menu, paste the previously provided script, and rename the Apps Script project to “Subscriber List”. Inside the script, locate the line:

{codeBox} $background= $color= $code=const sheetName = 'Orders';

and replace Orders with Subscriber.

After that, run the script once to grant permissions, deploy it as a Web App, and copy the generated script URL. Finally, go to Blogger → Layout, paste the copied script link into the Subscriber List widget, and save the layout.

Once saved, the subscribe form will be successfully connected to Google Sheets and will start storing subscriber email addresses automatically.

{nextPage}

The post shortcodes developed by Libasul Haya are available in all our blogger templates. These shortcodes allow you to add buttons, alerts, contact form, code box and even make simple adjustments to the layout in an easy and intuitive way.

Table of Contents

Insert the shortcode below (wrapped in a bold tag) anywhere within the post content.

{codeBox} $background= $color= $code={getToc} $title={Table of Contents}

Default Buttons

Insert the shortcode below (wrapped in a link "a" tag) anywhere within the post content.

{codeBox} $background= $color= $code={getButton} text=Button Text $icon=bi-IconName $color=var(--key-color)

Get Icons: Same as Get Card Icons

Default Buttons

Insert the shortcode below (wrapped in a link "a" tag) anywhere within the post content.

{codeBox} $background= $color= $code={getButton} text=Button Text $icon=bi-IconName $color=HexColorCode

Get Icons: Same as Get Card Icons

Alert Boxes

Insert the shortcode below (wrapped in a bold tag) anywhere within the post content.

{codeBox} $background= $color= $code={getBox} text=Your Text $icon=bi-IconName $background=ColorCode $color=ColorCode

Get Icons: Same as Get Card Icons

1. Success Alert

{codeBox} $background= $color= $code={getBox} text=This is a success alert. $icon=bi-check-circle-fill $background=rgba(39,174,96,0.1) $color=rgba(39,174,96,1)

2. Info Alert

{codeBox} $background= $color= $code={getBox} text=This is an info alert. $icon=bi-info-circle-fill $background=rgba(41,128,185,0.1) $color=rgba(41,128,185,1)

3. Warning Alert

{codeBox} $background= $color= $code={getBox} text=This is a warning alert. $icon=bi-exclamation-circle-fill $background=rgba(243,156,18,0.1) $color=rgba(243,156,18,1)

4. Error Alert

{codeBox} $background= $color= $code={getBox} text=This is an error alert. $icon=bi-x-circle-fill $background=rgba(231,76,60,0.1) $color=rgba(231,76,60,1)

Contact Form

Insert the shortcode below (wrapped in a bold tag) anywhere within the post content.

{codeBox} $background= $color= $code=[Contact_Form]

Code Box

Insert the shortcode below (wrapped in a underline tag) anywhere within the post content.

{codeBox} $background= $color= $code={codeBox} $background= $color= $code=Your Code

Bordered Table

Switch the page to HTML View. Paste the provided code into the HTML editor

{ACB}{S}

Name	Age	Gender
John	10 Year	Male

{E}

Post Split

Insert the shortcode below (wrapped in a bold tag) anywhere within the post content.

{codeBox} $background= $color= $code={nextPage}

Post Cards

Insert the shortcode below (wrapped in a link "a" tag) anywhere within the post content.

{codeBox} $background= $color= $code={getCPC} $icon=bi bi-IconName title=CardName meta=CardText button=ButtonName

Get Icons: Same as Get Card Icons

1. Download Card

{codeBox} $background= $color= $code={getCPC} $icon=bi bi-cloud-arrow-down title=Spotlight_Free.zip meta=64kb button=Download

2. Shopping Card

{codeBox} $background= $color= $code={getCPC} $icon=bi bi-cart title=Spotlight Premium meta=$29 button=Buy Now

3. Custom Card

{codeBox} $background= $color= $code={getCPC} $icon=bi bi-palette title=Custom Post Card meta=How to Setup? button=Learn More

Post Layouts

Insert the shortcode below (wrapped in a bold tag) anywhere within the post content.

1. Left Sidebar

{codeBox} $background= $color= $code=[Left-Sidebar]

2. Right Sidebar

The right sidebar is set as the default.

3. No Sidebar

{codeBox} $background= $color= $code=[Full-Width]

Default Thumbnail

Access your blog layout > click the edit icon in the default widgets (default thumbnail) gadget > upload img > click save

Customization

Access your blog Theme > and click on the Customize button > and explore Background and Advanced options

Fully Customizable: Layout Options, Fonts, Background, Colors, Display Options and more

[Full-Width]