How to use Shopify product sort element?

The Shopify Product Sort element allows you to display a customizable sorting dropdown for your product listings, enabling customers to easily sort products by various criteria such as price, date, popularity, or name. This feature helps improve user experience and product discoverability on your store pages.

I. Product Sort Element - Basic Settings 

1. Customizable Alignment

• Easily position the sort element anywhere on your page — left, center, right, or stretch — to fit your layout perfectly.

2. Size & Position Control

• Adjust the element’s exact position (X, Y) and dimensions (width, height) for precise placement and responsive design.

3. Flexible Layout Options

• Configure the spacing (gap) between sorting options and choose between horizontal or vertical layouts to match your page style.

4. Label Customization

• Personalize the label’s font family, size, color, weight, and style to ensure it aligns with your store’s branding.
• The element automatically connects with your Shopify product data, so sorting updates happen in real time without manual setup.

5. Trigger 

• Customize elements such as font family, font size, text color, font weight, font style, line height, letter spacing, text decoration, text transform, text shadow, border, radius, spacing. 

6. Option 

• Customize elements such as font family, font size, text color, font weight, font style, line height, letter spacing, text decoration, text transform, text shadow, spacing.

II. Product Sort 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