How to Customise your Shopify Store - Collection Page

How to Customise your Shopify Store - Collection Page

Customising your Shopify store’s collection pages is important for showcasing your products in an organised and appealing way. Here’s a step-by-step guide to help you through the process:

Step 1: Log into Your Shopify Admin

  1. Go to Shopify Login.
  2. Enter your store’s credentials to access the admin dashboard.

Step 2: Navigate to the Themes Section

  1. In the admin dashboard, look for the Online Store section on the left-hand sidebar.
  2. Click on Themes. This will take you to the Themes page where you can manage your current theme.

Step 3: Access the Theme Editor

  1. In the Themes page, find your current theme.
  2. Click on Customise to open the theme editor.

Step 4: Navigate to Collection Pages

  1. In the theme editor, you’ll see a preview of your store with a sidebar on the left.
  2. Use the dropdown menu at the top of the sidebar to navigate to Collections and select Collection pages.

Step 5: Customise Collection Page Layout

You can customise various aspects of your collection pages to improve their appearance and functionality.

1. Collection Banner:

  1. Add a banner image or text at the top of the collection page to highlight the collection.
  2. Click on the Collection banner section to upload an image or customise the text.

2. Collection List Layout:

  1. Click on the Collection list section to adjust the layout of your products.
  2. Choose the number of products per row and the number of rows per page.
  3. Customise the display settings for product images, titles, prices, and other details.

3. Filters and Sorting:

  1. Enable and customise filters to help customers narrow down their search. Common filters include product type, size, colour, and price.
  2. Customise sorting options (e.g., alphabetical, price, newest) to give customers flexibility in how they view products.

4. Pagination:

  1. Decide how you want to display pagination. Options include infinite scroll, load more button, or traditional page numbers.
  2. Customise the style and appearance of the pagination controls.

Step 6: Customise Theme Styles for Collection Pages

  1. In the theme editor, go to Theme settings.
  2. Adjust the following settings as needed:
    • Colours: Set colours for backgrounds, text, buttons, and other elements on the collection pages.
    • 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 pages.

Step 7: Add Custom Content (Optional)

For advanced customisation, you can add custom HTML, CSS, or JavaScript:

  1. In the Themes page, click on Actions next to your theme.
  2. Select Edit code.
  3. Add or modify code in the appropriate files (usually the collection.liquid file in the Templates folder) to create custom content or styling for the collection pages. This step is recommended for users with coding knowledge or with the help of a developer.

Step 8: Save and Preview

  1. Save your changes frequently to avoid losing any edits.
  2. Use the Preview option to see how your collection pages look on both desktop and mobile devices.
  3. Make sure to test all functionalities, such as filtering and sorting, to ensure everything works correctly.

Step 9: Publish Changes

Once you are satisfied with your customisations:

  1. Click on Save to apply the changes.
  2. Your Shopify collection pages will now reflect the customisations you made.

By following these steps, you can effectively customise your Shopify store’s collection pages to showcase your products in an organised and visually appealing way, enhancing the shopping experience for your customers.