How to use Shopify product detail element?

The Product Detail element displays detailed information of a Shopify product, such as images, price, description, and purchase options. It is designed to automatically adapt to the product being viewed, making it perfect for product pages and sales-focused landing pages.

I. Product Detail Element - Content Settings

The product source is Assigned by default.

This means the Product Detail content is automatically linked to the current product context:

• On a product page, it displays that product’s information

• No manual product selection is required

This ensures your page stays dynamic and always shows the correct product data on the live storefront.

You can change the source in the editor if needed for preview or customization purposes.

II. Product Detail Element - Basic Settings

Element ID

Each Product Detail element has a unique Element ID.
You can copy this ID to:

• Apply custom styles

• Target the element with scripts or advanced settings

Alignment

Control how the Product Detail section is aligned within the page:

• Align left

• Center

• Align right

• Distribute content evenly

This helps you position the product layout cleanly within your design.

Size (X & Y)

Adjust the placement of the Product Detail element:

• X: Horizontal position

• Y: Vertical position

Values are set in pixels (px) for precise positioning.

Width & Height

• Width: Set a fixed or percentage-based width (e.g. 100%) for responsive layouts

• Height: Define a custom height or adjust automatically based on content

This allows you to control how much space the product information occupies on the page.

Style

Customize the visual appearance of the Product Detail section, including background and layout styling, to match your store’s design.

Border & Radius

Add borders and rounded corners to visually separate the Product Detail section and create a more polished look.

Best Use Cases

• Product pages

• Sales landing pages

• Featured product sections

• Promotional or campaign pages

III. Product Detail Element – Advanced Settings

The Advanced tab allows you to control interactions, device visibility, animations, and custom styling for your text element.

Display on

Control where the text will be visible:

• Desktop – show/hide text on desktop devices.
• Mobile – show/hide text on mobile devices.

This helps you optimize the layout for different screens (responsive design).

Animation

Bring your text to life with animation effects.

• Type: Choose an animation style (e.g., fade, slide, bounce).
• Loop: Set how many times the animation repeats.
• Duration: Adjust how long the animation lasts (in seconds).
• Delay: Add a delay before the animation starts.

Custom CSS

• Turn this on to apply your own CSS code for advanced styling.
• This is especially useful for developers or advanced users who want unique effects beyond the built-in options.

=> The Advanced tab gives users more control, interactivity, and professional effects, making the text stand out and adapt perfectly to any device.

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