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.
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.
Text & typography
You can format your text with bold, italics, and strike through. You can also create bulleted lists and numbered lists.
*Some italic text*
**Some bold text**
~Some strikethrough text~
- Bullet 1
- Bullet 2
- Bullet 3
1. Number one
2. Number two
3. Number three
<b>Some more bold text</b>
<del>Some strikethrough text</del>
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 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
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-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,
Template Normal, default promo banner
Template Pink, large promo banner
Template Green, normal promo banner
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-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.
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.
align-centerto 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.
Don't want column widths to adjust automatically? No problem. Just specify the number of columns that you'd like with the class
columns-4 to create two, three, and four columns respectively with fixed width.
<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>
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:
<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.
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:
<p class="img-description">Your Product Description</p>
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:
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:
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.