How to customize the theme style with the Custom Code App?

Common knowledge of theme styles

1. Style tag to override code: for theme style override, using Style tag (override/add the styles in the theme through the styles added by yourself) to achieve the effect you need.

2. CSS selector: The CSS selector can locate the class in the page element, and if this (class) is found, it can be modified in a targeted manner, rather than a global modification, so as to achieve the effect of page diversification.

3. Resources for developers

Required tools

1. From your Shoplazza admin, go to Apps > Visit App Store.

2. Click Categories in the header of the Apps Store, then go to Marketing > Marketing analytics. Navigate to the Custom code and install the app. 

3. In the custom code App, click Add new.

4. In the custom code app, you can add the code needed to override the style, edit the name, select the trigger page, and the location where the code is added. After completing the settings, click Save.

5. This code is enabled by default. You can manually disable the code.

How to Edit Theme Styles

1. From your Shoplazza admin, go to Online store > Themes.

2. Click Customize on the right side of the page.  Click Publish after setting the theme style. 

3. Right-click on the storefront page and select Inspect to enable the console, select the cursor, move the mouse to the section to be edited, select the elements in the webpage, and console will automatically display and lock to the code. 

4. After editing the code, add the final edited style to the custom code app in the Shoplazza admin by means of the Style tag.

Example of editing theme - Accessory list section style editing for theme nova2022

If you use the Accessory list section in the  theme nova2022, the quantity item in the section will only be displayed if a number greater than 0 is filled in. In this case, if you rwant to use the the section, but do not want to display this number, this effect can be achieved by editing the theme style.

1. Right-click on the storefront page and select Inspect to enable the console, select the cursor, move the mouse to the Accessory list section, select the elements in the webpage, and console will automatically display and lock to the code.

2. In the web console, click, you can quickly add a same code style.

3. Edit / Add the styles you need, for example

• Edit font color

• Hide the display

4. After editing the code, add the final edited style to the custom code app in the Shoplazza admin by means of the Style tag. 

<style>

.tw-body-plus-2 {

    display: none;

}

</style>

5. Click Save.

6. After the code is added, there is no need to edit the theme code, and there is no need to worry about code loss due to changing/upgrading the theme. If the code does not take effect after changing the theme, you can check the code.

Example of editing theme - Hover background color for Add to Cart button on product page of theme Hero

If you need to add a hover background color to the button, the hover pseudo-class will select the element when the mouse pointer hovers over it: For details, see CSS selectors

1. Locate the button and navigate the class elements.

2. Then add a pseudo-class after this class, the code is as follows: 

<style>
.product-info__buy-now:hover{
 background: blue;
 color:yellow;
}
</style>

• The <style> tag is used to define the style, and the purpose here is to override the original style.

• Locate the specific location (aka "class") that needs to be edited.

• The content in the {xxxx} is the style that needs to take effect, such as: color, position, size, etc.