Create Offer Page

This guide explains how to create an Offer Page in BOGOS to effectively promote your active offers by showcasing them in a centralized location.

The BOGOS Offer Page is a powerful tool to showcase your offers in one central page, making it easy for customers to discover what promotions are available.

From this, customers are then redirected to the relevant pages where they can claim your offers.

Some offers allow customers to claim them directly from the Offer Page using the Add button:

• Gift offers: Add gifts directly to cart once conditions are met.

• Volume discount & Discount on cheapest/most expensive item: Add products directly to cart to apply the discount.

Setting up a BOGOS Offer Page includes 6 steps:

1. Navigate to Booster page > Create Offer page.

2. Fill in booster name (for internal purposes only).

3. Set up the header section.

4. Set up the spotlight section (optional).

5. Set up the main sections.

6. Click Publish and test the offer page.

7. Get and attach the offer page link to your website.

Set up Header Section

The header section appears at the top of your Offer Page and is used to grab customers’ attention.

To set it up:

1. Fill in or edit the Page header.

2. Fill in or edit the Page description (optional).

3. Customize the header display.

Customize Header Display

1. Click Customize to open the editor.

2. Select a layout from the 3 available options:

1. Customize content:

• Upload a banner image (Recommended size: 1200 x 800 px. Accept file .gif, .jpg, and .png)

• Choose banner size: Select between full width (spans the entire page) or fixed width (contained within a set area).

• Add a redirect button (optional): Add a button with custom text and a link to redirect customers to where they can claim your offer.

Image side-by-side layout doesn’t support Choose banner size.

1. Customize display: Customize colors for available options by entering a color code or choosing from the color picker.

2. Click Save.

Set up Spotlight Section (optional)

The Spotlight Section highlights one offer at the top of the Offer Page, helping you clearly communicate its value and direct attention to your priority promotion.

• You can create only one spotlight section and showcase only ONE offer.

• If you select a deactivated offer, it won't show on the page until you activate it.

To set it up:

1. Enable Set a spotlight section.

2. Choose an offer you want to spotlight.

3. Customize the layout.

Customize Layout

1. Click Customize to open the editor.

1. Customize Content:

— Customize each element of the offer information, which will be displayed to customers:

• Title: The main headline for your offer.

• Description (optional): Additional text explaining the offer.

• Product list label: Instructional text shown above the product list.

• Add button text (if available): The text of the add-to-cart button shown when customers can quickly add products or gifts to the cart.

By default, BOGOS syncs the offer information from your original offer content.

— Add element (optional). You can add any or all of the following 4 elements:

• Redirect button: Add a custom CTA that links customers to where they can claim the offer.

• Discount label: Enter a custom discount label to highlight your deals.

• Max discount line: Enter a maximum discount value that customers can receive from the offer.

• Total price line: Enter a custom total and original price to highlight savings better.

1. Customize Display:

• Choose Products per row: Control how many products appear per row on desktop and mobile.

• Show compare-at price (optional): Display the original price for your products to highlight savings

• Customize display: Customize colors for available options by entering a color code or choosing from the color picker.

1. Click Save.

Set up Main Sections

The Main Sections let you showcase multiple offers in different layouts, making it easy for customers to browse, compare, and understand each offer’s value.

• You can add multiple main section layouts to one offer page.

• Each section type can display multiple offers.

• If you select a deactivated offer, it won't show on the page until you activate it.

To set up a new section:

1. Click Add section > Choose a section type.

2. Fill in or edit the section title and description (optional).

3. Select an offer(s) to showcase under the selected section type.

4. Click Customize to open the editor.

5. Customize the layout content.

6. Customize the layout display.

7. Click save.

Choose a Section Type

There are 6 section types, each designed for different promotion goals and display needs.

— Exclusive for gift-based campaigns:

• Gift collection: Show all gifts in a compact grid. Once customers qualify, the “Add” button appears, allowing them to add gifts to the cart on the Offer page directly.

— For showcasing several promotions at once:

• Offer collection - Style 1: Simple list layout for a clean, text-first view, customers can scan offers quickly.

• Offer collection - Style 2: A visual grid layout for a more visual view, customers can browse offers like a gallery.

— For focusing on one offer with products showcasing:

• Offer block: Quick highlight for 1–2 products in the offer (image is optional).

• Offer detail block: Shows multiple products alongside the offer details.

• Offer detail block image: Use a large featured image alongside multiple products.

Customize Layout Content

Available options may vary depending on your selected section type.

1. Select the offer you want to customize from the Offer list (on the left).

2. Customize the offer information (on the right). Setting up is the same as in the Spotlight section.

3. Upload offer image (if available), accepting .gif, .jpg, or .png files, with a recommended size of 100KB for fast loading.

Required for most image-supported layouts, optional for Offer Block.

1. Add element (optional). Setting up is the same as in the Spotlight section.

2. Select an icon or upload your own (if available). We recommend .jpg, .png files with 100KB for fast loading.

3. Reverse column order: Enable to switch of the position of content and images.

Customize Layout Display

Available options may vary depending on your selected section type.

1. Select the offer you want to customize from the Offer list (on the left).

2. Open Display tab (on the right).

3. Select Offer image ratio: Ensure the image fits the layout properly.

4. Select Products per row: Control how many products appear per row on desktop and mobile to optimize for different screen sizes.

5. Show compare-at price (optional): Display the original price for your products to highlight savings

6. Customize display: Customize colors for available options by entering a color code or choosing from the color picker.