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
  • Block
  • Header
  • Tier style
  • Button
  • Custom CSS
  • Widget placement

Was this helpful?

  1. User Guides
  2. Styling

Volume Discount type

Last updated 1 month ago

Was this helpful?

At the top of the page, there are viewing modes to help you review your Volume Discount layout:

  • Device View: See how the Volume Discount block will appear to your customers on both PC and mobile devices.

  • Layout View: The Display Only and Interactive modes contain some different elements in their blocks. Please note that certain sections can only be modified and applied to a specific layout type.

Here is an example of what the Volume Discount block looks like on your storefront:

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

Block

Customize the appearance of the volume discount block:

  • Block background: Determine the main color that fills the block in the background.

  • Block border color: Define the color of the outer edge surrounding the whole Volume discount block

  • Block border radius: Adjust the slider to change the roundness of the whole block's corner.

  • Block border width: Adjust the slider to set the thickness of the whole block’s border.

Header

Default text: Buy more save more

  • Header size: Enter a value in pixels (px) to set the font size of the header text.

  • Header weight: Choose the font weight from the dropdown menu (e.g., Bold).

  • Header color: Click on the color picker to set a custom color for the header text.

  • Alignment: Align the text to the left/center/right of the block

  • Margin bottom: Adjust the slider to set the space between the header and the content below it. A higher value increases the gap.

  • Strikethrough color: Click on the color picker to set a custom color for strikethrough.

  • Strikethrough thickness: Adjust the slider to set the thickness of the strikethrough line, a higher value will make the line get thicker.

Tier style

Customize the appearance of the pricing tiers in your volume discount block:

  • Background: Determine the color filling in the tier blocks, excepting the Selected block (Set to default).

  • Selected background: Determine the color filling in the "Set to default" block.

  • Each of the elements (Title, Subtitle, Price, Regular price, Label, Tag) can let you adjust the:

    • Size

    • Weight

    • Color: Click on the color picker to set a custom color.

  • Border: Decide how the border of each tier section would be:

    • Border type: Pick the type of the border line out of 6 listed options (Solid, Dotted, Dashed, Groove, Double, None)

    • Border (color): Click on the color picker to set a custom color for the border line, except the selected tier.

    • Selected border: Click on the color picker to set a custom color for selected tier.

    • Border width: Adjust the slider to set the thickness of the tier block's border.

    • Selected border width: Adjust the slider to set the thickness of the selected block's border.

    • Border radius: Adjust the slider to change the roundness of the tier block's border.

Selected background and Tag only applies to the Interactive layout.

Button

Used for the Grab discount button in the Interactive layout.

  • Text size: Enter a value in pixels (px) to set the font size of the Grab discount button.

  • Text weight: Choose the font weight from the dropdown menu (e.g., Bold).

  • Text color: Click on the color picker to set a custom color for the text.

  • Background color: Click on the color picker to set a custom color for the background of the button.

  • Shadow color (when hover): Click on the color picker to set a custom shadow color.

Custom CSS

This section allows you to customize the 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.

Widget placement

By default, the Volume Discount block is displayed below the Buy It Now button on the product page.

If you wish to change its position, you can do so in two ways:

  1. Using the Theme Editor – Move the widget to your preferred location directly within the Shopify theme editor.

  2. Using a Snippet Code – Manually insert a code snippet into your theme files to position the block exactly where you want it.

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!

📖
😉
Volume Discount
Display only
Interactive