Shopify options/css variables used with Bootstrap

New Member
2 0 0

I have been trying to find a way to take my custom Shopify options(converted to css variables) and apply them to the _variables.scss partial imported into the Bootstrap framework.

 

Following this tutorial Styles-with-Liquid I created a css-variables liquid file and added my css variables

 

<style>
    :root {
        --breakpoint-sm: {{settings.breakpoint_sm}}px;
        --breakpoint-md: {{settings.breakpoint_md}}px;
        --grid_gutter:   {{settings.grid_gutter}};
    }
</style>

 

 

Then I tried to use the css variable inside _variables.scss

 

$grid-gutter-width:           var(--grid_gutter) !default;

 

This should dynamically set the width of the gutters between elements in the grid system but all I see in the inspector for the css is:

 

padding-right: var(--grid_gutter)/2;
padding-left: var(--grid_gutter)/2;

Any idea how to achieve this or another approach to using Shopify Options inside Bootstrap?

 

0 Likes