Track product's inventory with (P) SKU element

This article will introduce a new element named (P) SKU.

What is a (P) SKU element?

SKU (Stock Keeping Unit) is a unique product code typically used to internally track a business’s inventory. This may contain information about the color, size, or feature of the product.

In terms of (P) SKU element in GemPages, it is designed to display the SKU which can be found in Shopify to the webpage interface.


(P) SKU is a child element of the Product module, which means you will need to drag this element into a Product module to make it work.

How to configure (P) SKU element

1. Review and edit SKU from Shopify

Step 1: From Shopify Admin > Products > All products, choose your product


Step 2: Scroll down to the Inventory section, you will find a box called SKU, where you can review or edit the product code

2. How to add (P) SKU Element to GemPages

Step 1: Access the Library on the toolbar of the GemPages editor page


Step 2: Click on the Element tab, then search for (P) SKU


Step 3: Click on the Add button at the bottom to add this Element to GemPages


Step 4: You are now able to find this element on the left sidebar dashboard

Settings Tab's Parameters

Title Tag: This setting allows you to adjust the type of Heading title for SKU (from Heading 1 to Heading 6).

Typography: GemPages provides powerful styling options for the (P) SKU element.


The symbol on the top right corner means we are able to adjust the setting for one or more specific devices without affecting the others
    • Font weight: Choose the preferred font weight for your SKU from the drop-down menu. 
    • Font Size (in pixel), Line Height (in em), and Letter Spacing (in pixel): For these parameters, you just need to simply slide the adjustment bar from left to right and vice versa to configure them.
    • Color: This parameter allows you to choose the color for the text
    • Font: You can choose between any fonts available in the Font Manager or you can add any custom font from external sources. For better page loading and graphic design, the maximum font displayed on a page is three fonts. However, there are no limits when configuring fonts in your store. You can take a look at this article to know how to add a custom font to your site.
    • Text Transform: This allows you to customize your text (None, Uppercase, Lowercase, Capitalize)

Label Text: You can choose to enable or disable the label text for this element. Also, you are free to customize the Text Value in case you want to enable this feature.



Alignment: This parameter allows you to determine how the text is positioned within the description box. The four primary types of text alignment include left-aligned, centered, right-aligned, and justified.


Extra Class: If you wish to customize the variant's content element in a particular way, kindly use this field to add a class name and then refer to it in the CSS file.




The (P) SKU element is all set now. If you're interested in learning more about the powerful & user-friendly GemPages, please feel free to figure out more articles here or reach our Support Team. We'd be happy to answer any questions you have.

Was this helpful?