Custom Styles

‍

① Disable add to cart button when product is out of stock

Select your Add to Cart Button and give it sf-out-of-stock combo class.

Scroll down in the style panel and set the mouse events to none. Remove the sf-out-of-stock class and publish.

‍

② Give an element custom style when product is out of stock

Add the following custom css to your page (head section) to give an element inside the product container custom style when the product is out of stock.

In this example we are selecting an element that has the stock-indicator class and setting its background color to red. Change the selector to fit to your use-case.

<style>
[sf-product][sf-out-of-stock] .stock-indicator {
  background-color: red;
}
</style>

‍

③ Sliding cart opening animation

Follow these steps to create a sliding cart opening animation.

1. Select your Cart Container inside the Cart Popup. Fix it to the right side of the page and set its height to 100%.
2. Add the following styles to the Cart Container:
   ‍transform: translateX(100%)
   opacity: 0
   transitions: transform (200ms)
3. Add sf-cart-opened combo class to both your Cart Popup and Cart Container elements.
4. Select the Cart Container and add the following styles while sf-cart-opened combo class is added:
   ‍transform: translateX(0%)
   opacity: 1
5. Remove the sf-cart-opened combo class from both elements and publish the site.

‍

④ Hide an element when user is logged out

Add the following custom css to your page (head section) to hide an element when user is logged out.

In this example we are selecting an element that has the element-to-hide class and hiding it when user is logged out. Change the selector to fit to your use-case.

<style>
body[_sf-logged-out] .element-to-hide {
    display: none;
}
</style>

‍

⑤ Hide an element based on selected country

Add the following custom css to your page (head section) to hide an element when a certain country is selected using the Currency Selector Component.

Imagine a scenario where you have a product description with two tables containing metric and imperial units. You probably want to show the imperial units only to US customers and the metric units to Australian and Canadian customers. To achieve that you can use the custom CSS below.

In the example,

1. We are hiding an element that has metric-table class when United States is selected as country.
2. We are hiding an element that has imperial-table class when Australia or Canada is selected as country.

Change the class selectors and the countries to fit to your use-case. You can find the complete country list here.

<style>
body[_sf-country="US"] .metric-table {
    display: none;
}

body[_sf-country="AU"] .imperial-table,
body[_sf-country="CA"] .imperial-table {
    display: none;
}
</style>

‍

⑥ Finsweet CMS Load

If you are using Finsweet's CMS load solution, you need to initialize the dynamically added product containers. Add the the code snippet below to your page settings before the </body> tag closes:

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsload',
  (listInstances) => {
    const [listInstance] = listInstances;
    listInstance.on('renderitems', (renderedItems) => {
      window.Shopyflow.fetchNew();
    });
  },
]);
</script>