Welcome to a comprehensive guide on creating custom sections using Shopify’s blocks within the Horizon theme. This article will walk you through the process of leveraging pre-existing blocks to design a custom section featuring icons and text, offering a flexible and efficient way to enhance your Shopify store’s design.
Understanding Shopify Blocks in the Horizon Theme
In earlier Shopify themes like Dawn, creating a custom section required defining block settings, such as image fields for icons and text fields for descriptions, directly within the section. However, the Origin theme introduces a more streamlined approach. Pre-built blocks are available, allowing you to reuse them across various sections, saving time and ensuring consistency.
Step-by-Step Guide to Creating a Custom Section
1. Duplicating Your Theme
To avoid disrupting your live store, start by duplicating your theme:
- Navigate to the admin panel.
- Go to the Themes section.
- Duplicate your live theme to create a safe working environment.
2. Accessing the Customizer
Once the theme is duplicated:
- Open the customizer for the duplicated theme.
- This is where you’ll create and configure your new section.
3. Adding a Custom Section
In the customizer:
- Locate the “Add Section” option and click it.
- Select “Custom Section” from the available options.
- This creates a blank section where you can add blocks based on your needs.
4. Renaming the Section
To keep your work organized:
- Click on the newly created section.
- Rename it to something descriptive, such as “GRT Section Icon with Text.”
5. Adding Blocks to the Section
To create a section with icons and text, you’ll need multiple blocks (e.g., images and text fields). Here’s how to structure it:
- Create a Group Block: Click “Add Block” and select the “Group” block. This allows you to organize multiple blocks together.
- Add Icon and Text Blocks:
- Inside the group, add an “Icon” block for the image.
- Add a “Text” block for the accompanying text.
- For example, you can upload a Google icon and set the text to “Google.” Adjust the icon’s width or add a link using the block’s built-in settings.
6. Duplicating Blocks for Multiple Entries
To add more icon-text pairs without starting from scratch:
- Right-click the group block and select “Duplicate.”
- Repeat this process as needed (e.g., duplicate five times for five icon-text pairs).
- Update each block with unique icons and text to suit your design.
7. Customizing the Layout
To refine the section’s appearance:
- Click on the section to access its settings.
- Change the layout direction to horizontal for a side-by-side display (instead of the default vertical layout).
- Adjust the gap between blocks (e.g., set to 100 pixels for spacing).
- For mobile, the section can remain vertical or be customized further.
- Modify text settings, such as alignment (e.g., centered) or size, to enhance readability.
8. Exploring Additional Settings
The Origin theme’s blocks come with robust customization options:
- Adjust image widths, add links, or fine-tune spacing.
- Experiment with text formatting, such as headings or font sizes.
- Explore other block types (e.g., video with text) to create diverse sections tailored to your store’s needs.
Benefits of Using Pre-Built Blocks
Using Shopify’s pre-built blocks in the Origin theme offers several advantages:
- Efficiency: Reuse existing blocks instead of creating new ones from scratch.
- Flexibility: Combine blocks to create various section types, such as image-with-text or video-with-text sections.
- Consistency: Maintain a cohesive design across your store with standardized block settings.
