Sticky add to cart - horizon theme

Shopify Discussion
, ,
1

hi, how can i custom edit the styling of the sticky add to cart button.

horizon theme

cheers

2

Dear @RankConvert

Here is a step-by-step guide on how to customize its styling:

Step 1: Access the Theme Code Editor

  1. Log in to your Shopify Admin.
  2. Go to Online Store > Themes.
  3. Next to your Horizon theme, click the Three Dots (…) and select Edit code.

Step 2: Locate the Primary CSS File

  1. In the search bar on the left sidebar, type theme.
  2. Look for a file named theme.css or base.css.
  3. Scroll to the very bottom of this file to prepare for adding new code.

Step 3: Add Custom Styling (Example)

Below is an example snippet to change position of the “add to cart” form .

Note: This code is an Example only. Every website may have unique class names depending on the specific version of the Horizon theme or installed apps.

.shopify-product-form {
position: fixed;
}

Step 4: Save and Preview

  • Click Save in the top right corner.
  • Open a product page on your mobile device or desktop browser to view the changes.

Since every store has its own unique branding and the Horizon theme structure can vary between updates, the example code above might need fine-tuning to work perfectly for you.
Please provide the link to your website! I will personally inspect your site’s structure and provide you with a tailored code snippet that ensures your Sticky Add to Cart button is both beautiful and functional across all devices.

Best regards,
Eric