Recipes

Short, step by step solutions to common tasks. Each one uses only what is described elsewhere in this guide.

Change the announcement bar

1. In the Header area of the tree, click Announcement Bar.
2. Edit Announcement Text, and set a Link if the message should lead somewhere (for example to a sale category).
3. Pick a Background Variant or a Color Scheme to make it stand out.

The announcement bar is in the shared header, so the change appears on every page.

Run a seasonal campaign on the home page

Prepare the campaign without losing your usual hero:

1. Select Hero Banner and click Duplicate (copy icon in the preview toolbar).
2. In the copy, change the background image, the heading, the text and the button links to point to your campaign.
3. Hide the original hero (eye icon in the tree).
4. Preview in a new tab, then publish when the campaign starts.

When the campaign ends, show the original hero again, hide the campaign one, and publish. Keep the hidden campaign hero for next year.

Feature one product on the home page

1. Under Main, add a Custom Section and set Direction to Horizontal.
2. Click Add block under the section and choose Featured Product from the Product category.
3. In its settings, choose the Product to display.
4. Add a Group next to it with a Heading, a Text and a Primary Button linking to the product.

Add a banner above category products

1. Switch to Category Page in the page selector, or browse to a category in the preview.
2. Under Main, click Add section and add a Custom Section. Drag it above Category Products.
3. Inside it, add Category Banner, or build your own with Category Name and Category Description.
4. Leave the Category field of these blocks empty, so each category shows its own name, description and image.

Rearrange the product page

1. Switch to Product Page.
2. Open Product Information > Product Details in the tree.
3. Drag blocks into the order you prefer, for example Product Price above Product Title, or Product Short Description under Buy Buttons.
4. Add a reassurance line under the buy buttons: Add block inside Product Details > Icon or Text (for example Free returns within 30 days), then move it under Buy Buttons.

Build a campaign landing page

Requires custom templates.

1. In the Bagisto admin, create the page under CMS > Pages (the page text can stay short; the design does the work).
2. In the editor, open CMS Page > Create template, name it Landing page, and base it on Empty template.
3. Build the page with a hero (Hero Banner), product sections (Featured Products), Testimonials and a Newsletter Signup.
4. Publish.
5. Back in the admin, edit the CMS page, set Theme template to Landing page, and save.

Add an FAQ

On an existing page, for example Contact us:

1. Click Add section under Main and choose FAQ Section.
2. Edit the heading. In the tree, open the section's Accordion: each row is one question.
3. Select a row and change its Heading (the question). Open the row in the tree and select the text inside it to write the answer.
4. Use Duplicate on a row to add another question, and drag the rows into order.

For a dedicated FAQ page, create a CMS page with a custom template, as in the landing page recipe, and add the FAQ Section to it.

Make the hero work better on phones

1. Select Hero Banner and switch the device preview to Mobile.
2. In Size, set a smaller Section Height for mobile.
3. In Layout, set Content Alignment to Center for mobile if the text looks cramped on the left.
4. In Appearance, under Background Image, click Edit metadata and move the focal point onto the subject so it stays visible in the narrow crop.
5. Check the heading size; if it is too large, adjust the Heading 1 preset's mobile Font Size in Theme Settings > Typography.

Update footer links

1. In the Footer area, open Classic Footer in the tree and expand the link groups.
2. Select a link to change its text and link. Use the link picker to point to a category, a product or a CMS page.
3. To add a link, Duplicate an existing one and edit it. To remove one, select it and remove it.

Make one section stand out

1. Select the section.
2. In Appearance, choose a contrasting Color Scheme, for example dark between two light sections.
3. Increase its top and bottom Padding a little so it breathes.

If the scheme you want does not exist yet, create it in Theme Settings > Colors > Add scheme.