Using Shopify colour schemes

Getting Started

  • Using Shopify colour schemes


Viva uses the colour schemes of your theme. Not all themes support the use of Shopify colour schemes. If you are using a theme which does not use Shopify's colour scheme Viva will help generate a colour scheme for you.


Themes With Colour Scheme Support

If you are using a theme which supports Shopify Colour Schemes, you can edit or make further colour schemes by following the steps below:

  1. Click Online Store in the left-hand menu, then Themes below it
  2. Click Customise next to your current theme
  3. Click the Theme Settings icon in the left-sidebar
  4. Click the Colours drop-down menu
  5. Your current colour schemes will be displayed
  6. Either click an existing scheme to edit or click Add Scheme to make a new one
  7. Click Save in the top-right to confirm your changes
  8. Click Exit to finish.

You can set the default Card colour scheme which will be used by Viva for any card blocks you add to a page. You can set the Card colour by following the steps below:

  1. Click Viva Page Builder in the left-hand menu
  2. Click Settings followed by Colours
  3. The default Card colour scheme is displayed. Click the Change drop-down menu to switch to a different colour scheme.

 

Themes Without Colour Scheme Support

If your theme doesn't have a set colour scheme, when editing a page in Viva, you will prompted to save a colour scheme which will be generated on the colours used by your currently installed theme. You can adjust the pre-selected colours if needed. 

Alternatively, you can manually set up a colour scheme in the following way:

  1. In the left-hand menu, below Viva Page Builder, click Settings
  2. Click Colours from the Settings menu
  3. In the Card Colour Scheme section, a default colour scheme will be shown if colours are supported with your Theme.
  4. If Colour Schemes are not supported a warning will be displayed and you will have the option to add a scheme. Click the Add scheme button to setup a colour scheme.
  5. Go through and assign colours to the various elements
  6. Click Save to confirm the colour scheme.

The colour schemes you have generated can then be accessed and used by any blocks you add to a page. To learn more about changing the colour scheme of a block, please click here.