const{Fragment:e,jsx:t,jsxs:l}=arguments[0];function _createMdxContent(n){const i={a:"a",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...n.components},{Accordion:o,Callout:s,HelpImage:r,Step:a,Steps:h}=i;return o||_missingMdxReference("Accordion",!0),s||_missingMdxReference("Callout",!0),r||_missingMdxReference("HelpImage",!0),a||_missingMdxReference("Step",!0),h||_missingMdxReference("Steps",!0),l(e,{children:[t(i.p,{children:"Want your invoices, packing slips, and emails to reflect your brand and speak to your customers in your voice? With Postsale’s template editor, you can add your logos, customize colors, add personalized messages, and more to make each invoice, packing slip or email feel like your own."}),"\n",l(i.p,{children:[t(i.a,{href:"/help/templates/the-default-postsale-templates",children:"Learn more about the default Postsale templates here"}),"."]}),"\n",t(i.p,{children:"In this guide, we’ll walk you through how to personalize your templates with some easy modifications that anyone can do."}),"\n",t(i.h2,{id:"before-we-begin",children:"Before We Begin"}),"\n",l(i.ul,{children:["\n",l(i.li,{children:["Customizing your templates is a premium feature requiring the ",t(i.a,{href:"https://www.postsale.com/pricing",children:"Expand, Thrive, or Soar billing plan"}),". Learn more about managing your Postsale account in our ",t(i.a,{href:"/help/account/faqs-account-management",children:"Frequently Asked Questions"}),"."]}),"\n",l(i.li,{children:["For more advanced users, or if you'd just like to learn more about how templates work, feel free to also ",t(i.a,{href:"/help/templates/advanced-editing-templates",children:"check out our Advanced Editing Postsale Templates help article"})," for information on using Liquid template language."]}),"\n"]}),"\n",t(i.h2,{id:"personalize-your-templates",children:"Personalize Your Templates"}),"\n",t(i.h3,{id:"a-few-suggestions-to-get-you-started",children:"A Few Suggestions to Get You Started"}),"\n",t(i.p,{children:"There are times when you may want to make a few changes to your templates so that they better communicate your branding and messaging. The sections in this article show some simple-to-follow guides on how to modify each of the templates to make them your own."}),"\n",t(i.p,{children:"Before you begin editing, here are a couple of helpful suggestions:"}),"\n",l(o,{title:"1 - Make Copies Before You Begin Editing",children:[t(i.p,{children:"Before making changes, it’s a good idea to start by duplicating the default template so that you can work in the copy. That way, the original stays intact and you’ve got a clean version to go back to if needed."}),t(i.p,{children:"You can also create as many copies as you like, which is handy for testing out different designs or saving versions for different use cases."}),t(i.p,{children:"To make a copy:"}),l(h,{children:[t(a,{children:l(i.p,{children:["Go to ",t(i.strong,{children:"Settings > Account Settings."})]})}),t(a,{children:l(i.p,{children:["Select ",t(i.strong,{children:"Templates."})]})}),t(a,{children:t(i.p,{children:"Select the template."})}),l(a,{children:[l(i.p,{children:["Click the ",t(i.strong,{children:"Copy"})," button."]}),t(r,{src:"/help/images/personalize-your-templates/a19d2c84-TMP_MakeCopy_Procedure.png",alt:"A template has been selected and the copy button is being clicked.",width:725,height:1154}),t(i.p,{children:"The copy opens in the template editor."})]})]}),l(s,{type:"note",title:"About Template Syncing",children:[t(i.p,{children:"By default, templates are synced with the latest Postsale version and can’t be edited. This is helpful if you want to:"}),l(i.ul,{children:["\n",t(i.li,{children:"Keep the template exactly as designed"}),"\n",t(i.li,{children:"Automatically receive updates or improvements from Postsale"}),"\n"]}),t(i.p,{children:"However, since you will need to edit the copy you just made and you don't wish for Postsale to overwrite your changes, you'll want to turn syncing off."})]}),l(h,{startIndex:4,children:[l(a,{children:[l(i.p,{children:["Click the ",t(i.strong,{children:"Turn Sync Off"})," button.\nThis allows you to make edits to the template."]}),t(r,{src:"/help/images/personalize-your-templates/69fda963-TMP_TurnSync_Off.png",alt:"The turn sync off button is being clicked.",width:533,height:296})]}),t(a,{children:l(i.p,{children:["Select ",t(i.strong,{children:"Settings"}),"."]})}),t(a,{children:t(i.p,{children:"Give the template a unique name."})}),l(a,{children:[l(i.p,{children:["Click ",t(i.strong,{children:"Save"})," to save the template."]}),t(r,{src:"/help/images/personalize-your-templates/c0c07e95-TMP_Name_and_Save.png",alt:"",width:493,height:1596})]})]}),t(i.p,{children:"The copy of the template is saved and ready to be edited."})]}),"\n",l(o,{title:"2 - Mistakes Happen: Revert to the Default Version",children:[t(i.p,{children:"Mistakes happen. When they do, sometimes it's best to just start from the beginning. Here's how you can revert the template back to the original, default version:"}),l(h,{children:[t(a,{children:l(i.p,{children:["Select ",t(i.strong,{children:"Settings"}),"."]})}),l(a,{children:[l(i.p,{children:["Check the ",t(i.strong,{children:"Sync with Built In Template"})," checkbox."]}),t(r,{src:"/help/images/personalize-your-templates/daae0093-TMP_EnableSync.png",alt:"",width:550,height:1350})]}),l(a,{children:[l(i.p,{children:["Click ",t(i.strong,{children:"Sync"})," to confirm that you wish to overwrite any changes you have made to the template and to revert to the latest default version of the template."]}),t(r,{src:"/help/images/personalize-your-templates/6d11ffce-TMP_ConfirmSync.png",alt:"",width:547,height:418})]})]}),t(i.p,{children:"The template is now reverted back to the default version."})]}),"\n",t(i.h3,{id:"step-by-step-guides",children:"Step-By-Step Guides"}),"\n",t(i.p,{children:"Below, you’ll find sections for each template type, with step-by-step guides for some of the most common ways to customize and brand them."}),"\n",t(i.p,{children:t(i.a,{href:"/help/templates/add-or-replace-template-logos",children:"Want to update the logo(s) that appear on your templates? Check out this help article."})}),"\n",t(i.p,{children:"These aren’t the only changes you can make, just a starting point. Our goal is to give you the tools and confidence to make your templates work for your business, however you need them to."}),"\n",t(i.p,{children:"Let's get started:"}),"\n",l(o,{title:"Personalize Your Invoice and Packing Slip Templates",children:[t(i.p,{children:"Here are some edits that you can make to brand and customize the Packing Slip or Invoice templates:"}),l(o,{title:"Add Your Own Custom Message",children:[t(i.p,{children:"Postsale's default invoice and packing slip templates include a thank you message. It says:"}),t(i.p,{children:l(i.em,{children:["Thank you for your business. Questions? Contact us at ",t(i.strong,{children:"[your email address]"})]})}),t(i.p,{children:"You can update this message to make it your own. Here's how:\nThe steps below can be used to update the invoice and/or the packing slip template."}),l(h,{children:[l(a,{children:[l(i.p,{children:["Go to ",t(i.strong,{children:"Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/956914af-BTN_Settings_MRK.png",alt:"",width:106,height:78})]}),l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Account Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/257a0b21-BTN_Settings_AccountSettings_MRK.png",alt:"",width:220,height:433})]})]}),l(h,{startIndex:2,children:[l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Templates"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/5fb2a068-TMP_SEL_Templates_v2.png",alt:"Templates is selected.",width:240,height:616})]}),l(a,{children:[l(i.p,{children:["Select the ",t(i.a,{href:"#1-make-copies-before-you-begin-editing-4",children:"template you wish to edit"}),". Then click ",t(i.strong,{children:"Edit"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/52fd7746-TMP_SEL_Template_BTN_Edit.png",alt:"",width:374,height:1114}),t(i.p,{children:"Next, we will look for the default message within the code on the left side of the screen. Here's how:"})]}),l(a,{children:[l(i.p,{children:["Click anywhere inside of the code window. Then, open the search dialog by pressing ",t(i.strong,{children:"CTRL + F"})," (Windows) or ",t(i.strong,{children:"CMD + F"})," (Mac)."]}),l(i.p,{children:["The ",t(i.strong,{children:"Find"})," dialog opens at the bottom of the Code window."]}),t(r,{src:"/help/images/personalize-your-templates/f035d389-TMP_FindDialog.png",alt:"The find dialog is shown.",width:548,height:1162})]}),l(a,{children:[l(i.p,{children:["Type ",t(i.strong,{children:"Thank you for your business"})," into the ",t(i.strong,{children:"Find"})," field and click ",t(i.strong,{children:"next"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/079b5ab4-TMP_Find_Thankyou.png",alt:"The Find dialog is shown.",width:664,height:118})]})]}),l(i.p,{children:["When you click ",t(i.strong,{children:"next"}),", you will jump to the code for the default message. It will look like this:"]}),t(e,{children:t(i.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0","data-language":"html",children:l(i.code,{"data-is-block":"true",children:[t(i.span,{className:"line"}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" Thank you for your business."})}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" {% if order.store.address.email %}"})}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" Questions? Contact us at <"}),t(i.span,{style:{color:"#22863A"},children:"strong"}),t(i.span,{style:{color:"#24292E"},children:">{{ order.store.address.email }}"})]}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" {% endif %}"})}),"\n",t(i.span,{className:"line"})]})})}),t(i.p,{children:"If you're not used to looking at code, this might look a little intimidating, but don't worry. Let's walk through it:"}),t(i.p,{children:"What this code is doing is saying “Hey template. If there is an email address associated with the store, display it in the message, like this…”"}),t(r,{src:"/help/images/personalize-your-templates/dfe0a01d-TMP_DisplayEmailCode.png",alt:"",width:1356,height:122}),t(i.p,{children:"“Otherwise, just display the first sentence, like this….”"}),t(r,{src:"/help/images/personalize-your-templates/96df750b-image.png",alt:"",width:1356,height:122}),t(i.h3,{id:"examples",children:"Examples"}),t(i.p,{children:"You can change anything in between the and . Just be sure to leave the and in place."}),t(i.h4,{id:"example-1",children:"Example 1"}),t(i.p,{children:"Here's an example that leaves the code to include the email address if there is one associated with the store, but changes the message itself."}),t(e,{children:t(i.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0","data-language":"html",children:l(i.code,{"data-is-block":"true",children:[t(i.span,{className:"line"}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" We appreciate your order."})}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" {% if order.store.address.email %}"})}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" We are always here to help! Reach out at <"}),t(i.span,{style:{color:"#22863A"},children:"strong"}),t(i.span,{style:{color:"#24292E"},children:">{{ order.store.address.email }}"})]}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" {% endif %}"})}),"\n",t(i.span,{className:"line"})]})})}),t(i.p,{children:"It looks like this on the packing slip or invoice:"}),t(r,{src:"/help/images/personalize-your-templates/d077f420-image.png",alt:"",width:1364,height:122}),t(i.h4,{id:"example-2",children:"Example 2"}),l(i.p,{children:["You can also type in your message between the and ",t(i.strong,{children:"."})," This would remove the code for the email and just display the message you type. Like this…"]}),t(e,{children:t(i.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0","data-language":"html",children:t(i.code,{"data-is-block":"true",children:t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" We appreciate your order. We are always here to help! Give us a call at 800-555-555x."})})})})}),t(i.p,{children:"It looks like this on the packing slip or invoice."}),t(r,{src:"/help/images/personalize-your-templates/e35579e3-image.png",alt:"",width:1370,height:126}),t(i.h4,{id:"example-3",children:"Example 3"}),l(i.p,{children:["You can make portions of your message stand out by making it ",t(i.strong,{children:"bold"})," or ",t(i.em,{children:"italicized"}),". Here's and example where we make the phone number in our message both."]}),t(i.p,{children:"Notice that the phone number is now wrapped in:"}),l(i.ul,{children:["\n",l(i.li,{children:[t("b",{children:" "})," for ",t(i.strong,{children:"Bold text"})]}),"\n",l(i.li,{children:["for ",t(i.em,{children:"Italicized text"})]}),"\n"]}),t(e,{children:t(i.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0","data-language":"html",children:t(i.code,{"data-is-block":"true",children:l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" We appreciate your order. We are always here to help! Give us a call at <"}),t(i.span,{style:{color:"#22863A"},children:"b"}),t(i.span,{style:{color:"#24292E"},children:">800-555-555x."})]})})})}),t(i.p,{children:"And it looks like this:"}),t(r,{src:"/help/images/personalize-your-templates/528dc538-image.png",alt:"",width:1362,height:128})]}),l(o,{title:"Change the Colors",children:[t(i.p,{children:"Postsale's templates include a light gray background for the different sections, like the Order Number, Order Date, Address section, and so on."}),t(i.p,{children:"But what if you'd like to change that color to be in line with your branding? Let's dive in:\nThe steps below can be used to update the invoice and/or the packing slip template."}),l(s,{type:"note",title:"A Little About Colors in Templates",children:[l(i.p,{children:["In Postsale templates, colors are defined using ",t(i.strong,{children:"HEX color codes"}),". These are simple color labels that tell the template exactly which color to use. This is helpful when you want everything to match your brand colors exactly."]}),l(i.p,{children:[t(i.strong,{children:"So, what’s a HEX color code?"}),"\nIt’s just a six-character code (like ",t(i.code,{children:"#fafafa"}),") that represents a specific color."]}),l(i.p,{children:["By default, Postsale uses ",t(i.code,{children:"#fafafa"})," for the template background. In the next steps, we’ll show you how to change that color to your brand color for all sections in the template."]}),t(i.p,{children:"This section assumes that you have the HEX color code for your brand color."})]}),l(h,{children:[l(a,{children:[l(i.p,{children:["Go to ",t(i.strong,{children:"Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/956914af-BTN_Settings_MRK.png",alt:"",width:106,height:78})]}),l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Account Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/257a0b21-BTN_Settings_AccountSettings_MRK.png",alt:"",width:220,height:433})]})]}),l(h,{startIndex:2,children:[l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Templates"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/5fb2a068-TMP_SEL_Templates_v2.png",alt:"Templates is selected.",width:240,height:616})]}),l(a,{children:[l(i.p,{children:["Select the ",t(i.a,{href:"#1-make-copies-before-you-begin-editing-4",children:"template you wish to edit"}),". Then click ",t(i.strong,{children:"Edit"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/52fd7746-TMP_SEL_Template_BTN_Edit.png",alt:"An invoice is selected and the Edit button is being clicked.",width:374,height:1114})]}),l(a,{children:[l(i.p,{children:["Click anywhere inside of the code window. Then, open the search dialog by pressing ",t(i.strong,{children:"CTRL + F"})," (Windows) or ",t(i.strong,{children:"CMD + F"})," (Mac)."]}),l(i.p,{children:["The ",t(i.strong,{children:"Find"})," dialog opens at the bottom of the Code window."]}),t(r,{src:"/help/images/personalize-your-templates/f035d389-TMP_FindDialog.png",alt:"The find dialog is shown at the bottom of the code screen.",width:548,height:1162})]})]}),t(i.p,{children:"Next, we will use the Find and Replace options to locate and replace all of the HEX color codes that control the background colors."}),l(h,{startIndex:5,children:[l(a,{children:[l(i.p,{children:["Enter ",t(i.strong,{children:"#fafafa"})," into the ",t(i.strong,{children:"Find"})," field and your Hex color code into the ",t(i.strong,{children:"Replace"})," field."]}),t(r,{src:"/help/images/personalize-your-templates/d61e25c5-TMP_ReplaceAllFAFAFA.png",alt:"",width:1448,height:126}),t(i.p,{children:"You will see the preview update to display the correct color in the background of most sections in the template."}),t(r,{src:"/help/images/personalize-your-templates/b1406c92-TMP_Example1_ColorChange.png",alt:"An example invoice with color changes is shown.",width:400,height:1176}),l(i.p,{children:["Notice that the ",t(i.strong,{children:"rder Items"})," table header is a slightly different color. Let's update that, too."]})]}),l(a,{children:[l(i.p,{children:["Use the Find and Replace options again. This time enter ",t(i.strong,{children:"#f9fafb"})," into the ",t(i.strong,{children:"Find"})," field and your Hex color code into the ",t(i.strong,{children:"Replace"})," field. Click ",t(i.strong,{children:"Replace All"}),".\nThe Order Items section will update with your color."]}),t(r,{src:"/help/images/personalize-your-templates/eb8d74a1-TMP_ColorChangedExample2.png",alt:"",width:703,height:212})]})]}),l(i.p,{children:["You can also change the colors of the ",t(i.strong,{children:"Order Notes"})," section. The notes section has two colors, one for the background color and another for the left border."]}),l(h,{startIndex:7,children:[l(a,{children:[l(i.p,{children:["Open the Find dialog again. This time, enter ",t(i.strong,{children:".note-item"})," into the ",t(i.strong,{children:"Find"})," field and click ",t(i.strong,{children:"Next"}),".\nThe section that controls the look of the Order Notes will be shown in the code screen."]}),t(r,{src:"/help/images/personalize-your-templates/b8a95a93-2025-12-18_07-30-43.png",alt:"",width:433,height:822})]}),l(a,{children:[l(i.p,{children:["Update both the ",t(i.strong,{children:"background:"})," and the ",t(i.strong,{children:"border-left:"})," lines with your Hex color code(s).\nThe Order Notes background will update."]}),t(r,{src:"/help/images/personalize-your-templates/7ff78f6d-TMP_ColorChangeExample3.png",alt:"",width:914,height:220})]})]}),t(i.p,{children:"You have now updated all of the background colors in the template!"})]})]}),"\n",l(o,{title:"Personalize Your Shipment Notification Email Template",children:[t(i.p,{children:"Did you know that you can send an email to your customer letting them know that their order has shipped? You sure can! Postsale has a default email template for that."}),t(i.p,{children:"The default template is ready to go just the way it is, but let's look at a couple of ways to edit the default template so that it better matches your brand."}),l(i.p,{children:[t(i.a,{href:"/help/automation/introduction-to-automation",children:"Learn more about setting up Postsale automations to email your customers"}),"."]}),l(o,{title:"Change the Email Message",children:[t(i.p,{children:"Here's the default message in the Order Shipped Notification Email template:"}),t(i.p,{children:"Great news! Your order is on its way. Click any tracking number below to see when it will arrive. 😊"}),t(i.p,{children:"Want to add your own, personalized message? Here's how:"}),l(h,{children:[l(a,{children:[l(i.p,{children:["Go to ",t(i.strong,{children:"Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/956914af-BTN_Settings_MRK.png",alt:"",width:106,height:78})]}),l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Account Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/257a0b21-BTN_Settings_AccountSettings_MRK.png",alt:"",width:220,height:433})]})]}),l(h,{startIndex:2,children:[l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Templates"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/5fb2a068-TMP_SEL_Templates_v2.png",alt:"Templates is selected.",width:240,height:616})]}),l(a,{children:[l(i.p,{children:["Select the ",t(i.a,{href:"#1-make-copies-before-you-begin-editing-4",children:"template you wish to edit"}),". Then click ",t(i.strong,{children:"Edit"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/ec383330-TMP_SEL_EmailTemplate_BTN_Copy.png",alt:"The email template copy is selected and the Edit button is being clicked.",width:294,height:988})]}),t(a,{children:t(i.p,{children:"Next, we will look for the default message within the code on the left side of the screen. Here's how:"})}),l(a,{children:[l(i.p,{children:["Click anywhere inside of the code window. Then, open the search dialog by pressing ",t(i.strong,{children:"CTRL + F"})," (Windows) or ",t(i.strong,{children:"CMD + F"})," (Mac)."]}),l(i.p,{children:["The ",t(i.strong,{children:"Find"})," dialog opens at the bottom of the Code window."]}),t(r,{src:"/help/images/personalize-your-templates/f035d389-TMP_FindDialog.png",alt:"",width:548,height:1162})]}),l(a,{children:[l(i.p,{children:["Type ",t(i.strong,{children:"Main Message"})," into the ",t(i.strong,{children:"Find"})," fields and click ",t(i.strong,{children:"Next"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/f3dde123-image.png",alt:"",width:554,height:124}),t(i.p,{children:"You will jump to the section of code for the main message. It looks like this:\nThe text that displays in the email is highlighted for you. This is what you would update with your own message."}),l(i.p,{children:[t(r,{src:"/help/images/personalize-your-templates/8075de48-TMP_Email_HighlightedTextMessage.png",alt:"",width:951,height:208}),"Notice that the first highlighted line includes some code. The code simply tells Postsale to include the First Name associated with the order. You can leave that code, or completely remove it. It's up to you. The same is true of the emojis. 😁"]}),t(i.p,{children:"Here are 2 examples of an updated message."})]})]}),t(i.h4,{id:"example-1-1",children:"Example 1"}),t(i.p,{children:"This example leaves the code to include the recipient's first name, but changes the message."}),t(e,{children:t(i.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0","data-language":"html",children:l(i.code,{"data-is-block":"true",children:[l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:"<"}),t(i.span,{style:{color:"#22863A"},children:"tr"}),t(i.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" <"}),t(i.span,{style:{color:"#22863A"},children:"td"}),t(i.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" <"}),t(i.span,{style:{color:"#22863A"},children:"h1"}),t(i.span,{style:{color:"#6F42C1"},children:" style"}),t(i.span,{style:{color:"#24292E"},children:"="}),t(i.span,{style:{color:"#032F62"},children:'"margin: 0 0 12px 0; font-size: 24px; font-weight: 600; color:'})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#032F62"},children:' #1a202c; line-height: 1.3;"'}),t(i.span,{style:{color:"#24292E"},children:">"})]}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" Hey {{ order.ship_address.name | first_name }}, keep an eye out for your order! 📦"})}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" "})]}),"\n",t(i.span,{className:"line"}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" Your order is on its way to you! Easily track your order by clicking your"})}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" tracking number below. 😊"})}),"\n",t(i.span,{className:"line"})]})})}),t(i.p,{children:"It looks like this in the email:"}),t(r,{src:"/help/images/personalize-your-templates/7e254567-TMP_Email_MessageExample1.png",alt:"An example is shown",width:662,height:111}),t(i.h4,{id:"example-2-1",children:"Example 2"}),t(i.p,{children:"In this example, the code to include the name is removed and the emojis have been changed."}),t(e,{children:t(i.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0","data-language":"html",children:l(i.code,{"data-is-block":"true",children:[l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:"<"}),t(i.span,{style:{color:"#22863A"},children:"tr"}),t(i.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" <"}),t(i.span,{style:{color:"#22863A"},children:"td"}),t(i.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" <"}),t(i.span,{style:{color:"#22863A"},children:"h1"}),t(i.span,{style:{color:"#6F42C1"},children:" style"}),t(i.span,{style:{color:"#24292E"},children:"="}),t(i.span,{style:{color:"#032F62"},children:'"margin: 0 0 12px 0; font-size: 24px; font-weight: 600; color:'})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#032F62"},children:' #1a202c; line-height: 1.3;"'}),t(i.span,{style:{color:"#24292E"},children:">"})]}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" Keep an eye out for your order! 🚚"})}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" "})]}),"\n",t(i.span,{className:"line"}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" Your order is on its way to you! Easily track your order by clicking your"})}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" tracking number below. ✅"})}),"\n",t(i.span,{className:"line"})]})})}),t(i.p,{children:"It looks like this in the email:"}),t(r,{src:"/help/images/personalize-your-templates/05d5327c-TMP_EmailMessageExample2.png",alt:"A second example is shown.",width:685,height:109})]}),l(o,{title:"Change the Email Footer",children:[t(i.p,{children:"Here's the information included in the footer of the default email template:"}),t(r,{src:"/help/images/personalize-your-templates/e07cf900-2025-12-18_08-51-55.png",alt:"",width:704,height:236}),t(i.p,{children:"Here's how to update the information included in the email's footer:"}),l(h,{children:[l(a,{children:[l(i.p,{children:["Go to ",t(i.strong,{children:"Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/956914af-BTN_Settings_MRK.png",alt:"",width:106,height:78})]}),l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Account Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/257a0b21-BTN_Settings_AccountSettings_MRK.png",alt:"",width:220,height:433})]})]}),l(h,{startIndex:2,children:[l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Templates"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/5fb2a068-TMP_SEL_Templates_v2.png",alt:"Templates is selected.",width:240,height:616})]}),l(a,{children:[l(i.p,{children:["Select the ",t(i.a,{href:"#1-make-copies-before-you-begin-editing-4",children:"template you wish to edit"}),". Then click ",t(i.strong,{children:"Edit"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/ec383330-TMP_SEL_EmailTemplate_BTN_Copy.png",alt:"The email template copy is selected and the Edit button is being clicked.",width:294,height:988})]}),t(a,{children:t(i.p,{children:"Next, we will look for the default footer within the code on the left side of the screen. Here's how:"})}),l(a,{children:[l(i.p,{children:["Click anywhere inside of the code window. Then, open the search dialog by pressing ",t(i.strong,{children:"CTRL + F"})," (Windows) or ",t(i.strong,{children:"CMD + F"})," (Mac)."]}),l(i.p,{children:["The ",t(i.strong,{children:"Find"})," dialog opens at the bottom of the Code window."]}),t(r,{src:"/help/images/personalize-your-templates/f035d389-TMP_FindDialog.png",alt:"",width:548,height:1162})]}),l(a,{children:[l(i.p,{children:["Type ",t(i.strong,{children:"Footer"})," into the ",t(i.strong,{children:"Find"})," fields and click ",t(i.strong,{children:"Next"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/f2b5677d-image.png",alt:"",width:582,height:130}),t(i.p,{children:"You will jump to the section of code for the Footer. It looks like this:\nThe text that displays in the email is highlighted for you. This is what you would update with your own information."}),t(r,{src:"/help/images/personalize-your-templates/c19edc40-TMP_EmailFooterCodeDefault.png",alt:"THe footer code is shown with the changeable text highlighted.",width:1145,height:385}),t(i.p,{children:"Notice that the last highlighted section includes some code. The code simply tells Postsale to include your store's email address. You can leave that code, or completely remove it. It's up to you."})]})]}),t(i.h4,{id:"example-1-2",children:"Example 1"}),t(i.p,{children:"Here is an example that still includes the email address:"}),t(e,{children:t(i.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0","data-language":"html",children:l(i.code,{"data-is-block":"true",children:[l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:"<"}),t(i.span,{style:{color:"#22863A"},children:"td"}),t(i.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" <"}),t(i.span,{style:{color:"#22863A"},children:"h3"}),t(i.span,{style:{color:"#6F42C1"},children:" style"}),t(i.span,{style:{color:"#24292E"},children:"="}),t(i.span,{style:{color:"#032F62"},children:'"margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color:'})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#032F62"},children:' #1a202c;"'}),t(i.span,{style:{color:"#24292E"},children:">We are Here to Help"})]}),"\n",t(i.span,{className:"line"}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" Questions about your order? Reach out at"})}),"\n",t(i.span,{className:"line"}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" 800-555-555x or email us at"})}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" <"}),t(i.span,{style:{color:"#22863A"},children:"a"})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#6F42C1"},children:" href"}),t(i.span,{style:{color:"#24292E"},children:"="}),t(i.span,{style:{color:"#032F62"},children:'"mailto:{{order.store.address.email}}"'})]}),"\n",t(i.span,{className:"line"}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" >"})}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" {{- order.store.address.email -}}"})}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" "})]}),"\n",t(i.span,{className:"line"})]})})}),t(i.p,{children:"It looks like this:"}),t(r,{src:"/help/images/personalize-your-templates/815814ec-TMP_EmailFooterExample1.png",alt:"",width:654,height:244}),t(i.h4,{id:"example-2-2",children:"Example 2"}),t(i.p,{children:"This code removes the email address code, and adds emojis:"}),t(e,{children:t(i.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0","data-language":"html",children:l(i.code,{"data-is-block":"true",children:[l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" <"}),t(i.span,{style:{color:"#22863A"},children:"tr"}),t(i.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" <"}),t(i.span,{style:{color:"#22863A"},children:"td"}),t(i.span,{style:{color:"#6F42C1"},children:" style"}),t(i.span,{style:{color:"#24292E"},children:"="}),t(i.span,{style:{color:"#032F62"},children:'"padding: 28px 30px 24px 30px; background-color: #fafafa; border-top:'})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#032F62"},children:' 1px solid #e5e7eb; text-align: center;"'}),t(i.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" <"}),t(i.span,{style:{color:"#22863A"},children:"h3"}),t(i.span,{style:{color:"#6F42C1"},children:" style"}),t(i.span,{style:{color:"#24292E"},children:"="}),t(i.span,{style:{color:"#032F62"},children:'"margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color:'})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#032F62"},children:' #1a202c;"'}),t(i.span,{style:{color:"#24292E"},children:">Thank you! We are Here to Help."})]}),"\n",t(i.span,{className:"line"}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" Questions about your order❓"})}),"\n",t(i.span,{className:"line"}),"\n",t(i.span,{className:"line",children:t(i.span,{style:{color:"#24292E"},children:" Give us a call at 800-555-555x ☎"})}),"\n",t(i.span,{className:"line"}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" "})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:" "})]}),"\n",l(i.span,{className:"line",children:[t(i.span,{style:{color:"#24292E"},children:""})]})]})})}),t(i.p,{children:"And it looks like this:"}),t(r,{src:"/help/images/personalize-your-templates/744efb8a-TMP_EmailFooterExample2.png",alt:"",width:652,height:258})]}),l(o,{title:"Change the Colors",children:[t(i.p,{children:"Postsale's templates include a light gray background for the different sections, like the Order Number, Order Date, Address section, and so on."}),t(i.p,{children:"But what if you'd like to change that color to be in line with your branding? Let's dive in:"}),l(s,{type:"note",title:"A Little About Colors in Templates",children:[l(i.p,{children:["In Postsale templates, colors are defined using ",t(i.strong,{children:"HEX color codes"}),". These are simple color labels that tell the template exactly which color to use. This is helpful when you want everything to match your brand colors exactly."]}),l(i.p,{children:[t(i.strong,{children:"So, what’s a HEX color code?"}),"\nIt’s just a six-character code (like ",t(i.code,{children:"#fafafa"}),") that represents a specific color."]}),l(i.p,{children:["By default, Postsale uses ",t(i.code,{children:"#fafafa"})," for the template background. In the next steps, we’ll show you how to change that color to your brand color for all sections in the template."]}),t(i.p,{children:"This section assumes that you have the HEX color code for your brand color."})]}),l(h,{children:[l(a,{children:[l(i.p,{children:["Go to ",t(i.strong,{children:"Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/956914af-BTN_Settings_MRK.png",alt:"",width:106,height:78})]}),l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Account Settings"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/257a0b21-BTN_Settings_AccountSettings_MRK.png",alt:"",width:220,height:433})]})]}),l(h,{startIndex:2,children:[l(a,{children:[l(i.p,{children:["Select ",t(i.strong,{children:"Templates"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/5fb2a068-TMP_SEL_Templates_v2.png",alt:"Templates is selected.",width:240,height:616})]}),l(a,{children:[l(i.p,{children:["Select the ",t(i.a,{href:"#1-make-copies-before-you-begin-editing-4",children:"template you wish to edit"}),". Then click ",t(i.strong,{children:"Edit"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/ec383330-TMP_SEL_EmailTemplate_BTN_Copy.png",alt:"The email template copy is selected and the Edit button is being clicked.",width:294,height:988})]}),l(a,{children:[l(i.p,{children:["Click anywhere inside of the code window. Then, open the search dialog by pressing ",t(i.strong,{children:"CTRL + F"})," (Windows) or ",t(i.strong,{children:"CMD + F"})," (Mac)."]}),l(i.p,{children:["The ",t(i.strong,{children:"Find"})," dialog opens at the bottom of the Code window."]}),t(r,{src:"/help/images/personalize-your-templates/f035d389-TMP_FindDialog.png",alt:"The find dialog is shown at the bottom of the code screen.",width:548,height:1162})]})]}),t(i.p,{children:"Next, we will use the Find and Replace options to locate and replace all of the HEX color codes that control the background colors."}),l(h,{startIndex:5,children:[l(a,{children:[l(i.p,{children:["Enter ",t(i.strong,{children:"#fafafa"})," into the ",t(i.strong,{children:"Find"})," field and your Hex color code into the ",t(i.strong,{children:"Replace"})," field."]}),t(r,{src:"/help/images/personalize-your-templates/d61e25c5-TMP_ReplaceAllFAFAFA.png",alt:"",width:1448,height:126}),t(i.p,{children:"You will see the preview update to display the correct color in the background of most sections in the template."}),t(r,{src:"/help/images/personalize-your-templates/720c8f6f-TMP_EmailColorChange1.png",alt:"",width:425,height:680}),l(i.p,{children:["Notice that the ",t(i.strong,{children:"rder Items"})," table header is a slightly different color. Let's update that, too."]})]}),l(a,{children:[l(i.p,{children:["Use the Find and Replace options again. This time enter ",t(i.strong,{children:"#f9fafb"})," into the ",t(i.strong,{children:"Find"})," field and your Hex color code into the ",t(i.strong,{children:"Replace"})," field. Click ",t(i.strong,{children:"Replace All"}),".\nOrder Items section will update to look like this."]}),t(r,{src:"/help/images/personalize-your-templates/4552897f-TMP_EmailColorChangeItems.png",alt:"",width:754,height:136}),t(i.p,{children:"You can also update the overall background color of the entire email."})]}),l(a,{children:[l(i.p,{children:["Use the Find option again. Enter ",t(i.strong,{children:"Email Container"})," into the ",t(i.strong,{children:"Find"})," field and click ",t(i.strong,{children:"Next"}),"."]}),t(r,{src:"/help/images/personalize-your-templates/b64aef23-image.png",alt:"",width:582,height:120}),t(i.p,{children:"The Email Container code will shown."}),t(r,{src:"/help/images/personalize-your-templates/636aff36-image.png",alt:"",width:350,height:372})]}),l(a,{children:[l(i.p,{children:["Update the ",t(i.strong,{children:"style=background-color: #fafafa"})," line with the Hex code for the color you want the email background to be."]}),t(r,{src:"/help/images/personalize-your-templates/17c3f7e9-image.png",alt:"",width:350,height:366})]})]}),t(i.p,{children:"The colors of your email template have now been updated."}),t(r,{src:"/help/images/personalize-your-templates/fcf20a7f-TMP_EmailColorExample3.png",alt:"",width:425,height:849})]})]})]})}return{default:function(e={}){const{wrapper:l}=e.components||{};return l?t(l,{...e,children:t(_createMdxContent,{...e})}):_createMdxContent(e)}};function _missingMdxReference(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}

Postsale Anywhere

Postsale Anywhere Chrome Extension