TABLE OF CONTENTS

• 1. Default Button
• 2. Swatch Color 
• 3. Swatch Image
• 4. CSS and CSS + Background
• 5. Add labels [Sale, New, Hot,..]

Theme Config

1. Default Button

This block is used for modifying a new custom cart button in case store owners are not satisfied with the available cart buttons. 

We have unlimited amount of cart buttons, just add block Default button and modify. We mark each button created with numbers from the top to bottom. So when you choose the cart button style (at the 7.Product Card section of the theme general settings), you can identify which button you want to display on the store. 

- Block label: you can name this block by insert a name to this text box (eg: button style 1)

- Font size: 

• If you insert only one value (eg: 45px), the text size will display with 45px regardless of the interfaces Mobile or Desktop
• If you insert 4 values (eg: 45px, 50px, 55px, 60px), the values will be applied following the order: Mobile (45px), Tablet (50px), Desktop (55px for desktop with the small screen), Desktop (60px with bigger screen)

>>> You can view this clip to be clearer

- Font weight: drag to set the font weight as you want

- Padding: Insert the values in pixels to set the padding of the button 

Using the color picker to adjust the corresponding color for the button

• Text color
• Background color

• Hover: Text color

• Hover: Background color

- Border width: drag the set the width

- Adjust the color for Border color, Hover: Border color

- Rounded corners: insert the value to set, the bigger the number is, the rounded the corner is

>>> For the illustration, view this clip to see the example of modifying these elements

So you can customize the available buttons or create new ones with the Default Button block at the Theme Config section. To display or change the cart button, you need to go to the Theme Settings (at the left corner for the page) and change the number that match the button on the Theme Config. (Clip)

2. Swatch Color 

This block is used for displaying the swatch color for product page. You can type the color name into the text box to display all the color that the available products on your store. Following the format to insert the color name: [color name 1]: [hex code]; [color name 2]: [hex code]; .....

At the Theme Config > Add block "Swatch Color" > Insert the color name and its hex code into the content box

To edit or add the swatch/color/variant to a product, you need to login to you Shopify admin > go to the Products section > Access the product that you want to add or edit the variant > scroll down and click on the Edit button at the variant area

>>> Watch the clip to see how to edit and add the color to the product

3. Swatch Image

- Block label: just give a name to this block if you want to easily identify it. If not, you can leave it blank

- Color name: You must insert the EXACT name of the color that you added in the Admin to enable it 

- Image: Select the image form the library or you can upload your own image to set the swatch image for the product

*Note: the Color name has to be exact with the color name that you added to the Admin

>>> View this clip to see how it's changed

4. CSS and CSS + Background

To use these blocks, you need to know a little bit about the Css to insert the values into the box. You can take a reference via this link

5. Add labels [Sale, New, Hot,..]

To add the labels for products, you need to login to the Shopify admin > Products > choose a specific product to add labels > Scroll down to the Tags area > add tags following the format "_label: [name]" (Eg: _label: Hot) > Save

Note: For the label SALE, we have another way to display it. Still login to the Shopify admin > choose a product to add label Sale > scroll down to the PRICE area > insert a sale price into the PRICE box, and a normal price into the COMPARE PRICE TO box (the "price" is always lower than the "compare price to") 

>>>View this clip to see the example