Since the verison Version 8.2.0 we added The Seasonal Deals feature in the Be Yours theme allows you to display a promotional deals icon in the header. When customers click this icon, a drawer opens and shows one or more seasonal deal banners.
This feature is useful for promoting limited-time offers, holiday campaigns, product launches, collection discounts, free shipping offers, or any important store promotion directly from the header.
STEPS:
1. Enabling Seasonal Deals in the Header
Before adding seasonal deal banners, you need to enable the header sidebar.
-
From your Shopify admin, go to Online Store > Themes.
-
Find the theme you want to edit and click Customize.
-
Open the Header section.
-
Find the Header sidebar settings.
-
Enable Sidebar.
-
Add a title in the Sidebar heading field.
Example:
Seasonal Deals -
Click Save.
Once the sidebar is enabled and at least one Seasonal deal block has been added, a deal icon will appear in the header.
2. Adding Seasonal Deal Blocks
Each Seasonal deal block represents one promotional banner inside the header deal drawer.
- In the Theme Editor, open the Header section.
- Click Add block.
- Select Seasonal deal.
- Upload an image for the deal.
- Add the heading, subheading, description, button label, and button link.
- Configure the layout, image ratio, text position, and colors.
- Repeat the same steps if you want to add more deals.
- Click Save.
You can add multiple Seasonal deal blocks. Each block will be displayed as a separate promotional item inside the drawer.
3. Enabling Seasonal Deals in the Header
From the Header section, go to Side bar > Enable side bar
4. Seasonal Deal Block Settings
Each Seasonal deal block includes image, layout, text, button, and color settings.
Image
- Image: Select the image displayed for this deal.
- Image ratio: Choose how the image should be displayed.
Available image ratio options:
- Adapt: Uses the original image ratio.
- Square: Displays the image in a square format.
- Portrait: Displays the image in a portrait format.
- Landscape: Displays the image in a landscape format.
- Wide: Displays the image in a wide format.
If no image is selected, a placeholder image will be displayed.
Layout
The Layout setting controls how the text and image are arranged.
Available layout options:
- Top: Text appears above the image.
- Bottom: Text appears below the image.
- Left: Text appears on the left side of the image.
- Right: Text appears on the right side of the image.
- Overlay: Text appears over the image.
- Overlay opacity: Text appears over the image with a background overlay.
Use an overlay layout when you want the deal to look more like a promotional banner.
Text box position
The Text box position setting controls where the text appears on the image.
This setting only applies to overlay layouts.
Available positions include:
- Top left
- Top center
- Top right
- Middle left
- Middle center
- Middle right
- Bottom left
- Bottom center
- Bottom right
Text alignment
The Text alignment setting controls the alignment of the deal content.
Available options:
- Left
- Center
- Right
Content
Use these settings to add the promotional message:
- Heading: Add the main title of the deal.
- Subheading: Add a short supporting line.
- Description: Add more details about the promotion.
- Button label: Add the call-to-action text.
- Button link: Select the destination page, product, collection, or custom URL.
Example:
Heading: Summer Sale
Subheading: Up to 30% off
Description: Save on selected items for a limited time.
Button label: Shop now
The button should link to the most relevant destination, such as a sale collection or campaign landing page.
Colors
Use the color settings to control the appearance of each deal:
- Heading color: Set the heading text color.
- Subheading color: Set the subheading text color.
- Description color: Set the description text color.
- Background color: Set the background color for the text area or overlay.
- Overlay opacity: Adjust the overlay transparency.
The Overlay opacity setting is mainly used when the layout is set to Overlay opacity.
5. Previewing Seasonal Deals on the Storefront
After setting up the Seasonal Deals feature, preview it on your storefront.
- Open your storefront.
- Check the header area.
- Click the deals icon.
- The Seasonal Deals drawer should open.
- Review the drawer heading, images, text, buttons, and links.
- Test each button to make sure it redirects to the correct page.
If the icon does not appear, make sure the sidebar is enabled and at least one Seasonal deal block has been added.
6. Recommended Use Cases
You can use Seasonal Deals for:
- Holiday sales.
- Black Friday or Cyber Monday campaigns.
- New collection launches.
- Limited-time discounts.
- Free shipping promotions.
- Product bundles.
- Gift guide promotions.
- Clearance or end-of-season sales.
- Storewide announcements.
Recommended setup:
- Use a short and clear drawer heading.
- Add 2–4 Seasonal deal blocks.
- Use consistent image sizes across all deal banners.
- Keep the heading, subheading, and button text short.
- Link each deal to a relevant product, collection, or landing page.
- Use overlay layouts carefully to make sure the text remains readable.
Troubleshooting
If the Seasonal Deals icon or drawer does not display correctly, please check the following:
- Make sure Enable sidebar is turned on in the Header settings.
- Make sure at least one Seasonal deal block has been added.
- Make sure the Seasonal deal block is added inside the Header section.
- If the drawer heading is missing, check the Sidebar heading setting.
- If the button does not work, make sure the Button link is selected.
- If the button text is missing, make sure the Button label field is filled in.
- If the text is hard to read on overlay layouts, adjust the text colors, background color, or overlay opacity.
- If the image looks cropped, try changing the Image ratio setting.
- If the text position does not change, make sure the selected layout is an overlay layout.
- 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.
بانٹیں:
Adding a new Countdown block to the Announcement Bar section
Timeline section