▶️ How and when to use style blocks

1. Create a New Style Block

1. Go to StoreConnect Navigation → Custom Content → Style Blocks.

2. Click New to create a new style block.

2. Configure the Style Block

1. Name the style block (for easy identification).

2. Assign it to your Store.

3. Make sure to set:

   • Active → Checked (so it’s enabled).

   • Global → Checked (if you want it to apply across the entire store).

4. Enter your CSS code in the content area:

   • Do not include </code> tags — just the raw CSS.</p> </li><li> <p>Example:</p> <div> <div> </div> <div><code>body { background-color: lightblue; } </code></div> </div> </li></ul> </li></ol> <hr> <h3><strong>3. Save and Apply</strong></h3> <ol><li> <p>Click <strong>Save</strong>.</p> </li><li> <p>Your style block will now be applied to your store automatically.</p> </li></ol> <hr> <h3><strong>4. Test the Result</strong></h3> <ol><li> <p>Go to your <strong>Storefront</strong> and refresh the page.</p> </li><li> <p>You should see the <strong>CSS changes</strong> take effect (e.g. new background color).</p> </li></ol> <hr> <h2>Notes</h2> <ul><li> <p><strong>Style Blocks</strong> can be used for:</p> <ul><li> <p>Custom fonts</p> </li><li> <p>Button styles</p> </li><li> <p>Layout adjustments</p> </li><li> <p>Page-specific tweaks</p> </li><li> <p>Responsive design improvements</p> </li></ul> </li><li> <p>You can <strong>disable</strong> a style block anytime by unchecking <strong>Active</strong>.</p> </li><li> <p>You can <strong>target specific elements/pages</strong> using appropriate CSS selectors.</p> </li></ul></x-turndown>