PopItUp Markdown


Customize PopItUp Party page headers and invoice footers with PopItUp Markdown to brand your boutique and provide a better shopping experience for your customers. If you're new to Markdown, read the instructions for using PopItUp Markdown on our knowledge base.

Headings

You can easily add headings using either markdown selecting the appropriate heading in the editor, or by using an html tag. You can also use a horizontal line or horizonatal rule with your headings with html.

Markdown

# H1
## H2
### H3
#### H4
##### H5
###### H6

Html

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<hr />

Text & typography

You can format your text with bold, italics, and strike through. You can also create bulleted lists and numbered lists.

Markdown

*Some italic text*
*Some italic text*
**Some bold text**
~Some strikethrough text~

- Bullet 1
- Bullet 2
- Bullet 3

1. Number one
2. Number two
3. Number three

Html

<i>Some more italic text</i>
<b>Some more bold text</b>
<del>Some strikethrough text</del>

<ul>
    <li>Bullet 1</li>
    <li>Bullet 2</li>
    <li>Bullet 3</li>
</ul>

<ol>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
</ol>

Buttons

You can create buttons with the HTML <a></a> tag and adding css with class="btn".

Change the size of the button by adding the appropriate class: btn-large or btn-small. Change the color of the button by adding a class btn-ghost, btn-light. Change the style of the buton by adding the class btn-round.

Size
<a href="#" class="btn btn-large">Large button</a>
<a href="#" class="btn">Normal button</a>
<a href="#" class="btn btn-small">Small button</a>

Color
<a href="#" class="btn btn-ghost">Ghost button</a>
<a href="#" class="btn">Dark button</a>
<a href="#" class="btn btn-light">Light button</a>

Style
<a href="#" class="btn btn-round">Round button</a>
<a href="#" class="btn">Rectangular button</a>

Mix and match any of the combinations from size, style, and color!
<a href="#" class="btn btn-large btn-ghost">Large ghost rectangular</a>
<a href="#" class="btn btn-light btn-round">Normal light round</a>
<a href="#" class="btn btn-small">Small dark rectangular</a>

Nervous to write markdown code? Copy the button you'd like, paste the markdown code into the code editor, then change the text and href.

Images

Images can really make your party header stand out. Add banner images, rounded images, or circular images with the HTML <img>and CSS classes img-banner, img-rounded, or img-circle.

<img src="http://via.placeholder.com/1080x300.png?text=Banner%20Image" class="img-banner">
<img src="http://via.placeholder.com/300x300.png?text=Rounded%20Image" class="img-rounded">
<img src="http://via.placeholder.com/300x300.png?text=Circular%20Image" class="img-circle">

Nervous to write markdown code? Copy the image type you'd like below, paste the markdown code into the code editor, then change the src in the markdown editor to the url of your image.

Template Banner image

Template Rectangular image

Template Rounded image

Template Circular image

Menus

You can add your very own menus, so it's easier for your customers to find important information about your business. Add a simple HTML <nav></nav> tag with the class menu, menu-white, or menu-gray. Any html tags included as the direct children in the nav tag will automatically get spaced correctly.

<nav class="menu">Default menu</nav>
<nav class="menu-white">A white menu</nav>
<nav class="menu-gray">A green menu</nav>

Pro tip: We recommend including no more than 4 items in your menu, so that shoppers can easily find what their looking for whether they are on a computer or on their mobile phone.

Nervous to write markdown code? Use the interactive menu templates below.

Promotional banners

Running a sale or promotion? It's easy to highlight the sale with a nice banner at the top of your party page. Just use a the HTML <section></section> tag with the class promo. Change the color of the banner with the class promo-green, or promo-pink and make the banner bigger with the class promo-lg. As with buttons, you can mix and match these however you'd like. Also, use any of the other HTML tags in the text & typography section above to add striketrhough, bold, and italic text, links, or buttons.

Size
<section class="promo">Normal promo</section>
<section class="promo promo-lg">Large promo</section>
Color
<section class="promo">Default promo</section>
<section class="promo promo-pink">Pink promo</section>
<section class="promo promo-green">Green promo</section>

Nervous to write markdown code? Copy the promo template you'd like, paste the markdown code into the code editor, then change the text, <b></b> and <del></del>.

Your   awesome promotional promo text goes here
Template Normal, default promo banner

Your   awesome promotional promo text goes here
Template Pink, large promo banner

Your   awesome promotional promo text goes here
Template Green, normal promo banner

Vertical spacers

Sometimes, you just need to add some space between the items in your party header. You can do that by adding an HTML <section></section> tag with the class spacer-25, spacer-50, or spacer-100 to add vertical spacers of 25, 50, and 100 pixels. If you need to add more space, just add more than one tag and class.

<section class="spacer-25"></section>
<section class="spacer-50"></section>
<section class="spacer-100"></section>

Sections & columns

Sections and columns can make it easier to make your party header look pretty. Want to add a picture on the left with text to the right? Add pictures in a grid? Feature an item on the right and put your usual party text on the left? Just add an HTML <section></section> tag to group items together.

