• Video Tutorial
  • GemPages Forum
Start For Free
  • Video Tutorial
  • GemPages Forum
homeElements[V7] Product Tag
homeElements[V7] Product Tag

[V7] Product Tag

The Product Tag is a child element of the Product Module. Its purpose is to present customers with information regarding the discount, either in terms of amount or percentage, applicable to a specific product purchase. This guide will walk you through the process of incorporating a tag onto your product and tailoring its appearance according to your preferences.

How to add the Product Tag on your page

Since the Product 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 Product 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 Product Tag should be placed in the last column. 

Please note that you can also position the Product Tag within the Product List to display discounts for each product in the collection.

Clicking on the Product 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 product 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.

And there you have it! If you need any further assistance along the way, our GemPages Support Team is always here for you!

You can reach us via email or live chat at any time.

Was this helpful?

Yes  No
Related Articles
  • [V7] Comparison Image
  • [V7] Custom Code element
  • [V7] Shopify App element
  • [V7] Sticky Cart element
  • [V7] Contact form element
  • [V7] Product Custom Field
footer logo
  • Changelog
  • Privacy Policy
  • Terms of Service
  • Community
  • Video Tutorial
© 2017-2023 GemPages. All rights reserved.
Popular Search:Responsive design, Transfer content, Custom code