Customizing the builder's look
At a glance
- What you get
- A builder with your store's colours and wording.
- Time
- 5 minutes
- Plan
- All plans
Before you start
You have created at least one box (see Creating a box). The builder is the panel your customer uses in the store to build the box.
The look is set in two places:
- in the app, box by box: title, description, accent colour, corner radius;
- in the theme editor, on the builder block: layout, product cards, summary and all colours. These values apply to every box shown by that block.
Fonts and overall style come from your theme.
In the app: the look of one box
- Go to Shopify Admin › Apps › IFG Build Your Box › Boxes and select Edit next to the box. For a new box you are already on the New box form.
- Scroll to the Appearance section.
- In Builder title, type the title the customer sees above the builder. At most 80 characters. For a new box it starts as “Build your box”.
- In Description, type a sentence under the title. At most 240 characters. It starts as “Choose your favorite products and build your box.”
- For Accent color, select the coloured square and pick a colour, or type the code in the field, for example #5c2d91 (the starting value). The accent colour highlights chosen products and the progress bar.
-
In Corner radius (px), type a whole number from 0 (square corners) to 24 (very rounded). It starts at 12.
What you’ll see: the Builder preview under the fields updates immediately: border and bar in your colour, corners with your radius, the title, the description, the number of items and the price.
- Save with Create as draft (new box) or Save changes (existing box).
Note: if you leave Builder title empty, the app preview and the store show the builder’s standard title, “Build your box” (in the store, in the store language). An empty description is not shown in the preview, but the store shows “Choose 3 products and make it yours.” with your number of items.
In the theme editor: block layout and colours
- Go to Shopify Admin › Online Store › Themes and select Customize on your live theme.
- Open a page where you added the builder (see Adding the builder to your theme), for example the product page of a box.
-
In the left column, select the Build Your Box block.
What you’ll see: the block settings on the right, grouped into Layout, Product cards, Box summary and Colours.
- Change the settings you want. The theme editor preview updates immediately.
- Select Save at the top right.
The full list of block settings, with starting values, is in All settings.
Warning: on the theme editor block, the Heading, Description and Accent colour fields override the ones saved in the app, for every box shown by that block. Leave them empty if you want each box to use the title, description and colour set in the app. For the corner radius, the As set in the app option uses the box’s value.
Troubleshooting
“Use a hex color, for example #5c2d91.” appears. The colour code is not valid. Use # followed by 6 characters from 0-9 and a-f, or pick the colour with the square.
“The corner radius must be a whole number between 0 and 24.” appears. Type a whole number, without decimals, between 0 and 24.
I changed the colour in the app but the store doesn’t change. An Accent colour is set on the theme editor block: it overrides the app’s. Empty it and select Save.