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?
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products from the dropdown window.
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
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
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
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
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
Last updated