Volume Discount type
Last updated
Was this helpful?
Last updated
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:
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.
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.
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.
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.
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.
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:
Using the Theme Editor – Move the widget to your preferred location directly within the Shopify theme editor.
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!
