Customising the collection list page on your Shopify store helps improve the way collections are presented to your customers, making it easier for them to navigate and find products. Here’s a step-by-step guide to help you customise your collection list page:
Step 1: Log into Your Shopify Admin
- Go to Shopify Login.
- Enter your store’s credentials to access the admin dashboard.
Step 2: Navigate to the Themes Section
- In the admin dashboard, look for the Online Store section on the left-hand sidebar.
- Click on Themes. This will take you to the Themes page where you can manage your current theme.
Step 3: Access the Theme Editor
- In the Themes page, find your current theme.
- Click on Customise to open the theme editor.
Step 4: Navigate to Collection List Page
- In the theme editor, you’ll see a preview of your store with a sidebar on the left.
- Use the dropdown menu at the top of the sidebar to navigate to Collections and select Collection list.
Step 5: Customise the Collection List Layout
You can customise various aspects of your collection list page to improve its appearance and functionality.
1. Collection List Layout:
- Click on the Collection list section to edit it.
- Adjust the number of collections displayed per row.
- Customise the display settings for collection images, titles, and descriptions.
2. Collection Images:
- Ensure high-quality images are uploaded for each collection.
- Customize the size and style of the collection images to make them visually appealing.
3. Collection Titles and Descriptions:
- Click on a collection to customise its title and description.
- Ensure titles are clear and descriptive.
- Add brief descriptions to provide context or highlight key products within the collection.
Step 6: Customise Theme Styles for Collection List
- In the theme editor, go to Theme settings.
- Adjust the following settings as needed:
- Colours: Set colours for text, backgrounds, and other elements on the collection list page.
- Typography: Choose fonts and sizes for headings, body text, and other text elements.
- Buttons: Customise the style, shape, and colour of buttons used on the collection list page.
Step 7: Add Custom Content (Optional)
For advanced customisation, you can add custom HTML, CSS, or JavaScript:
- In the Themes page, click on Actions next to your theme.
- Select Edit code.
- Add or modify code in the appropriate files (usually the collection-list.liquid file in the Templates folder) to create custom content or styling for the collection list page. This step is recommended for users with coding knowledge or with the help of a developer.
Step 8: Save and Preview
- Save your changes frequently to avoid losing any edits.
- Use the Preview option to see how your collection list page looks on both desktop and mobile devices.
- Make sure to test all functionalities to ensure everything works correctly.
Step 9: Publish Changes
Once you are satisfied with your customisations:
- Click on Save to apply the changes.
- Your Shopify collection list page will now reflect the customisations you made.
Tips for Enhancing Collection List Pages
- Consistency: Ensure a consistent design across all collections for a cohesive look.
- Highlight Bestsellers: Feature collections with best-selling or new products prominently.
- SEO: Use descriptive titles and meta descriptions for each collection to improve SEO.
- Call to Action: Add clear call-to-action buttons to guide customers to specific collections or products.
By following these steps, you can effectively customise your Shopify store’s collection list page to create an organised, visually appealing, and user-friendly shopping experience for your customers.