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


    :root {
        --breakpoint-sm: {{settings.breakpoint_sm}}px;
        --breakpoint-md: {{settings.breakpoint_md}}px;
        --grid_gutter:   {{settings.grid_gutter}};



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?