Description of the Section
The Fixed Sales Bar is a customizable, fixed-position sales bar designed to engage customers and enhance product visibility. It sticks to the bottom of the page and features essential product information, including the product price, availability status, and customizable call-to-action buttons like "Add to Cart" and "Buy Now." This bar is particularly useful for e-commerce stores with long product pages or for encouraging quick purchasing actions.
Demo of the Section
Installation Instructions
- Download the Sections Pro app on the Shopify App Store
- Open the app and navigate to Premium Sections
- Search for "Fixed Sales Bar"
- Click to Publish or Purchase
Sample Use Cases for a Shopify E-commerce Store
- Promoting Flash Sales: Highlight limited-time offers to create urgency and drive sales.
- Enhancing Mobile Usability: Ensure critical actions like adding to cart or buying now are always accessible, even as users scroll through long product descriptions.
- Cross-Selling Products: Use the bar to display related or complementary products when the main product is out of stock or less prioritized.
- Highlighting New Arrivals: Instantly showcase newly added products to improve visibility and purchase rate.
Overview of the Configuration Settings
-
Text Settings:
- Text Font: Choose a font for the text in the sales bar.
- Text Size: Set the font size for the text (10px - 50px).
- Text Color: Pick a color for the text.
- Link Color: Customize the color of any links in the sales bar.
-
Price Settings:
- Price Font: Choose a font for the price text.
- Price Size: Set the font size for the price (10px - 50px).
- Price Color: Pick a color for the price text.
-
Color Settings:
- Background Color: Set a background color or gradient for the sales bar.
- Highlight Color: Customize the highlight color for selected options or hovered elements.
-
Text Content:
- Sold Out Text: Customize the text displayed when a product is sold out.
- Variant Select Text: Set the text for variant selection.
- Add to Cart Text: Customize the "Add to Cart" button text.
- Buy Now Text: Customize the "Buy Now" button text.
-
Button Settings:
- Buy Now Text Color: Choose a text color for the "Buy Now" button.
- Buy Now Background Color: Set a background color for the "Buy Now" button.
- Buy Now Border Color: Customize the border color for the "Buy Now" button.
- Add to Cart Text Color: Choose a text color for the "Add to Cart" button.
- Add to Cart Background Color: Set a background color for the "Add to Cart" button.
- Add to Cart Border Color: Customize the border color for the "Add to Cart" button.
- Button Text Size: Set the font size for the button text (10px - 50px).
- Padding Left/Right: Adjust the padding on the left and right sides of the button.
- Border Radius: Customize the border radius for the buttons.
-
Dimensions:
- Grid Spacing: Set the spacing between elements in the grid layout.
- Control Height: Adjust the height of input controls like quantity selectors.
- Max Width of Section: Set the maximum width for the sales bar.
- Padding: Customize the padding around the sales bar (top, bottom, left, right).
-
Product Settings:
- Product Source: Choose whether to display the current product (for product pages) or a selected product.
- Product: Select the product to be displayed in the fixed sales bar.
-
Display Settings:
- Container Shadow: Enable or disable a subtle shadow effect on the container.
-
Advanced Settings:
- Show Quantity: Toggle the visibility of the quantity selector.
- Show Buy Now Button: Toggle the visibility of the "Buy Now" button.
- Show Add to Cart Button: Toggle the visibility of the "Add to Cart" button.
- Show After Scroll: Toggle the visibility of the sales bar based on scroll thresholds.
- Threshold from Top: Set the scroll threshold for displaying the sales bar on desktop.
- Mobile Threshold: Set the scroll threshold for displaying the sales bar on mobile devices.