Step 1: What will you learn?
You will learn to create and configure dynamic content blocks that enhance your checkout experience.
Step 2: Navigate to Dashboard
Click the Dashboard to access your admin area where you manage your app.
You will find it on the left hand side panel of your Shopify Admin page.
Step 3: Open Content Creation
Look for the Dynamic content option and click create to start adding content blocks on your checkout.
Step 4: Select Content Name Field
Click the Content name field to specify the name of your new content block.
Step 5: Enter Content Name
Enter your content name to identify this dynamic block; for example, we are using Promotion.
Step 6: Add Display Rule
Click Add rule to define conditions under which this content will appear during checkout.
Pro Tip: You can add multiple rules and also choose conditions for when to follow the rules.
Step 7: Choose Attribute
Select from a range of rule types to base content display on the checkout page.
We are selecting Cart total as the attribute.
Step 8: Select Comparison Operator
Choose the comparison operator that fits your condition, such as Is equal to or Is greater than.
We are going for "is greater than" in this case.
Step 9: Open Number Input
Click Enter a number to input the value that the condition will be compared against.
Step 10: Add Content Block
Click Add Content to include a new content element within your dynamic block.
Step 11: Select Content Type
Select from the list of content types to choose from.
We are going with image type.
Step 12: Edit Image Settings
Click Edit to modify the image properties and specify the image source.
Step 13: Open Files
Open the files section under Content on your left side panel of the Shopify admin.
Step 14: Copy link
Click here to copy the image url that you want to use as the dynamic content.
Step 15: Select Desktop Image URL Field
Click Desktop image URL and paste the copied URL to specify the image that will display on desktop devices.
Pro Tip: You can configure different images for different devices.
Step 16: Save Content Block
Click Save to store your image content settings within the dynamic content block.
Step 17: Open Checkout Customizer
Copy the Content ID and Click Open Checkout Customizer to begin placing your dynamic content block on the checkout page.
Step 18: Add New Block
Click Add block to insert a new content block into your checkout layout.
Step 19: Select Dynamic Content Block
Select Dynamic Content to choose the type of block that will display your custom content.
Step 20: Select Dynamic Content ID
Click Dynamic Content ID and enter the identifier that you copied for your content block to link it properly.
Now paste the Content ID copied in step 17.
Pro Tip: It also shows how to control placement and styling through the Customizer with real-time previews.
Step 21: Save Checkout Customizations
Click Save to apply your changes and finalize the addition of dynamic content to your checkout page.
You have successfully added dynamic content to your checkout page using Checkout Blocks and Customizer. Verify the content appears under the specified cart total condition and explore further customization options to enhance your checkout experience.