How to use Shopify product inventory element?

Shopify product inventory element displays real-time stock levels or availability status (e.g., "Only 3 left in stock!"). Helps create urgency and manage customer expectations. 

I. Product Inventory Element - Content Settings

The Content tab controls how inventory information is displayed to customers.

1. Icon 

•  Choose or replace the icon displayed next to the inventory message (e.g., clock icon for urgency).

2. Inventory Label 

• Customize the text shown when displaying product stock levels.

• Use {quantity} as a dynamic placeholder to display the actual number of remaining items.

• Example: Hurry up! Only {quantity} items! → will display as Hurry up! Only 3 items! if 3 items are left.

This element is especially useful for creating urgency and encouraging customers to purchase before stock runs out.

II. Product Inventory Element - Basic Settings

The Basic tab allows you to control the appearance and layout of the product inventory element.

1. Element ID 

• Unique identifier for the element, useful for custom code or CSS targeting.

2. Alignment 

• Adjusts the position of the inventory text and icon within its container (left, center, right).

3. Size 

• Controls overall size of the element (padding, width, height).

4. Style 

• Customize the background color, border, or other visual styles.

5. Border & Radius 

• Change the border thickness and roundness of the element’s edges.

6. Margin & Padding 

• Adjust spacing around (margin) or inside (padding) the element for better layout control.

7. Icon Settings:

• Size – Adjust the size of the icon in pixels for better visibility or design fit.

• Rotate – Rotate the icon to a specific angle (0°–360°) to match your theme’s look

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 – Style how the element looks in different states (e.g., normal, hover).

III. Product Inventory 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