Size Guides

If you're in retail in any shape or form, showing size guides on the frontend is a must to ensure your users have all the information they need to progress them to purchase

Here's how size guides work on Miami...

Out of the box, Miami includes a Size Guide attribute

Navigate to a product in Magento Admin > Catalog > Products > Click into the product you want to add a size guide on and you will see the attribute in the product information section as shown below

Note: The "Size Guide" attribute may be in a slightly different place to the image above

Troubleshooting: If you cannot see the size guide attribute, ensure it's assigned to the correct attribute set...

To add an attribute to an attribute set in Magento, navigate to Stores > Attributes > Attribute Set, select the desired attribute set, and then drag and drop the attribute from the "Unassigned Attributes" list to the appropriate group in the "Groups" column

Now you can simply add a value to this Size Guide field. In this example, we will be using "mens-shorts"

Note: This value can be anything you like; just make sure that it relates to the actual size guide you want to create. E.g. "mens-shorts", "womens-tops", "kids-coats" etc

Once you've added a value, save the product

Now that we have a value assigned to the product, we need to actually create the size guide. To do this, we need to create a new block...

Admin > Content > Blocks > Add New Block

Give the block a recognisable name that will enable you to find it easily. e.g. "Miami Size Guide - Men's Shorts"

Important:

The identifier of the block is very important as it must match the value you assigned in the product attribute, prefixed with "size-guide-"

In this example, our block identifier must be "size-guide-mens-shorts"

If the text in the Size Guide attribute contains a space, this will be replaced with a hyphen for the block identifier. All uppercase characters will also be changed to lowercase. For example:

Size Guide = "Womens Tops"

This will be changed to "womens-tops"

Then the prefix is added. So the block identifier must be "size-guide-womens-tops"

Now that we have our size guide block, we can populate it with whatever information we need to. Feel free to add images etc to this, but out of the box, Miami includes styling specific to tables in this condition.

Adding a table...

You will see in the screenshot below, I simply added a table via PageBuilder. To do this:

• In the block, click "Edit with pagebuidler"
• Drag a row from the left column
• Drag a text element into the row
• Click on the text element and you will see a table icon (grid with down arrow next to it)
• Now you can add however many columns and rows you need into the table
• Populate the table with your sizes

For example...

Continue editing the content until you're happy

Exit out of the pagebuilder editor (minimise icon in top right)

Now save the block

Note: Feel free to "Save as template" if you want to re-use this size guide

Now go to the product on the frontend, and you will that the size guide has appeared in the main product information...

Please feel free to check the frontend of Miami to see how this functions - https://miami.zero1.co.uk/apollo-running-short.html

The size guide attribute allows you to add any value into the text field on the product in admin. This gives huge flexbility, in that it allows you to create as many different size guides as you need

You can also bulk update products from Magento Admin if you have multiple products that require the same size guide, simply by adding the correct value in that field

Please don't hesitate to get in touch if you have any questions!

The code behind the scenes has logic in there to determine the name of the size guide block. This is the logic...

• Removes all foreign characters from the size guide attribute
• Replaces spaces with dashes / hyphens
• Changes it all to lowercase
• Prefixes with "size-guide-"

Here's another example...

Product has a size guide value of "Women's Pants"

Size guide block will need to be "size-guide-women's-pants"

We do recommend keeping the values in the size guide field as simple as possible