This guide walks you through customizing Shopify’s free Refresh theme from scratch. We’ll cover everything from basic setup to adding content, ensuring your store looks professional and visually appealing, even if you have a smaller product catalog.
Getting Started with the Refresh Theme
The Refresh theme is a popular, free option for Shopify stores, especially those with a limited number of products (around 1-20). It’s designed to be very visual, acting almost like a sales page to highlight product features and benefits. If you don’t have it installed yet, you can find it under Shopify’s "Popular free themes" in your theme library.
Essential Preparations Before Customization
Before diving into the theme editor, it’s important to have your core branding and product information ready. This includes:
- Branding: Your logo and decided color scheme.
- Products: Products should ideally be loaded into your store with all necessary details.
Gathering these assets beforehand, like images for slideshows, icons for benefits, and testimonial photos, will make the customization process much smoother.
Customizing Theme Settings
Theme settings are the foundation for your store’s look. Here’s what to focus on:
Logo and Favicon
Upload your logo in the "Logo" section. You can adjust the desktop logo width. Don’t forget to upload a favicon – the small icon that appears in browser tabs.
Colors
Set your brand’s primary colors using the "Accent 1" and "Accent 2" options. These accents influence various elements like backgrounds and button colors. You can also set your text color here. For buttons within "Image with Text" sections that don’t automatically match your brand colors, a small CSS snippet can be used to apply your desired accent color.
Typography
Choose your preferred fonts for headings and body text. You can select from a variety of fonts to give your store a unique feel.
Building Your Homepage Sections
Let’s go section by section to build out the homepage:
Announcement Bar
Customize the text and color scheme for your announcement bar. You can link it to a specific page, like your products page.
Header
Adjust the header’s color scheme, logo position, and sticky header behavior. Ensure your mobile logo position is also set correctly.
Slideshow
Upload your background images for the slideshow. You can adjust the slide height and content position for both desktop and mobile. Customize the heading, subheading, and button label, linking the button to your products.
Featured Collection
To display products, you need to create or select a collection. Add your products to this collection. You can then choose how many products to display and add a title for the section.
Multi-Column Sections (Reviews & Benefits)
These sections are versatile. You can use them for customer reviews, featuring names as headings and adding testimonial text. Alternatively, use them to highlight product benefits with icons and headings.
Image with Text Sections
These are great for showcasing individual products or collections. For each section, upload an image, set the image size (small often looks best), add the product title as the heading, include the product description, and link the "Shop Now" button directly to the product page. Ensure consistency by alternating image and text placement.
Rich Text Section
Use this for a brief sales copy or to answer common questions about your brand or products.
Blog Section
If you have blog posts, this section will display them. If not, you can remove it or replace it with another section, like a video section.
Footer
Customize the footer with links to your collections, contact information, your mission statement, and your logo. You can adjust the logo’s size and appearance for a better fit.
Customizing Product Pages
Product pages can be customized similarly. You can edit sections like "Collapsible Content" to add details such as highlights, scent details, or ingredients. For bundle products, you might outline a step-by-step usage guide.
Final Review
Once you’ve customized all sections, preview your store on both desktop and mobile to ensure everything looks as intended. The Refresh theme, when customized well, can create a clean, professional, and visually appealing online store.
Key Takeaways
- Prepare branding and product assets before customization.
- Utilize theme settings for logo, colors, and typography.
- Customize each homepage section strategically, from the announcement bar to the footer.
- Use multi-column and image-with-text sections to showcase products and benefits effectively.
- Ensure consistency in design elements across all sections.
- Always preview on both desktop and mobile devices.