How to add the Discount Tag on your page
Since the Discount Tag is a part of the Product Module, it can be placed anywhere within the module for proper functionality. However, it’s advisable to position the Discount Tag alongside the Product Price and Compared Price for optimal usage. To achieve this, follow these steps:
Step 1: In the GemPages Dashboard, select your page to work on the enter the Editor. If you don’t have a Product Module, drag & drop one onto your page.
Step 2: Place a Row element in your desired location and divide it into three columns. Under Column Width, select “Fit to Content.”
Step 3: Place the Product Price in the first column, followed by the Compared Price in the second column. The Discount Tag should be placed in the last column.
Please note that you can also position the Discount Tag within the Product List to display discounts for each product in the collection.
Clicking on the Discount Tag element, you will notice the settings configuration displayed on the left sidebar. It consists of two primary tabs: Settings and Advanced.
Configure the Settings Tab
Type – Content
You have the choice to display either the saved amount or the percentage for your product. In the Content section, enter the tag you wish to showcase.
Keep in mind that the currency will mirror your Shopify Admin. If you wish to modify the format, you can do so by going to Shopify Admin > Settings.
Text
Style: Select a style for the text from the available pre-determined styles.
Font: Choose the font for your text label from the drop-down menu. In case, you would like to use other fonts, check out how to use a custom font here.
Sizes: Determine your preferred font size.
Color: Choose a color from the palette or input the color hex code.
Click on the “Show more” button to reveal more customization options.
Font Weight: Choose your desired font weight from the provided drop-down menu.
Line Height: Adjust the height of the text by specifying a percentage value.
Letter Spacing: Modify the spacing between letters by inputting a value in pixels.
Text transform: Transform the text to uppercase, lowercase, or capitalize as desired.
Background color
Choose a color from the palette or input the hex color code for the background color of the discount tag.
Border
Border: Define the appearance of your tag’s border by selecting the border color, style, and position.
Corner: Enter your preferred value in the provided box to attain the desired border curvature.
Size
Choose a size from the dropdown or customize your tag size by clicking on the three-dot button.
Align
This parameter allows you to determine how the element is positioned on your page. There are three options to choose from: left-aligned, centered, and right-aligned.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
