Koding Themes
Atom
Atom
  • Welcome
  • Sections
    • Introduction
    • Header
      • Logo
      • Menu
    • Announcement bar
    • Blog posts
    • Collection list
    • Multicolumn
    • Custom liquid
    • Featured collection
    • Featured product
    • Featured products
    • Image with text
    • Slideshow
    • Welcome text
    • Video
    • Apps
    • Footer group
  • Theme Settings
    • Introduction
    • Favicon
    • Animation
    • Colors
    • Typography
    • Email signup popup
    • Social media
    • Cart
    • Languages
    • Currency
    • Product swatches
    • Checkout
    • Theme style
  • Templates
    • Introduction
    • 404 page
    • Blogs
    • Article
    • Cart
    • Collection
    • Gift card
    • List collection
    • Pages
    • Password
    • Product
  • FAQs
    • About Koding Themes
    • Demo store
    • Theme Updates
    • Support
      • Multiple theme licensing
      • Refunds
      • Theme housekeeping
    • Custom coding
    • How to confirm your current theme version
    • Subscriptions
    • Size guide
    • Storefront wording/languages
Powered by GitBook
On this page
  • Product accordian
  • Size guide page
  • Gettings started
  • Copy and paste code for size guide page
  1. FAQs

Size guide

Size guides are a great way to keep customers informed when making purchases on your online store. You can expect to see a reduction in return orders as a result of people ordering sizes that fit them

For instance, if you sell apparel products such as t-shirts or hoodies, you can create a size guide that lists the sizes of the chest, arms, and shoulders area for the product. This way, customers can select the size that fits them best before adding the apparel product to their shopping cart.

With Atom, there are two Size guide options.

Product accordian

This setting is the best option if the majority of your products require different size information about your product. If this is the case, you can create and connect product metafields to a dynamic source in the theme settings to show unique content for every product in your store.

Size guide page

Choosing the Side guide page type setting will apply the same content to all products. If you want to make content dynamic, then create a page type metafield, add content to the required products, then assign the page to each product metafield by connecting to a dynamic resource.

Gettings started

Go to Online store → Themes → Customise

Then go to the Product page → Add block → Size guide

Here you will see configurations to customise your size guide.

  • Enable size guide - this needs to be checked to show the size guide to all visitors of your site

  • Button text - This will be the text that appears in the button on your product page

  • Size guide page - the page you want to select if all products inherit the same sizing information

  • Enable accordian - If accordion is enabled, then it will replace the size guide page data

  • Heading & Text - You can have up to 5 accordians, the content can be static or connected to a product metafield via a dynamic source

  • Footer - This info is optional and could be useful for contact info for customer service purposes

Copy and paste code for size guide page

<h5 class="h5">Conventional Sizes</h5>
<table>
<tbody>
<tr>
<th>Size</th>
<th>US</th>
<th>UK</th>
<th>Japan</th>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>6</td>
<td>39</td>
<td>25</td>
</tr>
</tbody>
</table>
PreviousSubscriptionsNextStorefront wording/languages

Last updated 8 months ago