Customizing the Collection List Section

Customizing the Collection List Section

Collection List Section Overview

In Shopify stores, displaying a list of collections helps customers quickly navigate and discover different product categories. Tapita's Collection List Section provides an organized and visually appealing way to showcase your collections, enhancing product discovery and improving the overall shopping experience.

With Tapita's Collection List Section, you can:
  1. Create a Visually Engaging Layout: Showcase your collections in a stylish, easy-to-navigate format.
  2. Enable Customizable Options: Personalize text, colors, and layout to align with your brand’s identity.
  3. Provide a Responsive Design: Ensure a seamless browsing experience across all devices.
  4. Offer Improved Navigation: Help customers quickly locate and explore different product categories.


Collection List Section Customization

For instructions on how to add a Collection List section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.
After adding your desired Collection List Section to your store, you can customize its content as follows within the Shopify Theme Editor:

Step 1: Under the Collection List section settings, click "Add item." You can add a maximum of 4 items.

Step 2: Item Settings:
  1. Collection: Choose a collection from your store to display.
  2. Custom Image: (Optional) Choose a custom image to represent the collection. If left blank, the section will automatically display an image from your selected collection.
  3. Custom Title: Insert text for a custom title to display for the collection.
  4. Custom Description: Insert a description to display for the collection.


You can configure the collection list section as follows:
  1. Click on the collection list section
  2. Configure the section header
    1. Heading: Enter the main heading text for the section (e.g., "Shop Our Collections"). This is the primary title that will appear at the top of the collection list section.
    2. Heading Size: Select a heading size ("Small," "Medium," or "Large").
    3. Sub-Heading: Enter a sub-heading text.
    4. Description: Enter a section description.
    5. Alignment: Choose the text alignment ("Default" or "Center").
    6. Button Label: Add text for the button label (optional).
    7. Button Link: Add a URL for the button (optional).
  1. Configure the section body
    1. Button Text: Customize the button text.
    2. Collection text Color: Insert a hexadecimal color code for the collection text.
    3. Button Background Color: Insert a hexadecimal color code for the button background.
    4. Button text Color:  Insert a hexadecimal color code for the button text.
  1. Configure the section footer
    1. Button Label: Enter the text for the button label (optional). This will add a button in the section's footer, if desired. Leave blank for no button.
    2. Button Link: Enter a URL for the button (optional).
  1. Configure the section layout:
    1. Background image: Choose a background image for the section (if desired).
    2. Section Full Width: Toggle this setting to make the section span the full width of the screen. If disabled, customize the size at "Section max width."
    3. Content Full Width: Toggle this setting to make the content within the section span its full width. If disabled, customize the size at "Content max width."
    4. Padding and Margin: Adjust the padding and margin for the section on mobile, desktop, and tablet screens to control spacing.
  1. Configure the section color:
    1. Background: Choose a color for the section background.
    2. Background Gradient: Set a background gradient. This allows you to create a subtle color transition in the background instead of a solid color.
    3. Foreground: Choose a color for the foreground elements.
    4. Title: Choose a color for titles.
    5. Button Background: Choose a color for button backgrounds. This determines the background color of any buttons within the section.
    6. Button Text: Choose a color for button text. This sets the color of the text displayed on the buttons.
    7. Input, button radius: Set border radius for input and button elements.
  1. Configure the section optimize:
    1. Lazy Load Speed: The section will only load when it is scrolled to on the page, improving initial page load times.

Now you know how to customize the Tapita's Collection List Section to enhance product discovery, create a visually appealing browsing experience, and help customers easily find the collections they're looking for! If you have any questions or need assistance, please don't hesitate to contact Tapita support.