Skip to main content
The Design tab

Customize your storefront's appearance from the Design tab

AmmoBot avatar
Written by AmmoBot
Updated over 7 months ago

Inside the AmmoReady dashboard you have the ability to adjust the appearance and styling of your storefront's design. We also provide a section to inject custom code into your storefront.


From your Dashboard go to Settings in the top right corner.

Click on the Design tab.

Notice that the Design tab is separated into three sections: Appearance, Styling, and Custom Code. Let's cover those below.


Appearance

  • Adjust your storefront from a light to dark theme

  • Adjust your header layout to be left-justified or centered

  • Select different layout options

    • Full Width (Contained): this keeps your content contained to a specific maximum width

    • Full Page: this removes the container and spreads content from edge to edge of the page

  • Collapse Categories will collapse the category navigation bar into a dropdown menu item titled "Shop."


Styling

  • Adjust a handful of color options on your storefront

  • Adjust the Header Height

  • Adjust the Category Navbar Padding

    • This settings affects the spacing between the links in the category navigation bar

  • Upload a Background Image to your storefront


Custom Code

The Custom Code section allows you to inject custom HTML, CSS, and JavaScript into your storefront's HTML markup. You have the option to inject code into the <head>, and either the top or bottom of the <body>. If you're using any 3rd party services that require you to copy and paste code, typically a <script> tag, you may enter those here.

*Note: If you are not familiar with HTML, CSS, or JavaScript it is advised to leave these sections untouched. Any invalid, or mistyped code could affect your entire storefront and cause issues.

Did this answer your question?