Editing your theme

Your theme is what defines the appearance and display of your customizer.

Updated over a week ago

Your Kickflip theme can be customized to match the style of your online store, to ensure a coherent branding throughout your website. You can choose between two themes, Barebones for complex products, Booklike for simpler ones.

Editing your theme

  1. Log in to Kickflip.

  2. In the left menu, click on Theme editor.

  3. Modify your theme's fonts, colors, borders, and any other option.

  4. Hit the Publish button.

TIP

If you have longer descriptions, they will display entirely in the desktop view. However, we recommend reducing the font size for the 'Mobile descriptions' in the mobile view so that the descriptions be visible for the customer.

Fonts

You can select any font from the Google Fonts catalog or upload your own font.

Font format

While you can use TTF or OTF fonts on the web, WOFF and WOFF 2.0 are generally preferred due to their optimization for web use, which includes smaller file sizes, better browser compatibility, and often more suitable licensing terms. If you do use TTF or OTF, make sure to consider the potential impact on customizer's performance and user experience, and ensure that the fonts are legally licensed for web use.

Thumbnails shape

If you choose the Booklike theme, you can modify the shape of your thumbnails from round to square.

Under Thumbnails button edit the Thumbnail rounding value.

  • 0 = square

  • Any value higher than 0 will add rounded corners to your thumbnails, up to a point where it will become a perfect circle.

Large thumbnails buttons

If you choose the Booklike theme, you can use large thumbnail buttons for some specific questions. In the following example, large thumbnail buttons are used in order to display the different phone case styles more clearly.

To use large thumbnail buttons for a question :

  1. In the Theme Editor, select the Booklike theme.

  2. Go to My Products section and open your product.

  3. Open the question for which you want use large thumbnails.

  4. Within the right side panel, make sure that the Input type is Thumbnail.

  5. Toggle on Large thumbnail.

  6. If needed, you can edit the large thumbnails buttons size and style in the Theme editor.

Displaying your question panel on the left or right side of your customizer

You can choose to display your question panel on the left or right side of your customizer. To do so, go to the Theme Editor, under Question Panel > Panel position, select Left or Right.

Adding step thumbnail images next to your question titles

If you choose the Barebones theme, you can add step thumbnail images next to your question titles to illustrate what they're about.

  1. In the Theme Editor, select the Barebones theme.

  2. Go to My Products section and open your product.

  3. Open the question for which you want to add a step thumbnail image.

  4. Within the right side panel, click on the Settings icon.

  5. Under Step thumbnail, upload your thumbnail image.

  6. To edit the thumbnail size, rounding, border color and thickness, go to the Theme Editor > Step Title

Resetting your theme

To restore your theme settings to their original value, click on the Reset button located at the bottom left of the theme editor.

CAUTION
This action cannot be undone.

Did this answer your question?