Sticky add to cart section

Setting	Description
Color scheme	Choose a color scheme to apply color for sticky add to cart background color, text color, and button color from the list with color schemes. *You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes.
Section style	As you scroll down the page, you have two options for the appearance of the sticky “Add to Cart” section: Default: The sticky “Add to Cart” section will span the full width of the page, typically positioned at the bottom and the color options are displayed in a dropdown list. Right side: The sticky “Add to Cart” section will be a shorter block positioned on the right side of the page and the color options are displayed in a dropdown list. Color swatch: The sticky “Add to Cart” section will span the full width of the page, typically positioned at the bottom and the color options are displayed in color swatches. Note: Color swatch style is designed for products that only have color options. For more details on how to set up and use this style, read below.
Heading font family	Heading Body In Theme Settings, you can assign a different font family to headings and body text. This allows you to customize the visual style of your heading in the Sticky add to card. For some headings, it might be more effective to apply the body text style instead of the designated heading font. This choice depends on how well the font families harmonize and the overall appearance you want to achieve.
Color variant name	Enter the name of the color option exactly as it appears in the admin panel.
Image ratio	Image Ratio controls how your images look based on their shape. Here are the options: Adapt to Image: Keeps the original shape of the image, no cropping. Portrait: Makes the image taller. Square: Makes the image a perfect square. Landscape: Makes the image wider.
Button style	In Shopify, Button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store.
Button outline	Outline buttons have a transparent background with a visible border, creating a sleek and modern appearance. Choose from the following options: None: The button has no outline. It appears flat, with just the background color and text, giving it a clean, minimal look. Outline: The button has a visible border around it, but the background is transparent. Outline on Hover: The button appears flat without a border or background initially. However, when the user hovers over it, a visible border appears, and the button's background remains transparent.

The Color Swatch style is a sticky add-to-cart layout that displays product color options as color swatches. This allows customers to select their desired color and add the chosen variant to the cart.

Visual example:

This Sticky Add to Cart style is designed for products that are available in different colors and do not have other variant types, such as size or material.

For example, the product Sonic Pro 800 headphones is available in grey and white. When viewing the product, the customer can select their preferred color by clicking on a color swatch and add the product to the cart.

This style can also be used for products with multiple variant types — for instance, color and size. However, please note that in such cases, the customer will only be able to select the color. The other variant options (such as size) will be automatically set to the first available option in the list when the product is added to the cart. It’s also important to note that for this style to work correctly, the color option must be listed first in the admin panel.

For a better user experience, we recommend using the "Default" style or the "Right Side" style if you're selling products with multiple distinguishing variant types beyond just color.

How to set up the Color Swatch style:

Go to the Customizer and open a product detail page.
Locate the Sticky Add to Cart block.
Select the style from the dropdown menu.
In the "Color variant name" field, enter the name of the color option exactly as it appears in the admin panel.
Save the changes and view the product detail page to see how the selected Colore swatch style looks.