Fixed Sales Nav is a Shopify theme section in the Section Star library. The Fixed Sales Nav combines the best of two favorites: an in-page navigation and a fixed sales bar. The navigation makes it easy to jump in between product features while the buttons make it easy for customers to purchase.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Text
Set the text size for your widget
| Setting | Type | Default |
|---|---|---|
| Override theme fonts | Checkbox | Off |
| Text Font | Font | sans-serif |
| Text Size | Range | 13 |
| Text Color | Color | #111111 |
| Link Color | Color | #0d8bf4 |
| Price Font | Font | sans-serif |
| Price Size | Range | 18 |
| Price Color | Color | #111111 |
Section Design
Set the design for the section
| Setting | Type | Default |
|---|---|---|
| Show Section | Select (All Devices, Mobile Only, Desktop Only) | all |
| Background Color | Color or gradient | linear-gradient(164deg, #FFF 100%, #F… |
| Grid Spacing | Number | 30 |
| Max Width of Section | Number | 1000 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 10 |
Text
Set text for the section
| Setting | Type | Default |
|---|---|---|
| Product Description (optional) | Inline rich text | — |
| Custom Text (optional) | Text | — |
| Sold Out Text | Inline rich text | - Sold Out |
| Select Text | Inline rich text | Select Option |
| Add to Cart Text | Inline rich text | Add to Cart |
| Buy Now Text | Inline rich text | Buy Now |
Buttons
Set styles for the Add to Cart and Buy Now Buttons
| Setting | Type | Default |
|---|---|---|
| Button Text Size | Range | 14 |
| Buy Now Text Color | Color | #fff |
| Buy Now Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #111… |
| Buy Now Border Color | Color | #111 |
| Add to Cart Text Color | Color | #111 |
| Add To Cart Background Color | Color or gradient | linear-gradient(0deg, rgba(240, 240, … |
| Add to Cart Border Color | Color | #dddddd |
| Button Border Size | Number | 1 |
| Padding Left/Right | Number | 20 |
| Padding Top/Bottom | Number | 10 |
| Border Radius | Number | 10 |
| Highlight Color | Color | #f0f0f0 |
Product
Select the product for the fixed bar. Product pages should use the current option. Other pages, should use a selected product.
| Setting | Type | Default |
|---|---|---|
| Product Source | Select (Current (product pages only), Selected (select a product below)) | current |
| Product | Product | — |
Display
Display the section
| Setting | Type | Default |
|---|---|---|
| Subtle Shadow on Container | Checkbox | Off |
| Mobile Display | Select (All Elements, Nav Only, Buy Buttons Only) | all |
Advanced
Advanced options for the section
| Setting | Type | Default |
|---|---|---|
| Show Quantity | Checkbox | Off |
| Show Buy Now Button | Checkbox | On |
| Show Add to Cart Button | Checkbox | On |
| Show After Scroll | Checkbox | Off |
| Show after Scroll Position (in px) | Number | 500 |
| Mobile Show after Scroll Position (in px) | Number | 500 |
Navigation
Set the display of Navigation
| Setting | Type | Default |
|---|---|---|
| Active Link Style | Select (Bottom Border, Button) | button |
| Active Border Color | Color | #DDDDDD |
| Active Border Radius (for button display) | Number | 10 |
| Active Background | Color or gradient | linear-gradient(0deg, rgba(240, 240, … |
| Text Size | Range | 14 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 20 |
| Spacing between Nav items | Number | 0 |
| Nav Icon Size | Number | 20 |
| Nav Icon Spacing | Number | 5 |
| Icon Color | Color | #ccc |
| Active Icon Color | Color | #0A7EDB |
| Nav Alignment | Text alignment | left |
Sticky Offset
Optional offset to account for header
| Setting | Type | Default |
|---|---|---|
| Offset from Top | Number | 60 |
| Offset from Top (Mobile) | Number | 40 |
Thresholds
The threshold indicates the % of the screen the scroll position must reach before the section is set to active.
| Setting | Type | Default |
|---|---|---|
| Threshold | Range | 50 |
| Mobile Threshold | Range | 50 |
Navigation block settings
Navigation Link
Set the name and icon for your navigation. Navigation items automatically link to sections in the order they appear within the section hierarchy.
| Setting | Type | Default |
|---|---|---|
| Nav Name | Text | New Item |
| Nav Icon | Select (No Icon, Uploaded Image, Cart, Gift, Gift Card, Shipping…) | tag |
| Image | Image | — |
Advanced
Skip sections in the hierachy to link farther down the page
| Setting | Type | Default |
|---|---|---|
| Skip Sections | Number | 0 |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Fixed Sales Nav”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.