Text columns with images: Create a custom version with HTML support
Note:
Groupthought does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Pipeline theme.
Text columns with images has a Rich Text section where you can add links and information. If you need the ability to have an HTML button or other standard HTML code, you can use this modification.
- 1
-
Create a new section file
Open your Code Editor.
Quick link if the theme is live/published:
Open Code Editor
In the Sections folder, choose Add a new section:
Use the Create section button to complete.
Call the new section:
index-columns-html
Example:
Use the Create section button to complete.
Erase all the default code that generated:
Replace with all the code from one of these files:
Pipeline 4:
Click to view code
Or
Pipeline 2, Pipeline 3:
Click to view code
Save the changes.
- 2
-
Add the section in your Theme Editor
Use the Custom Theme option in the top right corner of the Code Editor:
Next, in the Theme Editor under Sections:
Choose Add section:
Under Text, your new section will appear:
Add the new section and customize.
You'll notice the HTML area, this replaces the original Rich Text area. You can add your HTML code here. I've included a sample button which you can use or remove.
Button Classes
Here are already styled button classes that you can use in Pipeline:
.btn .btn--small .btn--large .btn--full .btn--clear .btn--splash .btn--square .btn--outline
Need help with code changes?
We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing.