Product SKU

What is a Product SKU?

A Product SKU, or Stock Keeping Unit, is a unique identifier assigned to each product in your store. It helps you track inventory, manage products efficiently, and ensure accurate product information is displayed to your customers. 

How to Add the Product SKU Element in GemPages V7?

Step 1: In the GemPages editor, open the Element List panel. Use search bar or scroll through the list until you find the Product SKU element.

Step 2: Click and drag the Product SKU element from the list, and drop it into your Design Area where you want the SKU to appear.

Step 3: After adding the element, click on it. The Configuration Panel will appear on the left sidebar. This panel has two tabs: Settings and Advanced:

Configure the Settings Tab

1. Product Source

The Product Source section shows which product the SKU element is displaying information from. 

To change the product, click the Product Picker within the product module and select the desired product. This ensures that the SKU displayed matches the correct product.

2. Text Style

You can adjust how the SKU appears on your page using the Text Style options:

• SKU Label: Add a custom text before the SKU content, for example, “SKU:” or “Item Number:”

• Font: Choose a font that matches your store design.
• Size: Adjust the font size to make the SKU more visible or subtle.
• Color: Change the text color to fit your page’s color scheme.
• Alignment: Set the alignment to left, center, right, or justify.
• Font Weight: Choose from Extra Light, Light, Normal, Medium, or Semi Bold to emphasize the SKU as needed.
• Line Height: Control the spacing between lines. You can select from preset options (100%, 120%, 130%, 150%, 180%) or enter a custom value.
• Letter Spacing: Adjust the spacing between characters to improve readability.
• Text Transform: Apply uppercase, lowercase, or capitalize transformations.
• Text Shadow: Add shadow effects to make the SKU stand out.

3. SEO Setting

You can also adjust SEO settings for the SKU text. Use the heading selector to choose from H1 to H6, depending on your page structure.

Proper heading selection helps with search engine optimization and improves accessibility.

Configure the Advanced Tab

For users who need more customization, the Advanced tab provides additional settings. This tab allows you to control behaviors, interactions, and fine-tune styling beyond the basic options in the Settings tab.

For detailed instructions on using advanced features, refer to the Advanced Settings article.