Getting started

By default, options from app will inherit styles from your theme. Depending on how your theme is set up, these styles may not carry over in the best way possible. However, they can be styled with CSS code. This document will provide an introduction on how to customize the style of options added by our app.

A basic understanding of HTML and CSS code may be required to customize the options to your liking. If you can't seem to figure it out, please don't hesitate to send your customization request to us at the in-app live chat. We're happy to lend a hand 🤩

Step 1 - Go the your Online Store -> Themes then choose Edit code



Step 2 - Open the Assets folder and choose to Add a new asset. Create a blank file and add the file name as tepo-product-options





This is where you can add the CSS snippet and within the curly brackets, you will need to add CSS properties (each on a new line) that will style your elements.

Step 3 - Add the css file to your theme.liquid

Open theme.liquid file and paste this code {{ 'tepo-product-options.css' | asset_url | stylesheet_tag }} before the </head> tag




Step 4 - Add CSS properties (each on a new line) to style your elements.




Step 5 Save your changes.

You can view your product pages to check out the styles you have applied. Good work! 🎊🚀

Some common cases

Case 1. Increase option title font size

.tcustomizer-field__heading {
        font-size: 13px;
        }

Case 2. Increase image swatch or color swatch thumbnail size

You need to add a custom class custom-image-swatch to the image swatch first



Then paste this code to the tepo-product-options.css file, or you can change the CSS style as your wish

.custom-image-swatch .tcustomizer__image--small {
 	width: 7em;
  	height: 7em;
        }

(Optional) When the image swatch get bigger, at some case you may want to change the aspect ratio of the inner image to make the image swatch looks prettier. Here, you can use object-fit property. There are plenty of value that you can choose for object-fit property (fill, contain, cover, none, scale-down). You can choose it yourself to get the relevant style for the inner image.

.custom-image-swatch .tcustomizer__image-content {
 	 object-fit: contain;
 }

Case 3. Change button colors including: text and background color

.tcustomizer-btn--radio {
 	 color: black;
       background-color: pink;
 }

Hopefully this article has helped you customize your option style. Things change all the time, so if you run into issues or need our help, please don't hesitate to share them with us at support@tepo.app or use the in-app live chat. We're happy to lend a hand 🤩

Updated on: 25/01/2024