The Influencer List comes with settings to make it easier to have them look and feel like the rest of the eCommerce store. Most styling on the blocks can be done through CSS and element attributes on the blocks.

Fitting the block on the page

Influencer List block will respond to it's parents width and fit within it. It is recommended it takes up most of the horizontal content on the page. In other words, spans the full width or only shares width with a sidebar/navigation bar.

How CSS and styling is applied to the block

Influencer List block is implemented as a custom web component inside of its own shadow DOM. All style rules within the block components will not bleed into the rest of the page or other components. Also, the components will not have access to any CSS rules outside of the component except for inherited rules:

CSS custom properties
font-size
font-family
font-*
background
color
line-height

Ways to customize the Influencer List block

Inherited Styles

Any parent to the block should set a font-family, font-size, and color the blocks will use for defaults. We recommend just using the website's defaults for these.

We also use the --lc-primary-color CSS variable to configure your brand's main color. This optional variable will apply in various app blocks for a consistent look across the storefront.

<body>
  <style>
    body {
      --lc-primary-color: revert;
    }
  </style>
  <div>
    <influencer-list-block></influencer-list-block>
  </div>
</body>

Block HTML Attributes

HTML attributes can be used to customize the Influencer List block. Use them for basic customization, and leverage CSS variables for more in-depth customization.

<influencer-list-block 
   rows="3" # supports positive numbers, recommended maximum: 5
   columns="4" # supports only 3 or 4 columns
   header="Landing Page Title" 
   description="Landing Page Subtitle"
   hide-banner # add it only if you want to hide the banner section 
   hide-load-more-button # add it only if you want hide "load more button"
>
</influencer-list-block>

Use CSS custom properties and attributes

Lowest level of customization can be achieved by using the following custom properties and attributes directly into css stylesheets. Below are all custom properties and attributes that can be applied to the block. All settings are optional.

<style>
 influencer-list-block {
      /**
      * General block variables
      */
      --lc-primary-color: #40c;

      /**
      * General banner variables
      */

      --lc-banner-font-size: 1rem;
      --lc-banner-font-color: white;
      --lc-banner-background: transparent; /* you may need to use !important here when customizing a Shopify page */

      /**
      * Specific banner title variables
      */

      --lc-banner-title-font-color: inherit;
      --lc-banner-title-font-weight: 400;
      --lc-banner-title-font-size: 1rem;
       
      /**
      * Specific banner subtitle variables
      */

      --lc-banner-desc-font-color: inherit;
      --lc-banner-desc-font-weight: 400;
      --lc-banner-desc-font-size: 1rem;

      /**
      * Grid variables
      */
      
      --lc-grid-item-max-width: 500px;
      --lc-grid-item-min-width: 172px;
      --lc-grid-item-gap: 10px; 
      --lc-grid-item-border-radius: 0px;
      --lc-grid-item-hover-shadow: 0 4px 10px 3px rgba(0, 0, 0, 0.25);
      --lc-grid-item-gradient: linear-gradient(180deg, rgb(0, 0, 0)) 100%;
      --lc-grid-font-color: white;
      --lc-grid-font-weight: 600;
      --lc-grid-font-size: 1rem;

      /**
      * See more button variables
      */

      --lc-btn-border-radius: 5rem;
      --lc-btn-padding: 0 2.75rem;
      --lc-btn-background-color: transparent;
      --lc-btn-color: #40c;
      --lc-btn-border-color: #40c;
      --lc-btn-font-size: inherit;
   }
</style>