Bind the element's selector tightly
Tie the element so you are sure you do not affect other elements. I.e. using a selector that you are certain only targets the element(s) that you want.
- Use more unique Classes/IDs than general ones (Example of general classes are Bootstrap classes)
CSS
!important
To make sure we overwrite any existing CSS rules, it's important to use !important as much as possible. Always write !important after the CSS rule and remember to tie the selector tightly, e.g.
.product-info-main-wrapper .page-title-wrapper .page-title {
color: red !important;
font-weight: bold !important;
}NOTE! Do not use !important on styling you later need to change with javascript
Responsive
Check that your CSS changes are responsive (must look good on desktop, tablet, mobile and all website breakpoints) e.g.
@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 991px) {
}
@media screen and (max-width: 767px) {
}Javascript
Bind element's selector tightly
Bind the element's selector tightly for your CSS and Javascript changes. E.g. if you want to access the H1 below, you can for example bind this element like this:
Safe:
.product-info-main-wrapper .page-title-wrapper h1.page-title
Not safe:
.page-title
Example
<div class="columns"> |
Make changes as soon as possible by using /* no_doc_ready */
By default, the javascript code you write is executed at Document ready. This means that the whole page is loaded before your changes are applied. This can often cause “flickering”.
To avoid flickering, we want our changes to happen as quickly as possible (we want our code to run before the Document is ready/finished loading). You can avoid flickering by changing the way Symplify executes the javascript.
To do this you first have to add /* no_doc_ready */ at the top of the code. This tells the script to execute the code as soon as possible (not wait for Document ready).
/* Write custom javascript / jQuery here! */
/* no_doc_ready */This however requires some special setup to work. When you use / * no_doc_ready */, it is important to make sure that the elements we want to change have been loaded before the code executes. Therefore it is important that you set the AUDIENCE to the elements you want to change (audience: Page content).
Should it happen that you change multiple elements (for example in a Product Detail Page redesign test), you may not need to set all changed elements as Page content rules in the AUDIENCE. If all elements that you are using/changing are added to the page at the same time you just need one of them set as a Page content rule. If the elements are loaded separately it still might work to just set one element by setting the one that loads last. However this need to be thoroughly tested in Preview to make sure that all you changes happen on every page load/way to load the page.
If “flickering” occurs because AUDIENCE has to wait for too many elements, you can use a mutation observers or intervals in your project code. Then you can remove minor control elements in the AUDIENCE and instead set an observer that handles elements that load late.