The Color Fan section lets you display a product or image with a fan-style set of color shades behind it. This section is useful for beauty, cosmetics, skincare, fashion, paint, fabric, or any product line that needs to show multiple shades or color options visually.
The section can display:
- A main product or image
- Multiple shade cards behind the image
- Solid color shades
- Image-based shades, such as texture or variant shots
- A hover ring effect
- A fan-out animation
- Heading and subheading content
STEPS:
1. Add the Color Fan Section
To add the section:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the template where you want to add the section.
- Click Add section.
- Select Color fan.
- Add or edit the Shade blocks.
- Configure the section settings.
- Click Save.
The section can be added to most page templates, but it is not designed for the Header, Footer, or Overlay groups.
2. Configure the Main Content
The main content controls the heading, subheading, product, and image shown in the center of the fan.
| Setting | Description |
|---|---|
| Heading | Adds the main section title. |
| Heading size | Controls the visual size of the heading. |
| Heading alignment | Aligns the heading left, center, or right. |
| Heading tag | Sets the HTML tag used for the heading. |
| Subheading | Adds supporting text below or near the heading. |
| Subheading size | Controls the visual size of the subheading. |
| Product | Links the fan image to a product and can use the product image when no custom image is uploaded. |
| Image | Adds a custom image for the center of the fan. |
| Image ratio | Controls the image ratio. |
| Image size | Controls the desktop image size. |
If both Product and Image are used, the uploaded Image is displayed, while the selected Product is used as the link.
If Image is empty and Product is selected, the section can use the product image automatically.
3. Configure Fan Style and Interaction
The fan layout and interaction are controlled by these settings:
| Setting | Description |
|---|---|
| Fan style | Controls how the shade cards fan out. |
| Hover ring | Controls the ring effect around the main image. |
| Ring color | Sets the ring color when Hover ring is set to Custom color. |
| Fan out | Controls when the fan animation opens. |
| Shade corner radius | Controls the corner radius of the shade cards. |
| Image corner radius | Controls the corner radius of the main image. |
Fan style
| Option | Description |
|---|---|
| Bloom | Displays the shades in a blooming fan effect. |
| Hand fan | Keeps every shade more visible, which works well for image-based shades. |
Hover ring
| Option | Description |
|---|---|
| Shade color | Uses the shade color for the ring effect. |
| Custom color | Uses the selected Ring color. |
| Rainbow halo | Displays a colorful halo effect. |
| Off | Disables the hover ring. |
Fan out
| Option | Description |
|---|---|
| When scrolled into view | The fan opens when the section becomes visible. |
| On hover | The fan opens when customers hover over the section on desktop. |
On phones, the fan opens when the section is in view.
4. Add Shade Blocks
Each Shade block represents one color or image in the fan.
The section supports up to 12 Shade blocks.
Shade block settings:
| Setting | Description |
|---|---|
| Color | Sets the shade card color. |
| Image | Replaces the solid color with an image, such as a texture or variant shot. |
| Label | Adds a browser tooltip on hover and helps describe the shade. |
To add a shade:
- Open the Color fan section.
- Click Add block.
- Select Shade.
- Choose a Color or upload an Image.
- Add a Label if needed.
- Repeat for each shade.
- Click Save.
If a Shade block has an image, the image is used instead of the solid color.
5. Configure Highlight and Spacing
The section supports highlight styling for the heading and subheading.
| Setting | Description |
|---|---|
| Enable highlight | Enables highlight styling for italic text in the heading or subheading. |
| Highlight style | Selects the highlight effect. |
| Show divider | Adds a divider above the section. |
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
When using highlight settings, please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
6. Notes and Limitations
Please note the following behavior:
- The section needs at least one Shade block to display the fan.
- The section supports up to 12 Shade blocks.
- A Shade block can use either a solid color or an image.
- If a Shade image is selected, it replaces the solid color for that shade.
- A transparent PNG works best for the main image.
- The Product setting can link the fan to the selected product.
- If no custom image is uploaded, the selected product image can be used.
- The Hand fan style is better when you want each shade to stay clearly visible.
- The On hover fan-out behavior applies mainly to desktop. Phones fan out when the section is in view.
- This section is visual only. It does not control product variants, inventory, or swatches.
Troubleshooting
If the Color Fan section does not display as expected, please check the following:
- Make sure you are using Be Yours version 9.3.0 or later.
- Make sure the section has at least one Shade block.
- If the center image does not appear, add an Image or select a Product with a product image.
- If the fan does not link to a product, make sure a Product is selected.
- If a shade color does not appear, check the Color setting in the Shade block.
- If a shade image does not appear, check that the Shade block has an uploaded image.
- If the hover ring does not appear, make sure Hover ring is not set to Off.
- If the custom ring color does not apply, make sure Hover ring is set to Custom color.
- If highlight styling does not apply, make sure the text is italicized and Enable highlight is turned on.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Understanding Swatch Sources in Be Yours
How to set up the Shoppable Video section