Pro tip: Sections by default include a maximum width of 1000px and will align left. Add the class align-center to center the section on the page for larger screens.

To add columns to your section just add the class columns. Then any <section></section> tag you add inside will automatically become a column, and the column widths will adjust automatically to fit the content you add.

<section class="columns"><section>Column 1</section><section >Column 2</section></section>

Don't want column widths to adjust automatically? No problem. Just specify the number of columns that you'd like with the class columns-2, columns-3, or columns-4 to create two, three, and four columns respectively with fixed width.

<section class="columns-2"><section>Column 1</section><section>Column 2</section></section>
<section class="columns-3"><section>Column 1</section><section >Column 2</section><section>Column 3</section></section>
<section class="columns-4"><section>Column 1</section><section>Column 2</section><section>Column 3</section><section>Column 4</section></section>

Collapsible text

Sometimes you want to hide ugly, long, text, like your terms and conditions, your party rules, or a big table of shipping costs. You can easily do that with a collapsible text section. You'll just need to add an html <a></a> tag as a link to hide and unhide the text and a <section></section> tag as follows:

<a data-toggle="collapse" href="#hiddenText">Link to hide & unhide text</a>

<section class="well collapse" id="hiddenText">Here's some text that I want hidden. It could be things like terms and conditions, party rules, or even just some shipping costs tables that I'd rather not clutter up the page and ruin my first impression.</section>

Pro Tip: It's a good idea to include the "well" class on the hidden text section, so it's easy for people to see the text when it's unhidden, but it's not required.

Products

You may want to highlight or feature certain products at the top of your party page. This allows you to promote products, albums of products, or new styles with your own specialized designs and photos. You'll just need to add an html anchor tag as follows:

<a href="your_claim_link" class="product product_square">
  <section class="content">
   <img src="your_url_here">
   <p class="img-description">Your Product Description</p>
  </section>
</a>

There are three image types with corresponding image length: image widthratios supported: square (1:1), portrait (4:3), and landscape (3:4). You can change the image type by adding the corresponding class to the anchor tag: product_square, product_portrait, and product_landscape.

By default, all products will be displayed with full-bleed (100% of the width of the page), rectangular images with the product description hidden. You change the width of products and add more products side sby side using columns. Add spacing, product descriptions, and rounded product images by adding the classes: spaced, labels, and rounded to the <section></section> tag of the columns. We recommend using the featured items templates under party headers below to see how it works before you attempt to create your own featured products sections with markdown.

PopItUp Interactive Templates


Customize PopItUp Party page headers and invoice footers with PopItUp predesigned markdown templates to brand your boutique and provide a better shopping experience for your customers.

Edit the template using the "Edit" button then copy and paste the code for each template into your party page header or invoice footer using the Beta code editor. Read instructions for using PopItUp Markdown Templates on our knowledge base.

Party headers

Here's some text that I want hidden. It could be things like terms and conditions, party rules, or even just some shipping costs tables that I'd rather not clutter up the page and ruin my first impression.
Template Menu, banner image
Edit
Template options

Flash Sale 35% Off All Oils & Lotions!!!!
Here's some hidden text where you'd add things like your party rules and shipping costs. It won't be displayed until your customer clicks a link.
Template Promo, banner, menu links
Edit
Template options

Wyatt's Boutique

Real, comfortable prints -- all the time!

Hollywood, CA | established 2012

♡ Follow me on Instagram
Boutique Owner

Whitney Wyatt

Email me
Template Logo, boutique, owner
Edit
Template options



Featured products

Featured Items

Product Name

Product Name

Two lines image description

Product Name

Product (Size)

Template 5 Featured items
Edit
Template options



Featured Items

Product Name

Product Name

Product Name

Template 3 Featured items
Edit
Template options



Featured Items

Product Name

Product Name

Product Name

Product Name

Product Name

Product Name

Template 6 Featured items
Edit
Template options


Menu templates

Copy the menu template you'd like, paste the markdown code into the code editor, then manually change the src, text, href, and class fields in the markdown editor.

Shopping
Here's some hidden text where you'd add things like your party rules and shipping costs. It won't be displayed until your customer clicks the link in the custom menu above.
Template Logo, Text, Link, & Button
Edit
Template options

How to Shop
Here's some hidden text where you'd add things like your party rules and shipping costs. It won't be displayed until your customer clicks the link in the custom menu above.
Template Center Logo plus 2 links
Edit
Template options

Shipping
Here's some hidden text where you'd add things like your party rules and shipping costs. It won't be displayed until your customer clicks the link in the custom menu above.
Template Logo left, links right
Edit
Template options

Invoice footers

I ❤️ ❤️ ❤️ ❤️ you for shopping with my boutique. Come back real soon!

Here's some text that should display when someone clicks and wants to see what my returns policy is on the items that they have ordered.
Template Note, signature, terms
Edit
Template options
build_id: a62ff2210cbb2e719c5ab46abd62e323a85ad622