Content blocks serve as an excellent method to incorporate additional content into your checkout, thank you, or order status pages. You can create a compelling super title, title, and description within these content blocks to express gratitude to your customers, offer additional insights about your business, build trust, or showcase any information you'd like to convey! 🛒🔍✨
Content blocks can be accessed by all merchants, but they can only be placed into the checkout by Shopify Plus merchants.
Shopify Plus merchants can add content blocks to:
Checkout
Thank you page
Order status page
Non-Shopify Plus merchants can add content blocks to:
Thank you page
Order status page
Building a Content Block
Create Content Block
To begin, the initial step is setting up a Checkout Extensions widget in Rebuy. Simply navigate to Rebuy, proceed to the checkout extensions section, and click on the "get started" option to initiate the process.
Following the setup process, you can select the content block as your preferred media type. From there, specify the placement location, whether it's on the checkout page, thank you page, or order status page. Tailoring the content block placement ensures your chosen content is displayed precisely where you want it for maximum impact. 🛍️✨
Configure Language Settings
Rebuy's Checkout Extensions allow you to enter customized text in various fields, ensuring that every part of your checkout process resonates with your brand identity and speaks directly to your customers. You can enter a super title, title, and description within the language settings.
Due to Shopify limitations HTML is not supported in Content Block language settings.
Add Images
Rebuy provides pre-designed icons that include secure checkout, payment methods, social media, and various other generic options. In order for you to add custom images to your content block, you must first upload those images to the gallery. Not to worry, it's a simple process. Click on the "Upload" button and manually select the images you want to upload here.
Although you can upload images within the settings of your content block, managing your images is only possible through the Image Gallery. So, head over to the Image Gallery whenever you want to manage your images or make any changes to them.
After uploading your images, proceed to incorporate them into the content block and apply any desired customizations. Start by selecting "Images" and then choose "Add Images." A pop-out tray will emerge, allowing you to upload more images (as explained earlier), pick from pre-designed icons, or choose one from your gallery, as illustrated below.
Configuring your images
Once you have your image(s) selected for the content block, you can click on them and start to customize the placement, add text, adjust the alignment, size, and add Alt-text (accessible descriptions).
Image block layout and row settings
Choose between a row layout or a column layout to control how images align with the text in your image gallery. This setting applies to the description section and works in conjunction with the super title, title, and/or description settings you configured earlier in the language section. The row spacing determines the distance between images and text, and you can choose from various options such as none, extra tight, tight, default, loose, and extra loose to control this spacing.
Image size and placement
The size and placement settings for images impact their display in the designated areas. Image size determines the dimensions, while placement influences how the images align within the content block.
Text alignment, size, and descriptions
The alignment setting dictates the display of the image description, offering options such as left-aligned, centered, or right-aligned. Additionally, the text size setting controls the size of the image description when entered in the settings.
Default values for Alt-Text are provided for pre-canned images by Rebuy, but you have the flexibility to customize these values according to your preferences. You will need to add your own descriptions for custom images. This section is designed to assist users who rely on visual readers.
Installing a Content Block
When you're ready to install or preview the complete version, be sure to copy your widget ID (as it will be necessary for the upcoming steps). To access your Shopify checkout editor, you can conveniently do so by clicking the "go to Shopify" button in the widget settings, or click "preview" in the upper right corner, which will automatically direct you to the checkout editor.
It's important to note that these content blocks do not rely on specific data source rules. They will appear whenever someone lands on the respective page(s) you have configured, providing a seamless and consistent user experience.
If you do not want to install the checkout extensions on your live checkout, you can make an alternate checkout to preview the widget by going to your Shopify checkout settings and duplicating your live checkout profile.
When accessing your checkout editor, your initial step is to select the page where you intend to implement the content block. You can do so by clicking the dropdown at the top of the checkout editor page as seen below.
Reminder! Content blocks can be accessed by all merchants, but they can only be placed into the checkout by Shopify Plus merchants.
Shopify Plus merchants can add content blocks to:
Checkout
Thank you page
Order status page
Non-Shopify Plus merchants can add content blocks to:
Thank you page
Order status page
Once you have selected the page you desire, you have the option to select the "add app block" button. From there, pick the "Rebuy Smart Component" app block, input the widget ID from your widget page, opt for "NO" when it comes to hiding this extension setting, and then proceed to click on the save button.
Keep in mind that the save button in Shopify won't automatically refresh the page, so you'll need to refresh the page manually to view the app in the checkout previewer.
Congratulations! You have successfully installed your content block! To complete the process, customize the block's placement. Navigate back to the main checkout profile settings page, where you can click and drag the app block to your desired location. Once you've found the perfect spot, click the "save" button to confirm your changes. 🎉
Final Results
FAQs
Where can I add content blocks?
Where can I add content blocks?
Currently you can add them to the checkout, thank you, or order status pages if you are on Shopify Plus. If you are not on Shopify Plus, then you can only add them to the thank you, or order status pages.
Do I need a data source for the content blocks?
Do I need a data source for the content blocks?
No, there are no data source requirements for the content block. It will be shown every time someone lands on the specific page you configure.
Do content blocks support videos?
Do content blocks support videos?
No, Shopify doesn't currently allow video support for Checkout Extensions, including Content Blocks. As a workaround, you can use animated gif files to introduce motion and action to a Content Block, however, it will lack the playback features and audio included with a standard video file.
What are the recommended image dimensions for different placements locations?
What are the recommended image dimensions for different placements locations?
The maximum image width is approximately 600px near the checkout fields and 375px near the Order Summary on the right. For images with text or important details, it’s best to use 2x asset dimensions (e.g., for a 375px display, upload a 750px image) to ensure clarity.
Is it possible to a a survey in or post checkout?
Is it possible to a a survey in or post checkout?
Currently, there is no way to add a survey directly to the checkout page.
It is not possible to add a survey to the thank you page after an order is placed.
There is no option to integrate a survey into the order status page.
Surveys cannot be added to the post-purchase page at this time.
What is the ideal image width and scaling guidance?
What is the ideal image width and scaling guidance?
We generally recommend an image width of at least 750px to allow for high-quality scaling. While we can scale images down without losing quality, note that we cannot scale them larger than their original dimensions.