How to use Shopify product SKU element?

Shopify product SKU element displays the product’s Stock Keeping Unit, useful for inventory tracking or for customers who order by SKU. 

I. Product SKU Element - Content Settings

1. Custom label

• Change the label text (default: “SKU”).

2. SEO > HTML tag 

• Choose appropriate HTML tag (e.g., Paragraph) for SEO.

II. Product SKU Element - Basic Settings

1. Element ID 

• Unique identifier for the element (useful for custom code/CSS targeting).

2. Alignment 

• Position the SKU text (left, center, right).

3. Size 

• Control width and height of the SKU block.

4. Style 

• Adjust background color, opacity, and other styling.

6. Border & Radius 

• Add borders and rounded corners if needed.

7. Margin & Padding 

• Fine-tune spacing around the SKU text.

8. Text

8.1 Text alignment

• Align your text to the left, center, right, or justify it across the container.
• Helps structure your content according to the design layout.

8.2 Type

• Choose the text type: Paragraph, Heading 1, Heading 2, Heading 3, etc.
• This is useful for creating proper content hierarchy and SEO-friendly headings.

8.3 Font family

• Select from different fonts (e.g., Poppins).
• This changes the overall style and feel of your text.

8.4 Font size

• Adjust the text size in pixels (px).
• Example: Larger size for headings, smaller size for body text.

8.5 Text color

• Change the text color using the color picker.
• You can match it with your brand colors or background design.

8.6 Font weight

• Adjust how bold or light your text appears (e.g., 400 = normal, 700 = bold).

8.7 Font style

• Choose between default, italic, or oblique text styling.

8.8 Line height

• Control the spacing between lines of text.
• A higher value increases readability, especially for longer paragraphs.

8.9 Letter spacing

• Adjust the space between individual letters.
• Useful for creating a clean, modern, or dramatic look.

8.10 Text decoration

Add styling such as:

• Underline (U)
• Strikethrough (S)
• Overline (‾)

8.11 Text transform

Change text case automatically:

• Default – keeps original typing
• Uppercase – converts all letters to caps
• Lowercase – converts all letters to lowercase
• Capitalize – capitalizes the first letter of each word

8.12 Text shadow

• Add a shadow effect behind the text.

• Can make text stand out more against the background.

9. State

• Customize how the SKU appears in different states (Normal, Hover).

III. Product SKU Element - Advanced Settings

1. Display On

Control where the image is visible:

• Desktop: Show or hide the image on desktop devices.
• Mobile: Show or hide the image on mobile devices.

2. Animation

Add visual effects when the image appears on the page:

• Type: Choose from available animations (fade, slide, zoom, etc.).
• Loop: Number of times the animation should repeat.
• Duration: How long the animation lasts (in seconds).
• Delay: Time before the animation starts (in seconds).

3. Custom CSS

Apply custom styling for advanced design control:

• Class Name: Add a CSS class that you can reference in your stylesheet.
• Custom Style: Write inline CSS styles that apply only to this image element.

Thanks for reading! If you have any questions, please contact us via email: support@shopone.io