Salepify User Guide
  • ✨INTRODUCTION
    • What we do
    • Our Features
  • 📖User Guides
    • Enabling Salepify app
    • Gift offers
      • Embedded Gift
      • Popup Gift type
      • Progress Bar type
      • BOGO type
    • Bundle offers
      • Volume Discount
      • Product Bundle
    • Styling
      • Embedded Gift type
      • Popup Gift type
      • Progress Bar type
      • BOGO type
      • Volume Discount type
      • Product Bundle type
    • Translation
  • 💳PRICING
    • Pricing plan
  • ⚪OTHERS
    • Popup old version Migration Notice & Shut down plan
  • Privacy Policy
Powered by GitBook
On this page
  • Popup style
  • Header
  • Offer block
  • Product image
  • Product details
  • Button
  • Custom CSS

Was this helpful?

  1. User Guides
  2. Styling

BOGO type

Last updated 1 month ago

Was this helpful?

At the top of the page, there are viewing modes to help you review your BOGO popup layout based on the Device View: See how the BOGO will appear to your customers on both PC and mobile devices.

Here is an example of what the BOGO popup looks like on your storefront:

You can hover an element in the preview to locate the edit option.

Popup style

Customize the whole popup's appearance with the following options:

  • Border radius: Adjust the slider to set the roundness of the popup’s corners.

  • Border width: Adjust the slider to define the thickness of the popup's border.

  • Border color: Pick the color for the popup’s border.

  • Background color: Set the background color for the popup.

  • Font: Choose to use the default font of your store or select a different font type for the popup text.

Header

  • Header size/weight: Adjust the size and weight (thickness) of the header text.

  • Subtitle size/weight: Set the size and weight (thickness) of the subtitle text.

  • Alignment: Choose the alignment for both the header and subtitle (left, center, or right).

Offer block

Customize the appearance of the offer block with the following options:

  • Width: Adjust the slider to change the width of the offer block.

  • Border radius: Use the slider to set the roundness of the offer block's corners.

  • Border color: Pick the color for the offer block’s border.

  • Background color: Choose the background color of the offer block.

Product image

  • Image border radius: Use the slider to increase roundness of the image border.

  • Image border color: Select a suitable color for the border of the image.

Product details

You are able to change the text size, text weight, text color, background color of the Product title, Product quantity, Product price, Product regular price.

Button

You are able to change the text size, text weight, text color, background color of the Add to cart button, Decline offer button, and the "Do not show this again" text.

Custom CSS

  • This section allows you to customize the BOGO popup with CSS code, giving you full control over its appearance and layout, thereby ensuring the popup aligns perfectly with your store’s style.

  • If you’re unable to do it, don’t worry! Just click the Contact Us button, and our team will assist you right away.

In case you want to change the text of buttons and messages, please go to the section or contact us for further assistance.

If you have any questions, just send us a message via Live Chat or email us at support@tek-labs.app. Good luck with your promotion campaign!

📖
💟
Translation
BOGO