How can I update styles within the “Fan Pass Connect” box?

You can customise styling for some elements of the “Fan Pass Connect” box by changing the values of CSS custom properties provided for basic styling. See the list below:

--font-heading-scale
Size of heading e.g. 0.75, defaults to 1

--font-heading-weight
Numerical font weight of heading e.g. bold 700, defaults to regular 400

--color-foreground
Colour of container text e.g. RGB colour 0,0,0

--color-background
Colour of container background e.g. RGB colour 255,255,255

--color-button-text
Colour of “Connect your Fan Pass” button text e.g. RGB colour 255,255,255

--color-button
Colour of “Connect your Fan Pass” button background e.g. RGB colour 0,0,0

--buttons-radius-outset
Button shape e.g. any valid border-radius value 

--buttons-border-width
Button border width e.g. rems or pixels

There are two ways you can update styling for the “Fan Pass Connect” box – either within a theme template file or the Custom CSS settings within the theme editor.

Theme template file

1. Access your store’s admin and navigate to “Themes” under the “Online Store” Sales channels.
2. Launch the options menu of the backup theme previously created and select “Edit code”.
3. Open the template file you would like to style e.g. “page.fan-pass-connect.liquid”.
4. Place the style block above the snippet liquid code within the template. See below for an example of what the style block could look like:

<style>

:root {

--font-heading-scale: 0.75;

--font-heading-weight: 700;

}

</style>
...snippet Liquid code

5. You can also target component elements using the ::part and ::part() CSS selectors and change the values of the component’s internal CSS custom variables, which begin with the prefix –fp-. These values can be determined by inspecting elements within the development tools of your browser.
   See below for an example:

<style>

    ::part(h2) {

        --font-heading-scale: 0.75;

        --font-heading-weight: 700;

    }

</style>

6. Save your template file.
7. Review your changes by opening up a preview of your theme and go to the page that you have added the styling to.

Custom CSS Settings in theme editor

1. Access your store’s admin and navigate to “Themes” under the “Online Store” Sales channels.
2. Launch the theme editor by selecting “Customize” for your backup theme.
3. Select the Cog icon to open “Theme settings”.
4. Locate and expand “Custom CSS”.
5. Place the style block into the field. See below for an example of what the style block could look like:

:root{

     --font-heading-scale: 0.75;

     --font-heading-weight: 700;

    }

6. You can also target component elements using the ::part and ::part() CSS selectors and change the values of the component’s internal CSS custom variables, which begin with the prefix –fp-. These values can be determined by inspecting elements within the development tools of your browser.
   See below for an example:

::part(h2) {

        --font-heading-scale: 0.75;

        --font-heading-weight: 700;

    }

7. You can review your changes within the theme editor by opening the page and updating the styling to your needs.
8. Save the theme once you have finalised your styling.