How can I change fonts, colors, and backgrounds to enhance my store's appearance?
Customizing your store’s fonts, colors, and backgrounds can help you create a visually appealing and professional online presence. In Shopaccino, you can easily adjust these settings using the Theme Settings option. Follow the steps below to modify the CSS options of your template and improve your store’s design.
Step-by-Step Guide
Outlined below are the essential steps to guide you through the process:
-
Begin by logging into the Shopaccino Admin
Navigate to Theme Settings
- From the left-side menu, go to “Theme” > “Theme Setting.”
- Click on “Manage Layout CSS” to access the design customization options.
Customize Elements and Adjustments
Under Manage Layout CSS, you can modify the following elements and their adjustments:
Layout
You can customize the font styles and colors for general content elements like:
- Elements: Body, Paragraph, Anchor, Anchor Hover, H1, H2, H3, H4, H5, H6.
- Adjustments: Font Size, Font Family, Font Color.
Header
Modify the header section to reflect your brand’s style:
- Elements: Header Stripe, Header, Anchor, Anchor Hover.
- Adjustments: Background Color, Font Color.
Footer
Customize the footer for a consistent and professional look:
- Elements: Newsletter, Social Bar, Footer, Link Heading, Anchor, Anchor Hover.
- Adjustments: Background Color, Font Color, Font Transform.
Button
Improve your call-to-action buttons for better user engagement:
- Elements: Button, Button Hover.
- Adjustments: Background Color, Border Color, Font Size, Font Family, Font Color.
Menu
Adjust the menu settings to make it more accessible and visually appealing:
- Elements:Menu, Menu Hover, Menu Child, Menu Child Hover, Menu Child Child, Menu Child Child Hover.
- Adjustments:Background Color, Font Size, Font Family, Font Color, Font Transform.
Paging
Modify the pagination style to improve user navigation:
- Elements:Paging, Paging Active, Paging Hover.
- Adjustments:Background Color, Border Color, Font Size, Font Family, Font Color.
Save Changes
Best Practices for Design Customization
- Maintain Brand Consistency – Use the same font styles, colors, and backgrounds that match your brand identity.
- Prioritize Readability – Choose font sizes and colors that are easy to read on both desktop and mobile devices.
- Use High-Contrast Colors – Ensure enough contrast between the text and background for better visibility.
- Test Across Devices – Make sure that the design looks consistent and functional on different screen sizes.
-
Example:
If you want to change the font style and color of the header, navigate to Theme Setting > Manage Layout CSS > Header. Select Header and update the Font Family to "Montserrat" and the Font Color to "#333333" for a modern and clean look. Save the changes to apply the new header style.