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
This setting affects the size of your logo. Please see Add a logo and favicon for further instruction.
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.