# Sticky Add To Cart
**Sticky Add To Cart** keeps the **Add to Cart** button fixed and visible while customers scroll on the product page.\
This allows customers to add products to the cart quickly without needing to scroll back to the main product information, helping improve the overall user experience and increase conversion rates.
### **How to add the** Sticky Add To Cart **section?**
1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window.
4. In the **Templates -> Add Product information ->** **Add section ->** choose **Sticky Add To Cart.**
## **Sticky Add To Cart** - Settings Guide
This guide explains all available settings for the **Recently Viewed Products** in order from top to bottom as they appear in the Theme Editor.
### Appearance
| Label | Type | Description | Visibility |
| ---------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| Style | `select` | Choose the visual style of the sticky bar. **Default** applies standard theme styling, while **Custom** allows you to configure width and position. | Always visible |
| Sticky width | `range` | Adjust the width of the sticky bar as a percentage of the screen width. | Visible when "Style" is set to "Custom" |
| Sticky position bottom | `range` | Set the distance from the bottom of the screen where the sticky bar should appear. | Visible when "Style" is set to "Custom" |
| Inherit color scheme | `checkbox` | Enable to use the section's default color scheme. Disable to customize specific colors below. | Always visible |
| Background | `color` | Set the background color of the sticky bar. | Visible when "Inherit color scheme" is set to false |
| Background gradient | `color_background` | Set a gradient background. This will override the solid background color if set. | Visible when "Inherit color scheme" is set to false |
| Headings | `color` | Set the color for heading text, such as the product title. | Visible when "Inherit color scheme" is set to false |
| Text | `color` | Set the color for regular text elements. | Visible when "Inherit color scheme" is set to false |
| Primary color | `color` | Set the primary accent color, used for buttons and active states. | Visible when "Inherit color scheme" is set to false |
| Primary hover color | `color` | Set the color of primary elements when hovered. | Visible when "Inherit color scheme" is set to false |
| Borders | `color` | Set the color of borders and dividers within the sticky bar. | Visible when "Inherit color scheme" is set to false |
| Shadow color | `color` | Set the color of the shadow behind the sticky bar to create depth. | Visible when "Inherit color scheme" is set to false |
### Shadow
| Label | Type | Description | Visibility |
| ----------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| Shadow color | `color` | Set the color of the shadow for standard styling. | Always visible |
| Horizontal offset | `range` | Adjust the horizontal position of the shadow. | Always visible |
| Vertical offset | `range` | Adjust the vertical position of the shadow. | Always visible |
| Shadow blur | `range` | Control the blur radius of the shadow; higher values make it softer. | Always visible |
| Spread | `range` | Control how far the shadow spreads outward from the element. | Always visible |
| Button type | `select` | Choose whether to display the "Add to Cart" button as **Text** or an **Icon**. | Always visible |
| Icon | `select` | Select a predefined icon (e.g., Bag) for the button. | Visible when "Custom icon" is set to "None" and "Button type" is set to "Icon" |
| Custom icon | `select` | Choose to upload a custom **SVG** or **Image** icon instead of using the default options. | Always visible |
| SVG icon | liquid | Paste the SVG code for your custom icon here. | Visible when "Custom icon" is set to "SVG" and "Button type" is set to "Icon" |
| Image icon | `image_picker` | Upload an image file to use as the button icon. | Visible when "Custom icon" is set to "Image" and "Button type" is set to "Icon" |
| Icon width | `range` | Adjust the width of the button icon in pixels. | Visible when "Custom icon" is not set to "SVG" and "Icon" is not set to "None" |
| Preset | `select` | Select a typography preset for the product title. Choose **Custom** to configure font family, size, and styling manually. | Always visible |
| Font | `select` | Choose the font family (Body, Subheading, or Heading) for the product title. | Visible when "Preset" is set to "Custom" |
| Size | `select` | Set the font size for the product title. | Visible when "Preset" is set to "Custom" |
| Line height | `select` | Adjust the vertical spacing between lines of text. | Visible when "Preset" is set to "Custom" |
| Letter spacing | `select` | Adjust the horizontal spacing between characters. | Visible when "Preset" is set to "Custom" |
| Case | `select` | Transform text casing (e.g., Uppercase, Capitalize). | Visible when "Preset" is set to "Custom" |
| Style | `select` | Choose how product variants are displayed: as **Dropdowns** or clickable **Pills**. | Always visible |
| Swatches | `checkbox` | Enable to show color swatches instead of text labels for color variants. | Visible when "Style" is set to "Pills" |
| Swatch size | `range` | Set the size of the color swatches in pixels. | Visible when "Swatches" is set to true |
| Variant alignment | `select` | Align the variant picker options to the Left, Center, or Right. | Always visible |
### Layout
| Label | Type | Description | Visibility |
| ----- | ------- | ---------------------------------------------------------------------------- | -------------- |
| Gap | `range` | Adjust the spacing between the product image and details section. | Always visible |
| Gap | `range` | Adjust the spacing between the quantity selector and the Add to Cart button. | Always visible |
### Padding
| Label | Type | Description | Visibility |
| ------ | ------- | --------------------------------------------------------- | -------------- |
| Top | `range` | Set the spacing inside the top edge of the sticky bar. | Always visible |
| Bottom | `range` | Set the spacing inside the bottom edge of the sticky bar. | Always visible |
| Left | `range` | Set the spacing inside the left edge of the sticky bar. | Always visible |
| Right | `range` | Set the spacing inside the right edge of the sticky bar. | Always visible |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://halosoft.gitbook.io/ella-7-documentation/product-page/sticky-add-to-cart.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.