Styling Kahani

Basic Styling

⚠️ Any custom styling (css) set from within your Shopify theme will override styling set in the Kahani portal. Kahani portal previews currently does not display custom styling set at the theme level and defaults to styling set in the Kahani portal. 

Basic components of Kahani's components can be styled from within the Kahani portal.  As a user you can set a primary color of your CTAs and Story Borders.

Custom Styling (Recommended)

⚠️ Requires a developer to make CSS and styling updates in your Shopify theme.

Kahani Custom CSS Injector 

After installing the app block via your Shopify Dashboard and creating your first story block - Kahani will need to be tailored to match your eCommerce site's brand styles and formatting. All custom CSS styles that you want to add to your Kahani Story Blocks will have to be placed inside of our custom CSS injector javascript function. They can not be placed inside of a normal CSS file or style tag. See the screenshot below for the function, place the function with your custom css code to any Shopify liquid snippet file, theme file, section file, template file, or javascript asset file.

window.addEventListener('kahaniReady', function () {
   window.KahaniModule.customCSS=`
      //custom css for kahani elements goes here
   `
})

How to style Kahani using custom CSS

Your Kahani Story Block will come preloaded with basic styling however everything can be overridden to your brand's preference. To effectively override the preset Kahani styles you may need to include an !important tag in your CSS declaration. See example below

.kahani-thumbnail-label {
   font-family: "Neuzeit Office", sans-serif !important;
 }

Most common Kahani web elements to style

Refer to the categories below for the most common Kahani web elements that you will want to adjust.

Label Fonts

You can change the font family of any Kahani web element in the module, the most common CSS classes you will want to target are listed below 

.kahani-thumbnail-label

.kahani-story-title

.kahani-cta-button-container button

Story Icon Borders

You can change the color, thickness, style, or remove the border all together of your story icon border by accessing the below CSS class

.kahani-thumbnail

CTA's

Style the Kahani CTA web element by addressing the below CSS class:

.kahani-cta-button-container button

Email Modal

Style the Kahani email capture modal by addressing the below CSS classes:

.kahani-cta-email-modal p

.kahani-cta-email-modal-callout

.kahani-cta-email-modal-submit